echarts 堆叠图和重叠图及图例的位置

最新推荐文章于 2025-06-27 18:57:53 发布

sunny.day

最新推荐文章于 2025-06-27 18:57:53 发布

阅读量2.2w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/yang__k/article/details/88414782

前端开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用Echarts创建堆叠图和重叠图，通过在series中设置stack属性实现堆叠效果，设置barGap为'-100%'实现重叠，并提供了调整图例位置的代码示例，附带了实际效果图。

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

1.在series: [ ],里面设置 stack:"1", 如果两组的 stack一樣就會堆疊 ;

2.在series: [ ],里面设置 barGap: '-100%',即为重叠;

3.图例位置:

            legend: {
              // data:this.b,
              data:["總人數","應到人數"],
              orient: "horizontal", //垂直显示
              // y: "top", //延Y轴居中
              // x: "right" //居右显示
              right:100,   //右邊距
              top:5        // 上邊距

代码:

     // 繪圖條形
    setGroupNumber: function () {
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('groupChart'));
          // 指定图表的配置项和数据
          var option = {
            // color: ['#3398DB'],
            title: {
              // text: "放到我方認爲",
            },
            tooltip: {},
            // 全局背景色
            // backgroundColor: "#ff0",
            itemStyle: {
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
            legend: {
              // data:this.b,
              data:["總人數","應到人數"],
              orient: "horizontal", //垂直显示
              // y: "top", //延Y轴居中
              // x: "right" //居右显示
              right:100,   //右邊距
              top:5        // 上邊距
            },
            // x軸的顏色 
            xAxis: {
              axisLine: {
                lineStyle: {
                  color: '#00a2ff'
                }
              },
             // x軸的字體 
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#323232",
                  fontSize: 12
                },
              },
              // data: this.a
              data: ["aa", "bb", "cc", "dd", "ss","ff","gg"]
            },
            yAxis: {
              // y軸的顏色
              axisLine: {
                lineStyle: {
                  color: '#00a2ff'
                }
              },
              // y軸的分割線顏色
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(0,162,255,0.2)",
                  width: 1,
                }
              }
            },
            series: [
              {
                label: {
                  normal: {
                      show: true,
                      // formatter:"{c}%",
                      position:"top",
                      textStyle: {
                        color: 'black'
                      }
                  }
              },
                name: "總人數",
                barWidth: '35%',
                type: "bar",
                // stack:"1",    // 如果stack一樣就會堆疊
                // 重疊
                barGap: '-100%',
                //   data: this.b
                data: [50, 90,200,30,100,54,79]
              },
              {
              //   label: {
              //     normal: {
              //         show: true,
              //         position:"top",
              //         textStyle: {
              //           color: 'black',
              //         }
              //     }
              // },
                name: "應到人數",
                barWidth: '35%',
                type: "bar",
                // stack:"1",    // 如果stack一樣就會堆疊
                // barGap: '-100%',
                //   data: this.b
                data: [45, 50,100,25,100,50,79]
              }
            ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
    },

效果图:

重叠图:

堆叠图: