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

迷南。 2023-09-26 16:32 100阅读 0赞

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

![471e20d584ad4f8483e3cd8c171194d0.png][]

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

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

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

<el-table
          :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][]

[471e20d584ad4f8483e3cd8c171194d0.png]: https://img-blog.csdnimg.cn/471e20d584ad4f8483e3cd8c171194d0.png
[298c37f77df24d0394a3ff2823d929ad.png]: https://img-blog.csdnimg.cn/298c37f77df24d0394a3ff2823d929ad.png
[Documentation - Apache ECharts]: https://echarts.apache.org/zh/option.html#series-bar.type
[Examples - Apache ECharts]: https://echarts.apache.org/examples/zh/editor.html?c=area-basic