横向堆叠条形图（末尾增加合计行，动态设置高度，数据动态渲染，自定义动态color）

最新推荐文章于 2025-06-30 15:02:12 发布

原创

最新推荐文章于 2025-06-30 15:02:12 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

本文详述如何使用ECharts动态渲染横向堆叠条形图，包括动态设置高度、颜色，以及在条形图末尾添加合计数字。通过代码示例展示了数据处理和图表配置的全过程。

本文主要是针对横向堆叠条形图进行讲解。包含了末尾增加合计数字，以及动态渲染数据，根据数据不同来动态展示高度，以及动态设置color等。下面先看一下效果图：
在这里插入图片描述
html部分代码：

<div style="margin:20px 0;">堆叠条形图</div>
    <div style="background: #fff;padding-bottom: 20px;" :style="{height: statusChartList.yAxis.length*60+'px'}" >
      <div id="statusChart" style="height:100%;margin:0 auto;"></div>
    </div>

通过计算的方式动态设置高度，根据返回的数据来计算：:style="{height: statusChartList.yAxis.length*60+'px'}"

本文是用假数据展示,数据格式如下：

statusChartList:{
   
   
          projectName:['后台管理系统','考勤系统','uniapp跨平台','基于vue的移动端'], // 横坐标
          yAxis:['张三','李四','王五','刘二','胡六','增加一人'], // 纵坐标
          projectNum:[
            [200,300,100,145,90,30], // 第一个项目对应的纵坐标数据
            [220,100,200,100,0,0], // 第二个项目对应的纵坐标数据
            [290,100,100,0,0,0]<