el-table 表格中加入echarts

在el-table表格中加入echarts，可以通过el-table-column的自定义模板来实现。首先，在页面中引入echarts的相关js文件，并在data中定义一个变量来存储echarts实例。然后，在el-table-column中设置自定义模板，通过具体的html代码来显示echarts图表。

具体实现步骤如下：

1. 在页面中引入echarts的相关js文件。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2. 在data中定义一个变量来存储echarts实例。

data() {
  return {
    chartInstance: null
  }
},
mounted() {
  // 在mounted生命周期钩子中初始化echarts实例
  this.chartInstance = echarts.init(document.getElementById('chart-container'))
},

3. 在el-table-column的自定义模板中加入echarts图表所需的HTML代码。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column label="图表">
        <template slot-scope="scope">
          <div id="chart-container" style="width: 300px; height: 200px;"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

4. 在方法中通过echarts的API来更新图表数据。

methods: {
  updateChart() {
    // 假设tableData中有一列名为value，用于显示图表数据
    const chartData = this.tableData.map(item => item.value)
    
    // 使用echarts的setOption方法来更新图表数据
    this.chartInstance.setOption({
      xAxis: {
        type: 'category',
        data: chartData
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: chartData,
        type: 'line'
      }]
    })
  }
},

这样，当el-table中的数据发生变化时，echarts图表也会相应地更新。