vue：表格中嵌入echarts实现进度条展示

       最近实现一个项目进度展示的功能，2个主要功能有：

1. 表格里展示echarts图表进度条
2. 多级表头，二级表头取不同样式

一、实现原理

1. 表格里展示echarts图表进度条：<div :id=”`main${scope.$index}`” :style=”{width: ‘705px’, height: ’70px’}”></div>   (为echarts准备一个容器dom)
2. 多级表头，二级表头取不同样式：多次表头通过el-table-column嵌套可以实现，样式可以通过:header-cell-style=”renderHeader” ，实现表头单元格的 style 的回调方法设置定制的样式。

html:

<el-table :data="projectData" :span-method="arraySpanMethod" style="width: 100%;" stripe :header-cell-style="renderHeader">
        <el-table-column prop="projectName" label="名称" width="auto" align="center"></el-table-column>
        <el-table-column label="详情" align="center">
          <el-table-column label="阶段0" align="center">
            <template slot-scope="scope">
              <div :id="`main${scope.$index}`" :style="{width: '705px', height: '70px'}"></div>    //为echarts准备容器dom
            </template>
          </el-table-column>
          <el-table-column label="阶段1" align="center"></el-table-column>
          <el-table-column label="阶段2" align="center"></el-table-column>
        </el-table-column> 
 </el-table>

js：

getChart(i) {
        let myCharts = echarts.init(document.getElementById('main' + i));   //初始化echarts实例
        myCharts.setOption(this.option)  //绘制图表, option绘制图表需要的数据
        myCharts.dispatchAction({
          type: 'showTip',
          seriesIndex: i,
          dataIndex: 0
        })
      }

// 调用，mounted 是 vue 的生命周期，表示挂载完毕，html 已经渲染
mounted () {               
      this.$nextTick(() => {
        this.getChart(0)
      })
    }

二、结果展示

最后实现的效果如下：

echarts图表还有很多配置项，可根据需要参考:https://echarts.apache.org/zh/option.html#series-bar.label.rich