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

最新推荐文章于 2024-07-31 14:40:54 发布

sunny.day

最新推荐文章于 2024-07-31 14:40:54 发布

阅读量2.2w

点赞数 8

分类专栏：前端开发

本文链接：https://blog.csdn.net/yang__k/article/details/88414782

版权

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

摘要由CSDN通过智能技术生成

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: {