elementUI表格中插入燃尽图，步骤条（假数据模拟）

最新推荐文章于 2025-09-25 00:23:03 发布

原创最新推荐文章于 2025-09-25 00:23:03 发布 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

vue+element项目同时被 2 个专栏收录

34 篇文章

订阅专栏

elementUI样式

9 篇文章

订阅专栏

本文详细介绍了如何在ElementUI的el-table中整合ECharts绘制燃尽图，并展示了如何使用v-show和v-if控制步骤条的显示，以及解决ECharts图表在循环渲染时的错误。

首先看一下效果图，再做讲解

在el-table中插入某个标签，我们通常是采用插槽的方式进行插入，但是实现图片中的功能的时候，你会发现，步骤条插入就显示出来了，但是用echarts绘制的燃尽图却出不来。打开控制台，你会发现报错了。

现在我们来分析一下，报错的原因。因为我们用echart绘制图表的时候，第一行代码首先写的是

var myChart = echarts.init(document.getElementsByClassName("main")[0])

正式因为这行代码，导致了报错；表格的数据是循环遍历出来的，这个时候标签在渲染过程，我们还没拿到document.getElementsByClassName("main")[0]这个标签，所以就报错了。

这时候我们在调用echarts生成图片的方法的时候，需要加一个定时器。

setTimeout(()=>{
  this.echarImg()
})

这个时候你会发现，图片出来了，但是只有第一列有图片。那是因为我们遍历来绘制图片。

echarImg(){
  for(var i = 0; i< this.tableData.length;i++){
    var myChart = echarts.init(document.getElementsByClassName("main")[i])
    var option = {
      ...
    }
    myChart.setOption(option)
  }

},

下面就是说说步骤条，一般在表格中只会展示部分的步骤，到详情界面才会全部展示，那么这时候怎么处理呢？

通过v-show="key+1==scope.row.milepostRow.milepostActive || key+1 == scope.row.milepostRow.milepostActive-1 || key+1==scope.row.milepostRow.milepostActive+1"来显示需要显示的步骤，v-if="key<scope.row.milepostRow.milepostActive+1"去掉elementUI中多带出来的线条，然后样式微调整即可

<el-table-column
  prop="milepostRow"
  align="center"
  label="步骤条">
  <template slot-scope="scope">
    <div :style="scope.row.milepostRow.milepostActive == 1 || scope.row.milepostRow.milepostActive == 2 ? Style: Style1">
      <el-steps :active="scope.row.milepostRow.milepostActive" >
        <el-step v-for="(value, key) in scope.row.milepostRow.milepost"
           v-if="key<scope.row.milepostRow.milepostActive+1"
           v-show="key+1==scope.row.milepostRow.milepostActive ||
                   key+1 == scope.row.milepostRow.milepostActive-1 ||
                   key+1==scope.row.milepostRow.milepostActive+1"
           :class="scope.row.milepostRow.milepostActive== key+1 ? scope.row.milepostRow.stepActive: '' "
           :title="value.title"
        >
        </el-step>
      </el-steps>
    </div>
  </template>
</el-table-column>

最后附上全部代码

<template>
  <div>
    <el-table
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        label="燃尽图">
        <template slot-scope="scope">
          <div class="main" style="width: 300px;height:80px; left:10%"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="milepostRow"
        align="center"
        label="步骤条">
        <template slot-scope="scope">
          <div :style="scope.row.milepostRow.milepostActive == 1 || scope.row.milepostRow.milepostActive == 2 ? Style: Style1">
            <el-steps :active="scope.row.milepostRow.milepostActive" >
              <el-step v-for="(value, key) in scope.row.milepostRow.milepost"
                       v-if="key<scope.row.milepostRow.milepostActive+1"
                       v-show="key+1==scope.row.milepostRow.milepostActive ||
                              key+1 == scope.row.milepostRow.milepostActive-1 ||
                              key+1==scope.row.milepostRow.milepostActive+1"
                       :class="scope.row.milepostRow.milepostActive== key+1 ?                        scope.row.milepostRow.stepActive: '' "
                       :title="value.title"
              >
              </el-step>
            </el-steps>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "one",
    data() {
      return {
        tableData: [],
        Style: 'position: relative; left:10%; padding-right:20% ',
        Style1: 'position: relative; left:10%;'
      }
    },
    mounted(){
        this.getList()
    
    },
    methods:{
        getList(){
            this.tableData = [
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                list:['迭代一', '迭代二','迭代三'],
                rwl:[6,4,0],
                stack:[5, 4.5],
                milepostRow:{
                  milepost: [
                    {title: '迭代一' },
                    {title: '迭代二'},
                    {title: '迭代三'},
                  ],
                  // 默认步骤数
                  milepostActive: 2,
                  // 动态添加类名
                  stepActive: 'stepActive'
                }

              },
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                list:['迭代一', '迭代二', '迭代三', '迭代四', '迭代五'],
                rwl:[6,4,2,0],
                stack:[5, 4.5, 2.8],
                milepostRow: {
                  milepost: [
                    {title: '迭代一' },
                    {title: '迭代二'},
                    {title: '迭代三'},
                    {title: '迭代四'},
                    {title: '迭代五'}
                  ],
                  // 默认步骤数
                  milepostActive: 3,
                  // 动态添加类名
                  stepActive: 'stepActive'
                },
              }
            ]
          setTimeout(()=>{
            this.echarImg()
          })

        },
      echarImg(){
        for(var i = 0; i< this.tableData.length;i++){
          var myChart = echarts.init(document.getElementsByClassName("main")[i])
          var option = {
            xAxis: {
              type: 'category',
              boundaryGap: false,
              splitLine: {
                show: false
              },
              data: this.tableData[i].list
            },
            yAxis: {
              splitLine: {
                show: false
              },
              type: 'value',
              splitNumber:3
          },
            series: [
              {
                name: '剩余工作量',
                type: 'line',
                // stack: '剩余工作量',
                data: this.tableData[i].stack,
                itemStyle: {
                  normal: {
                    // 折点颜色样式
                    color: 'green',
                    lineStyle: {
                      // 折线颜色样式
                      color: 'green'
                    }
                  }
                },
              },
              {
                name: '任务量',
                type: 'line',
                data: this.tableData[i].rwl,
                itemStyle: {
                  normal: {

                    // 折点颜色样式
                    color: 'orange',
                    lineStyle: {
                      // 折线颜色样式
                      color: 'orange',
                      type:'dashed'
                    }
                  }
                },
              },
            ]
          }
          myChart.setOption(option)
        }

      },
    }
  }
</script>

<style lang="scss">
  .el-step.is-horizontal.stepActive{
    .el-step__head.is-finish{
      .el-step__line{
        // 当前步骤数横线样式设置
        .el-step__line-inner{
          width: 50% !important;
          border-width: 1px !important;
        }
      }
      // 当前步骤数圆圈样式设置
      .el-step__icon.is-text{
        background: #409eff;
        color:#fff;
      }
    }
  }
  .el-table td:last-child div {
    text-align: left;

  }
</style>