Echarts柱形图堆叠

应用场景:一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果。所以应该将柱形图堆叠起来,这样就会好很多。

 先上效果图:

关键字:series-stack

//数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。

var option = {
series: [
          {
            name: "钢铁侠",
            type: "bar",//柱状图
            stack:"Search Engine",
            emphasis: {//折线图的高亮状态。
              focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "蜘蛛侠",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "绿巨人",
            type: "bar",
            stack: "Search Engine",//数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "黑寡妇",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "鹰眼",
            type: "bar",
            stack:"Search Engine",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: "series",
            },
            // markLine: {//图表标线
            //   lineStyle: {//标线的样式
            //     type: "dashed",//线的类型:
            //   },
            //   data: [[{ type: "min" }, { type: "max" }]],
            // },
          },
          {
            name: "雷神",
            type: "bar",
            // barWidth: 5,//柱形宽度
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: "美国队长",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 290, 230, 220],
          },
          {
            name: "蚁人",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [60, 72, 71, 74, 190, 130, 110],
          },
          {
            name: "黑豹",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [62, 82, 91, 84, 109, 110, 120],
          },
        ],

}

  • 8
    点赞
  • 69
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
echarts柱状图堆叠效果是将多个柱形图的数据堆叠在一起显示,以便更好地比较各个数据之间的差异。堆叠效果可以解决当数据量较大时,横向排列受到挤压,导致柱形图变得非常细的问题。 在echarts中实现柱状图堆叠效果的方法是通过设置series数组中的stack属性。每个series项对应一个图例,而图例的数量决定了堆叠的层数。将相同stack属性的series项放在一起,它们就会堆叠在同一组中。 具体实现时,需要将数据处理成与官网例子中的数据结构相同,即xAxis为一个数组,series为一个数组对象。每个series项需要设置name属性来对应图例,同时设置stack属性来确定堆叠的层次。 通过使用堆叠效果,可以清晰地展示多个数据在柱状图上的对比关系,提高数据可视化的效果和表达能力。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Echarts柱形图堆叠](https://blog.csdn.net/Sunshine_Jian/article/details/121137583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [echarts 柱状堆叠图(图例和x轴都是动态的)](https://blog.csdn.net/weixin_44058725/article/details/126588661)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值