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

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

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

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

一、实现原理

表格里展示echarts图表进度条：<div :id="`main${scope.$index}`" :style="{width: '705px', height: '70px'}"></div>   (为echarts准备一个容器dom)多级表头，二级表头取不同样式：多次表头通过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