el-table 展开行，如何在里面显示echarts图表

在Element UI的`el-table`组件中嵌入ECharts图表通常需要一些步骤。首先，你需要在`el-table`的每一行单元格（`<el-table-column>`）中设置一个可以放置图表的容器，例如`<template slot-scope="scope">...</template>`。

以下是一个简单的示例，展示了如何在展开行中插入一个ECharts图表：

<template>
  <el-table :data="tableData" @expand-change="handleExpandChange">
    <el-table-column type="expand">
      <template slot-scope="{ row }">
        <div class="chart-container">
          <el-row>
            <el-col :span="12">
              <!-- 展示表格内容 -->
              ...
            </el-col>
            <el-col :span="6" class="chart-column">
              <!-- ECharts图表部分 -->
              <div id="chart" v-if="showChart(row)">
                <ec-chart :options="chartOptions" />
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-table-column>

    <!-- 其他列 -->
    ...

  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { ... },
        // 更多数据...
      ],
      chartOptions: {},
      showChart(row) {
        // 判断是否显示图表，可以根据row的数据动态判断
        // 比如这里假设只有某个字段为true的时候才显示图表
        return row.yourField;
      }
    };
  },
  methods: {
    handleExpandChange(row) {
      this.showChart = row; // 更新函数引用，以便图表随着行的展开而显示/隐藏
    }
  }
};
</script>

<style scoped>
.chart-container {
  display: flex;
  justify-content: space-between;
}

.chart-column {
  /* 配置图表列的样式 */
}
</style>

在这个例子中，`handleExpandChange`方法会更新`showChart`函数，使得图表在对应行展开时显示。`chartOptions`应该包含你的ECharts配置项，你可以根据需要动态生成它。