表格中嵌入echarts折线图

1. 封装echarts折线图，折线图高度固定，宽度设置100%，通过window.addEventListener('resize', this.changeLinechart）监听宽度变化，改变折线图宽度

   注意：每个折线图都要设置不同的id，不然只会生效第一个

<template>
  <div :id="'chart' + id" class="linechart"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  props: {
    id: {
      type: Number,
      default: null
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    window.addEventListener('resize', this.changeLinechart);
    this.initChart();
  },
  data () {
    return {
      chart: null,
      // 横坐标
      list: []
    };
  },
  methods: {
    initChart () {
      this.chart = echarts.init(document.getElementById(`chart${this.id}`));
      this.chart.setOption({
        title: {
          text: this.title
        },
        xAxis: {
          type: 'category',
          data: this.list,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.dataList,
            type: 'line'
          }
        ]
      });
      this.chart.resize();
    },
    // 更新折线图宽度
    changeLinechart () {
      this.chart.resize();
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.changeLinechart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>
<style lang="less" scoped>
.linechart {
  width: 100%;
  height: 300px;
}
</style>

2. 表格

table：

<Table
  border
  stripe
  :columns="headerList"
  :data="list"
  :loading="loading"
 >
    <template slot-scope="{ row }" slot="linechart">
      <line-chart :id="row._index" :dataList="dataList" />
    </template>
 </Table>

表头：

{
   title: '折线图',
   minWidth: 200,
   align: 'center',
   slot: 'linechart'
}