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

本文介绍了如何使用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);
    },

效果图:

重叠图:

堆叠图:

### 关于ECharts堆叠面积图的使用方法 #### 配置项设置 为了创建一个渐变堆叠面积图,在`series`部分需要指定类型为`'line'`并开启`areaStyle`属性来填充线条下的区域。通过调整`stack`属性可以让多个数据系列在同一坐标轴上叠加显示[^2]。 对于颜色渐变的效果,则是在`itemStyle`或者全局样式定义中的`color`数组里应用线性渐变对象,该对象由`type`, `x`, `y`, `x2`, `y2`, `colorStops`组成,其中`colorStops`是一个包含两个以上节点的对象列表,用于描述不同位置的颜色值[^1]。 当遇到布局问题比如图例标题重叠时,可以通过修改`legend`组件的位置参数解决此问题,例如将其放置到图表底部以避免冲突: ```javascript legend: { bottom: '0%' } ``` #### HTML页面集成 要在网页中展示这些图形,首先要引入ECharts库文件,这通常放在HTML文档头部区域内完成;接着在一个具有唯一ID的选择器下初始化实例,并调用`.setOption()`方法传入配置选项即可渲染出想要的结果[^4]。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>ECharts Example</title> <!-- 引入 echarts.js --> <script src="path/to/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 设置option... myChart.setOption(option); </script> </body> </html> ``` #### 动态效果演示 除了静态图片外,还可以利用动画特性增强用户体验。ECharts支持丰富的交互方式以及平滑过渡效果,使得用户能够更直观地理解数据变化趋势[^5]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值