<el-table :data="tableCharaData" style="width: 560px; margin-top: 15px;" :header-row-class-name="setRowClassName"> <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>怎么点击table当前行时显示不同的数据显示echarts图表

你可以在表格中添加一个行点击事件，并在事件处理函数中根据当前行的数据来绘制相应的图表。具体步骤如下：

1. 在表格中添加一个行点击事件。例如，在el-table中添加一个@row-click事件：

<el-table :data="tableData" @row-click="handleRowClick">
  <!-- ... -->
</el-table>

2. 在事件处理函数中获取当前行的数据，并使用echarts绘制相应的图表。例如：

import echarts from 'echarts'

export default {
  methods: {
    handleRowClick(row) {
      // 获取当前行的数据
      const chartData = row.chartData

      // 使用echarts绘制图表
      const chartInstance = echarts.init(document.getElementById('chart-container'))
      chartInstance.setOption({
        // ...
      })
    }
  }
}

在这个例子中，我们获取当前行的chartData属性，并使用echarts绘制相应的图表。注意，我们需要在组件中引入echarts，并在mounted钩子函数中初始化echarts实例。

3. 在表格中添加一个图表容器。例如，在el-table-column中添加一个div元素，用来显示图表：

<el-table-column label="图表">
  <div id="chart-container"></div>
</el-table-column>

在这个例子中，我们添加了一个id为chart-container的div元素，用来显示图表。

当用户点击表格的某一行时，会触发handleRowClick方法，并根据当前行的数据来绘制相应的图表。注意，我们需要在组件中引入echarts，并在mounted钩子函数中初始化echarts实例。