vue结合echartx轴双类目显示且多系列层叠

vue结合echartx轴双类目显示且多系列层叠

最近因公司要求要实现一个大屏看板数据走势图，以前都是直接引用echars现成事例自己改动，但是这次的需求要实现柱形图的多系列层叠并且x轴是双类目的，这个是事例中没有的，自己改了很久，终于完成了，现在源码奉上，希望对大家有帮助！

vue部分

html:
<div id="Warehouse_separation_time"></div>
css:
#Warehouse_separation_time{
   width: 100%;
  height: 500px;
}

js部分

Warehouse_separation_time() {
      var itemStyle = {
        normal: {},
        emphasis: {
          barBorderWidth: 1,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
        }
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('Warehouse_separation_time'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '30px',
          data: ['a', 'b', 'c', 'd', 'e'],
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: [{
            type: 'category',
            data: ['0:00分', '0:10分', '0:20分', '0:30分', '0:40分'],
            axisLabel: {
              textStyle: {
                color: '#7edae8', //坐标的字体颜色
              },
            },
            axisPointer: {
              type: 'shadow'
            },
            position: 'bottom',
            offset: 20,
            axisTick: {
              show: true,
              length: 40,
              lineStyle: {
                type: 'dotted'
              }
            }
          },
          {
            type: 'category',
            data: ['a', 'b',
              'a', 'b',
              'a', 'b',
              'a', 'b',
              'a', 'b'
            ],
            axisLabel: {
              textStyle: {
                color: '#7edae8', //坐标的字体颜色
              },
            },
            position: 'bottom',
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: true
            }
          }
        ],
        yAxis: [{
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7edae8'
            }
          }
        }],
        series: [{
            name: 'a',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: '总量',
            stack: 'one',
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'a',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: '总量',
            stack: 'two',
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'b',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: '总量',
            stack: 'one',
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'b',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: '总量',
            stack: 'two',
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'c',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: 'one',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'c',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: 'two',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'd',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: 'one',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'd',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: 'two',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'e',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: 'one',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'e',
            type: 'bar',
            itemStyle: itemStyle,
            label: {
              normal: {
                show: true
              }
            },
            stack: 'two',
            data: [330, 282, 91, 204, 200,210, 310]
          },
        ],
        dataZoom: [{
          type: 'slider',
          show: true
        }]
      });
    }

提示

定义的方法如要在加载时触发需要写在vue的mounted或者updated的钩子函数中，写在created中是无法找到你定义的id的
会报错

实现的样子