echarts 3套柱状图重叠显示

echarts yekong

wanjunshijiecom 2021-08-22 at 15.15.22@2x

let option = {
        legend: {
          top: 0,
          right: 20,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: '#fff',
          },
          data: ['订单总数', '异常订单', '未支付订单']
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },

        tooltip: {
          show: 'true',
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            }
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: 'rgba(130, 153, 191, 1)',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(39, 76, 129, 0.26)',
            }
          },
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: 'rgba(130, 153, 191, 1)',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(39, 76, 129, 0.26)',
            }
          },
          splitLine: {
            show: false
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
        },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
          },
        ],
        series: [{
          name: '订单总数',
          type: 'bar',
          xAxisIndex: 1,
          itemStyle: {
            normal: {
              show: true,
              color: 'rgba(22, 54, 129, 1)',
              barBorderRadius: 0,
              borderWidth: 0,
              borderColor: '#333',
            }
          },
          barWidth: '20%',
          data: [33, 33, 33, 33, 33, 33, 33, 33, 33,]
        }, {
          name: '异常订单',
          type: 'bar',
          itemStyle: {
            normal: {
              show: true,
              color: 'rgba(255, 64, 73, 1)',
              barBorderRadius: 0,
              borderWidth: 0,
              borderColor: '#333',
            }
          },
          label: {
            normal: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          },
          barWidth: '20%',
          data: [12, 11, 10, 1, 15, 10, 8, 15, 10,]
        },
          {
            name: '未支付订单',
            xAxisIndex: 2,
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: 'rgba(91, 40, 255, 1)',
                barBorderRadius: 0,
                borderWidth: 0,
                borderColor: '#333',
              }
            },
            label: {
              normal: {
                show: false,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              }
            },
            barWidth: '20%',
            data: [10, 10, 16, 15, 10, 16, 15, 10, 16,]
          },
        ]
      }
喜欢