如何在el-table展开行中渲染echarts图表

在Element UI的表格（el-table）中展示ECharts图表通常涉及到动态数据绑定和事件处理。当你想要在展开的行中显示图表时，可以按照以下步骤操作：

1. 首先，你需要在表格列定义中添加一个特殊的属性，比如`expand-renderer`，它是一个返回Promise的方法，用于渲染展开的行内容。

<el-table-column prop="columnTitle" label="标题" width="180">
  <template slot-scope="scope">
    <el-button type="primary" @click="toggleExpand(scope.$index)">展开</el-button>
    <template #expand>
      <!-- 展开部分 -->
      <div v-if="expanded === scope.$index">
        <el-chart ref="chart" :options="chartOptions" :resize="true"></el-chart>
      </div>
    </template>
  </template>
</el-table-column>

2. 在表格组件内部，维护一个数组记录哪些行已经展开，例如`expandedRows`，并设置一个方法`toggleExpand(index)`来控制展开状态。

data() {
  return {
    expandedRows: [],
    chartOptions: {} // 初始化你的ECharts配置对象
  };
},
methods: {
  toggleExpand(index) {
    if (this.expandedRows.includes(index)) {
      this.expandedRows.splice(this.expandedRows.indexOf(index), 1);
    } else {
      this.expandedRows.push(index);
    }
    this.renderChart(index); // 刷新对应行的图表
  },
  renderChart(index) {
    // 根据数据生成ECharts图表选项
    const rowData = ...; // 获取当前行的数据
    this.chartOptions = yourChartDataFormatter(rowData);
    this.$refs.chart.setOption(this.chartOptions);
  }
}

3. `renderChart(index)`方法应该包含根据当前行数据动态构建ECharts图表的过程。这可能涉及到从服务器获取数据、处理数据、然后更新图表配置。