echarts叠加3D立体柱状图

效果图：

实现代码：

var xData = ["项目1", "项目2", "项目3", "项目4", "项目5", "项目6"]; 
// 计划数据数组
var planData = [320, 302, 301, 334, 390, 0];
// 完成数据数组
var completeData = [320, 132, 101, 0, 90, 0];
var color = [
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#7ed1e3",
        },
        {
          offset: 1,
          color: "#7ed1e3",
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#cdbf38",
        },
        {
          offset: 1,
          color: "#cdbf38",
        },
      ],
    },
  ];
  var barWidth = 30;
  var constData = [];
  var showData = [];
  var otherData = [];
  for (var i = 0; i < planData.length; i++) {
    planData[i] = Number(planData[i]);
    completeData[i] = Number(completeData[i]);
    otherData[i] = planData[i] - completeData[i];
    if (planData[i] <= 0) {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 2,
            color: "rgba(0,0,0,0)",
          },
        },
      });
    } else {
      if (completeData[i] == planData[i]) {
        constData.push({
          value: 1,
          itemStyle: {
            normal: {
              color: color[1],
            },
          },
        });
      } else {
        constData.push(1);
      }
      if (completeData[i] > 0) {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#e9d86c",
              borderWidth: 2,
              color: "#e9d86c",
            },
          },
        });
      } else {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#89e3ec",
              borderWidth: 2,
              color: "#89e3ec",
            },
          },
        });
      }
    }
  }
  var option = {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        return params[0].axisValue + "：" +
        "<br/>计划：" + planData[params[0].dataIndex] +
        "<br/>完成：" + completeData[params[0].dataIndex];
      },
    },
    legend: {
      data: ["计划", "完成"],
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      data: xData,
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        z: 1,
        name: "计划",
        type: "bar",
        barWidth: barWidth,
        stack: "总量",
        color: color[0],
        data: otherData,
      },
      {
        z: 2,
        name: "完成",
        type: "bar",
        barWidth: barWidth,
        stack: "总量",
        color: color[1],
        data: completeData,
      },
      {
        z: 3,
        name: "项目",
        type: "pictorialBar",
        data: constData,
        symbol: "diamond",
        symbolOffset: ["0%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[0],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 4,
        name: "项目",
        type: "pictorialBar",
        data: otherData,
        symbol: "diamond",
        symbolPosition: "end",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[1],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 5,
        name: "项目",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData,
        symbol: "diamond",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        tooltip: {
          show: false,
        },
      },
    ],
  };