el-table中显示echarts的趋势折线图(燃尽图)

显示效果：右边的趋势图其实是查询当前行的30天数据量

 背景：为了模仿禅道上的燃尽图，但是查看其源码，发现是用php写的，我们想用vue实现

 实现步骤：1.先使用el-table画出表格来 

注意：此时数据是放在list中的，但是趋势图中的id又不能唯一，又需要根据id获取该dev改成echarts的折线图，所以使用d="'main_'+scope.row.rank"来替换。后面的style可以控制该趋势图的大小

      :data="list"
      :height='570'
      @selection-change="setSelectRows"
    >
      <el-table-column prop="rank" label="排名" :style="{margin,left: '50px'}" show-overflow-tooltip >el-table-column>
      <el-table-column prop="name" label="名称" show-overflow-tooltip >el-table-column>
      <el-table-column prop="city" label="所属市" show-overflow-tooltip >el-table-column>
      <el-table-column prop="province" label="所属省" show-overflow-tooltip >el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip >el-table-column>
      <el-table-column label="趋势图" show-overflow-tooltip>
        <template #default="scope">
            
          <div :id="'main_'+scope.row.rank" style="width:70%;height:30px;margin: 0 auto;">div>
        template>
      el-table-column>

2.趋势图中的数据赋值：后台获取数

注意：1 此处的精华在于initEcharts方法中的 Promise.then():Promise .then的用意就是使异步代码的执行过程可以按照指定的顺序从上到下依次执行，打破了异步代码的局限性。trendQuery方法是个异步方法，没有initEcharts方法，直接调用initData的同步方法，则会出现div还没渲染就要调用id，则会出现调用不到的报错：Uncaught Error: Initialize failed: invalid dom-------这是由于echarts在初始化化时是需要获取dom 2. 通过"main_" + state.list[i].rank) 来和上述html中的id对应获取对应行的字段

import * as echarts from 'echarts'
 
 
 
const fetchData = async () => {
      state.listLoading = true
      const {
        retCode, success, data, msg
      } = await trendQuery(state.queryForm)
      if (retCode == 0) {
        state.list = data.records;
 
        initEcharts();
      } else {
        proxy.$baseMessage(msg, 'error', 'vab-hey-message-error');
      }
    }
 
// 方法
const initEcharts = () => {
      // 新建一个promise对象
      let newPromise = new Promise((resolve) => {
        resolve()
      })
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        //	此dom为echarts图标展示dom
        // echarts.init(DOm)
        initData();
      })
    }
 
const initData = () => {
      console.log(" initData 执行中 ")
      for (let i = 0; i < state.list.length; i++) {
        let myChart = echarts.init(document.getElementById("main_" + state.list[i].rank));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            show: false, //取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show:false
            },
            data: []
          },
          grid: {
            left: "0",
            top: "0",
            right: "0",
            bottom: "0",
            containLabel: true,
          },
          yAxis: {
            axisLabel: { // 取消显示坐标值
              show: false
            },
            splitLine: { //取消网格线
              show:false
            },
            type: 'value'
          },
          series: [
            {
              symbol: "none",
              smooth: true,//平滑
              type: "line",
              data: state.list[i].trend,
              areaStyle: {}
            }
          ]
        });
        window.onresize = function () { // 自适应大小
          myChart.resize();
        };
      }
    }

 3.绘制图像

使用的是 myChart.setOption({ ......}) ，有兴趣的可以在echarts官网的案例中查看Documentation - Apache ECharts和练习

Examples - Apache ECharts