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

最新推荐文章于 2025-05-21 11:08:31 发布

j--j

最新推荐文章于 2025-05-21 11:08:31 发布

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/angl129/article/details/107111138

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在vue的表格中嵌入echarts图表以实现进度条展示，同时详细讲述了如何处理多级表头并定制不同样式的二级表头。通过提供html和js代码示例，展示了具体实现过程，并给出了最终效果。

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

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)
      })
    }