<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柱状图中
时间: 2023-07-19 09:39:32 浏览: 170
el-data-table:element基于element-ui,轻松实现结界
您可以在 `changeImgState` 方法中获取当前行的数据,然后将这些数据传递给 echarts 实例,更新柱状图。例如:
```js
// 在 data 中定义一个变量存储 echarts 实例
data() {
return {
chart: null,
// ...
}
},
methods: {
changeImgState(row) {
// 获取当前行的数据
const { core, target, finish, finishRate } = row;
// 更新 echarts 实例中的数据
this.chart.setOption({
xAxis: {
data: [core]
},
series: [{
data: [target, finish, finishRate]
}]
});
}
},
mounted() {
// 初始化 echarts 实例
this.chart = echarts.init(document.getElementById('chart'));
// ...
}
```
这样,当用户点击表格中的某一行时,就会触发 `changeImgState` 方法,将该行数据传递给 echarts 实例,更新柱状图的数据。注意,这里假设您已经在页面中定义了一个 id 为 `chart` 的 DOM 元素作为 echarts 的容器。
阅读全文