echart制作堆叠图

效果图：

上代码（vue示例）：

<template>
  <div class="chart-pie-com-con" ref="chart"></div>
</template>

<script>
import barIcon1 from "@/assets/imgs/bar-3d-blue.png";
import barIcon2 from "@/assets/imgs/bar-3d-yellow.png";

export default {
  name: "chart-ryld",
  props: {
    chartData: {
      xAxisData: [],
      yAxisData1: [],
      yAxisData2: [],
    },
  },
  data() {
    return {
      yAxisData1_2: [],//离职2倍数组
      yAxisData2_2: [],//入职2倍数组
    };
  },
  methods: {
    initEchartsPie(chartData) {
      if (!chartData) return;
      this.yAxisData2_2 = this.chartData.yAxisData2 && this.chartData.yAxisData2.map(item => item*2)
      this.yAxisData1_2 = this.chartData.yAxisData1 && this.chartData.yAxisData1.map(item => item*2)

      let echart = this.echarts.init(this.$refs.chart);
      let option = {
        color: ["#018eff", "#f9d334"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999999",
            },
          },
        },
        grid: {
          left: "10px",
          right: "10px",
          top: "30px",
          bottom: "30px",
          containLabel: true,
        },
        legend: {
          bottom: "0px",
          textStyle: {
            color: "#bbbbbb",
          },
          selectedMode: false,//控制是否可以通过点击图例改变系列的显示状态
          data: ["入职", "离职", "员工增长率", "离职率"],
        },
        xAxis: [
          {
            type: "category",
            data: this.chartData.xAxisData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "#bbbbbb",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "人数",
            min: 0,
            // max: 50,
            interval: 10,
            nameTextStyle: {
              color: "#bbbbbb",
              align: "right",
            },
            axisLabel: {
              color: "#bbbbbb",
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "百分率",
            min: 0,
            max: 100,
            interval: 10,
            nameTextStyle: {
              color: "#bbbbbb",
              align: "left",
            },
            axisLabel: {
              color: "#bbbbbb",
              formatter: "{value}",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "入职",
            type: "pictorialBar",
            barGap: "1%",
            symbol: "image://" + barIcon1,
            symbolSize: [25, "100%"],
            data: this.chartData.yAxisData2,
          },
          {
            name: "离职",
            type: "pictorialBar",
            barGap: "1%",
            symbol: "image://" + barIcon2,
            symbolSize: [25, "100%"],
            data: this.chartData.yAxisData1,
          },
          {
            name: "员工增长率",
            type: "line",
            symbol: "none",
            color: "#4ec973",
            xAxisIndex: 1,//非常重要。。。
            yAxisIndex: 1,
            data: this.chartData.yAxisData2_2,
          },
          {
            name: "离职率",
            type: "line",
            symbol: "none",
            color: "#8A2BE2",
            xAxisIndex: 1,//非常重要。。。
            yAxisIndex: 1,
            data: this.chartData.yAxisData1_2,
          },
        ],
      };
      //制作一个隐藏的X轴
      option.xAxis[1] = {
        type: "value",
        max: option.xAxis[0].data.length * 100,
        show: false,
      };
      //重新赋值横坐标
      option.series[2].data = this.yAxisData2_2 && this.yAxisData2_2.map((x, i) => [
        30 + i * 100,
        x,
      ]);
      //重新赋值横坐标
      option.series[3].data = this.yAxisData1_2 && this.yAxisData1_2.map((x, i) => [
        70 + i * 100,
        x,
      ]);
      echart.setOption(option);
    },
  },
  watch: {
    chartData(val) {
      this.initEchartsPie(val);
    },
  },
  mounted() {
    this.initEchartsPie(this.chartData);
  },
};
</script>

<style scoped>
.chart-pie-com-con {
  width: 100%;
  height: 230px;
}
</style>

造数据：

例如：chartData={
xAxisData: [‘2020’, ‘2019’, ‘2018’, ‘2017’, ‘2016’, ‘2015’, ‘2014’, ‘2013’, ‘2012’],
yAxisData1: [30, 38, 28, 46, 30, 15, 24, 34, 24],
yAxisData2: [19, 31, 15, 30, 25, 10, 27, 30, 25]
}