echart折线+柱状 +双轴

option = {
  color: ['#d4e1ffa3', 'green', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: 'Gradient Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {},

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
     
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      type: 'category',
      boundaryGap: false, show:false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: 350
    },
    {
      type: 'value',
      max: 100,
      min: 0
    }
  ],
  series: [
    {
      name: '实验次数',
      type: 'bar',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      },
      z: 1, // 设置层叠顺序，数值越大，显示在越上层
      yAxisIndex: 0, // 使用第一个 y 轴
      xAxisIndex: 0, // 使用第一个 y 轴
      barWidth:60,
      data: [100, 79, 45, 50, 100, 100, 70]
},
    {
      name: '合格率',
      type: 'bar',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'red'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      },
      yAxisIndex: 0, // 使用第一个 y 轴
      xAxisIndex: 0, // 使用第一个 y 轴
      z: 2, // 设置层叠顺序，数值越大，显示在越上层
      data: [90, 40, 30, 40, 90, 80, 50],
      barWidth:40,
      barGap: '-83%', // 设置负值，使第一个系列的柱状图重叠显示在第二个系列上
      barCategoryGap: '50%', // 控制两个系列之间的间隔
    },
    {
      name: '合格率',
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'red'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      },
      yAxisIndex: 1,
       xAxisIndex: 1, // 使用第一个 y 轴
      z: 1, // 设置层叠顺序，数值越大，显示在越上层
      data: [90, 80, 70, 60, 90, 80, 50]
    },
  ]
};