<el-table :data="tableData" style="width: 500px; margin-top: 15px;" :header-row-class-name="setRowClassName" @row-click="changeImgState"> <el-table-column prop="core" label="指标" width="140" :show-overflow-tooltip='true'> </el-table-column> <el-table-column prop="target" label="目标值" width="70"> </el-table-column> <el-table-column prop="finish" label="完成值" width="70"> </el-table-column> <el-table-column prop="finishRate" label="完成率%" width="80"> </el-table-column> </el-table>,tableData: [{ core: '投资额(亿元)', target: '363.7', finish: '94.8', finishRate: '30' },怎么点击行,实现把行中的数据显示到echarts中
时间: 2024-03-20 18:42:34 浏览: 160
可以在`changeImgState`方法中获取到点击的行数据,然后将数据传递给echarts组件中进行展示。
具体实现可以参考以下步骤:
1. 在`changeImgState`方法中获取点击的行数据,例如:
```
changeImgState(row) {
// 获取点击的行数据
const rowData = row.row;
// 调用方法,将数据传递给echarts组件中进行展示
this.showEcharts(rowData);
}
```
2. 在`showEcharts`方法中,将数据传递给echarts组件进行展示,例如:
```
showEcharts(rowData) {
// 将行数据转换为echarts需要的数据格式
const chartData = {
legendData: ['目标值', '完成值', '完成率%'],
seriesData: [
{ value: rowData.target, name: '目标值' },
{ value: rowData.finish, name: '完成值' },
{ value: rowData.finishRate, name: '完成率%' }
]
};
// 更新echarts组件的数据
this.$refs.echarts.updateData(chartData);
}
```
3. 在echarts组件中,通过`props`接收传递过来的数据,并进行展示,例如:
```
<template>
<div ref="chart" style="width: 500px; height: 300px;"></div>
</template>
<script>
export default {
name: 'EchartsComponent',
props: {
legendData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
mounted() {
this.renderChart();
},
methods: {
renderChart() {
// 使用this.legendData和this.seriesData渲染echarts图表
// ...
},
updateData(data) {
// 更新echarts图表的数据
this.legendData = data.legendData;
this.seriesData = data.seriesData;
this.renderChart();
}
}
};
</script>
```
阅读全文