echarts堆叠柱形图折线图组合

实现堆叠柱形图折线图组合效果，统计已完成/总数/百分比统计项，柱形图实现渐变效果，折线图自定义icon，鼠标悬浮显示全部统计项

效果图

代码

// x轴name
let nameData = ['test1', 'test2', 'test3', 'test4', 'test5'];
//已完成
let finishData = [10, 26, 38, 15, 42];
//总数
let sumData = [20, 58, 67, 42, 79];

//计算差值和百分比
let differencedata = [];
let scheduleData = [];
finishData.forEach((item, i) => {
  differencedata.push(sumData[i] - finishData[i]);
  scheduleData.push(((finishData[i] / sumData[i]) * 100).toFixed(1));
});

option = {
  backgroundColor: 'rgba(8,36,68,1)',
  legend: {
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 30,
    top: '3%',
    textStyle: {
      color: '#6196D2',
      fontSize: '14px'
    }
  },
  grid: {
    top: '13%'
  },
  tooltip: {
    trigger: 'axis',
    borderWidth: 0,
    backgroundColor: 'rgba(8,36,68,.7)',
    textStyle: {
      color: '#fff'
    },
    formatter: function (params) {
      let str = params[0].name + '</br>';
      for (let i = 0; i < params.length; i++) {
        str += `
          <div style='display:flex;justify-content:space-between;align-items:center'>
            <div style='margin-right:20px;'>
              <span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${
                i === 0 ? 'rgba(9,95,211,1)' : params[i].color
              }"></span>
              &nbsp;${params[i].seriesName}
            </div>
            <span>&nbsp;${
              i === 1
                ? params[0].data + params[1].data + '个'
                : i === 2
                ? params[i].data + '%'
                : params[i].data + '个'
            }</span>
          </div>`;
      }
      return str;
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#6196D2',
      margin: 10,
      fontSize: '14px'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#6196D2'
      }
    },
    axisTick: {
      show: false
    },
    data: nameData
  },
  yAxis: [
    {
      type: 'value',
      scale: true,
      name: '(个)',
      nameTextStyle: {
        color: '#6196D2',
        fontSize: '14px',
        padding: [0, 40, 0, 0]
      },
      max: Math.max(...sumData),
      min: 0,
      boundaryGap: [0.2, 0.2],
      axisLabel: {
        color: '#6196D2',
        margin: 10,
        fontSize: '14px'
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#133255'
        }
      }
    },
    {
      type: 'value',
      scale: true,
      name: '(%)',
      nameTextStyle: {
        color: '#6196D2',
        fontSize: '14px',
        padding: [0, -40, 0, 0]
      },
      max: 100,
      min: 0,
      boundaryGap: [0.2, 0.2],
      axisLabel: {
        color: '#6196D2',
        margin: 10,
        fontSize: '14px'
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '已完成',
      type: 'bar',
      barWidth: 13,
      stack: 'Search Engine',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
          { offset: 0, color: '#689BFD' }, //柱图渐变色
          { offset: 1, color: ' #095FD3' } //柱图渐变色
        ])
      },
      yAxisIndex: 0,
      data: finishData
    },
    {
      name: '总数',
      type: 'bar',
      stack: 'Search Engine',
      barWidth: 13,
      color: 'rgba(9,95,211,0.3)',
      yAxisIndex: 0,
      data: differencedata
    },
    {
      name: '百分比',
      type: 'line',
      symbolSize: 13,
      symbol:
        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAAXNSR0IArs4c6QAAASdJREFUKFN9kb1OAmEQRc/IIhvZDy0kGi0wVsYKHgMrY+MP8R20MTYGO+MTaPQliI22RhMLGwjGaKSwtKByd8HA7o7uAkYLneoWZ2bu3BFG1e0WCKMDVMuI9EBvUT3GmIcRIon40EX6/jVWqkIUtQgneljdJcLoDGELx6nHmNDpzBPqPSY7973lp3C9JsJ23CC4/imSquHYV7R1FaWKMAXsMi01PK/4tXsfx9kQ3t0XxtNlbLtFW1+BQjJYqZOXEqpZXO+NnDH/wQ3yUvwNu/4JY6kLsvbl0Mbh0MZOYsP3SwTRHpNmU/C8WZQGxpn548BHhHUcpzmITnUBz7/DzlTo958Jwx6WtUwQnMP4GiaTZD2A44ojDLSK6ErylEhvIH1ELvM0Qj4BIBV9C56O7e4AAAAASUVORK5CYII=',
      color: '#00ECFF',
      yAxisIndex: 1,
      data: scheduleData
    }
  ]
};