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

最新推荐文章于 2024-06-07 12:13:21 发布

18你磊哥

最新推荐文章于 2024-06-07 12:13:21 发布

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript echarts 燃尽图 el-table

本文链接：https://blog.csdn.net/qq_40453972/article/details/127861548

vue 专栏收录该内容

5 篇文章

订阅专栏

本文档详细介绍了如何使用Vue.js来模仿禅道上的燃尽图，重点在于解决数据不唯一和ECharts图表绘制的问题。首先通过el-table渲染表格，然后利用Promise确保异步操作的顺序，动态生成ECharts图表容器并绑定数据，最后通过myChart.setOption()绘制折线图，并实现窗口自适应。关键点包括DOM渲染、数据绑定和ECharts初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

实现步骤：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">
            <!--为echarts准备一个具备大小的容器dom-->
          <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