echarts堆叠柱形图+折线图

直接代码

var myBarthree = echarts.init(document.getElementById('barthree'));

var option = {
  textStyle: {
    color: '#ddd'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  // legend: {
  //   data: ['不良率', '队列', '队列2'],
  //   textStyle: {
  //     color: '#ddd'
  //   }
  // },
  // toolbox: {
  //     show: true,
  //     feature: {
  //         dataView: {readOnly: false},
  //         restore: {},
  //         saveAsImage: {}
  //     }
  // },
  dataZoom: {
    show: false,
    start: 0,
    end: 100
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      data: barThreeX,
      axisLine: {
        lineStyle: {
          color: '#6efaf4'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      scale: true,
      name: '不良率',
      min: 0,
      boundaryGap: [0.2, 0.2],
      splitLine: {
        lineStyle: {
          color: '#1f3350',
          width: 2
        }
      },
      axisLabel: {
        formatter: function (value) {
          return value.toFixed(2) + '%';
        },
        rotate: 30	
      },
      axisLine: { show: false },
      axisTick: {show:false},
    },
    {
      type: 'value',
      scale: true,
      name: '预购量',
      min: 0,
      boundaryGap: [0.2, 0.2],
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '队列',
      type: 'bar',
      yAxisIndex: 1,
      stack: 'one',
      barWidth: '20px',
      data: barThreeBarBottom,
      itemStyle: {
        normal: {
          label: {
            show: false,//是否展示
          },
          color: '#6efaf4'
        }
      },
    },
    {
      name: '队列2',
      type: 'bar',
      yAxisIndex: 1,
      stack: 'one',
      barWidth: '20px',
      data: barThreeBarTop,
      itemStyle: {
        normal: {
          label: {
            show: false,//是否展示
          },
          color: '#ed3c60'
        }
      },
    },
    {
      name: '不良率',
      type: 'line',
      data: barThreeLine,
      label: {
        show: true,
        // formatter: '{c}%'  
      },
      itemStyle: {
        normal: {
          label: {
            show: false,//是否展示
          },
          color: '#d2c86c'
        }
      },
    }
  ]
};

myBarthree.setOption(option);