echarts实现多3D立体柱状图

效果图：

实现代码：

// 立体多柱状图
function getSolidOption(data1, data2, data3) {
  // 月份坐标轴
  var nowMonth = new Date().getMonth() + 1;
  var lineXAxisData = [];
  for (var i = 5; i >= 0; i--) {
    var month = nowMonth - i;
    if (month < 1) {
      lineXAxisData.push(month + 12 + "月");
    } else {
      lineXAxisData.push(month + "月");
    }
  }
  var colors = [
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#27afc7",
        },
        {
          offset: 0.5,
          color: "#27afc7",
        },
        {
          offset: 0.5,
          color: "#50d9cf",
        },
        {
          offset: 1,
          color: "#50d9cf",
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#41affa",
        },
        {
          offset: 0.5,
          color: "#41affa",
        },
        {
          offset: 0.5,
          color: "#80d2fa",
        },
        {
          offset: 1,
          color: "#80d2fa",
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#a6a0fa",
        },
        {
          offset: 0.5,
          color: "#a6a0fa",
        },
        {
          offset: 0.5,
          color: "#bbbbf9",
        },
        {
          offset: 1,
          color: "#bbbbf9",
        },
      ],
    },
  ];
  var barWidth = 15;
  var constData1 = [];
  var showData1 = [];
  data1.filter(function (item) {
    if (item) {
      constData1.push(1);
      showData1.push(item);
    } else {
      constData1.push(0);
      showData1.push(
         {
            value: 1,
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 2,
                color: "rgba(0,0,0,0)",
              },
            },
         }
        );
    }
  });
  var constData2 = [];
  var showData2 = [];
  data2.filter(function (item) {
    if (item) {
      constData2.push(1);
      showData2.push(item);
    } else {
      constData2.push(0);
      showData2.push(
         {
            value: 1,
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 2,
                color: "rgba(0,0,0,0)",
              },
            },
         }
        );
    }
  });
  var constData3 = [];
  var showData3 = [];
  data3.filter(function (item) {
    if (item) {
      constData3.push(1);
      showData3.push(item);
    } else {
      constData3.push(0);
      showData3.push(
         {
            value: 1,
            itemStyle: {
              normal: {
                borderColor: "rgba(0,0,0,0)",
                borderWidth: 2,
                color: "rgba(0,0,0,0)",
              },
            },
         }
        );
    }
  });
  return {
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        var str = params[0].axisValue + "：";
        params.filter(function (item) {
          if (item.componentSubType == "bar") {
            str += "<br/>" + item.seriesName + "：" + item.value;
          }
        });
        return str;
      },
    },
    legend: {
   	  selectedMode: false,
      data: ["新增", "删除", "修改"],
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      data: lineXAxisData,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        z: 1,
        name: "新增",
        type: "bar",
        barWidth: barWidth,
        barGap: "0%",
        data: data1,
        itemStyle: {
          normal: {
            color: colors[0],
          },
        },
      },
      {
        z: 2,
        name: "新增",
        type: "pictorialBar",
        data: constData1,
        symbol: "diamond",
        symbolOffset: ["-100%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: colors[0],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: "新增",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData1,
        symbol: "diamond",
        symbolOffset: ["-135%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderColor: "#8bead4",
            borderWidth: 2,
            color: "#8bead4",
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 1,
        name: "删除",
        type: "bar",
        barWidth: barWidth,
        data: data2,
        itemStyle: {
          normal: {
            color: colors[1],
          },
        },
      },
      {
        z: 2,
        name: "删除",
        type: "pictorialBar",
        data: constData2,
        symbol: "diamond",
        symbolOffset: ["0%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: colors[1],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: "删除",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData2,
        symbol: "diamond",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderColor: "#96dfff",
            borderWidth: 2,
            color: "#96dfff",
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 1,
        type: "bar",
        name: "修改",
        barWidth: barWidth,
        data: data3,
        itemStyle: {
          normal: {
            color: colors[2],
          },
        },
      },
      {
        z: 2,
        name: "修改",
        type: "pictorialBar",
        data: constData3,
        symbol: "diamond",
        symbolOffset: ["100%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: colors[2],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 3,
        name: "修改",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData3,
        symbol: "diamond",
        symbolOffset: ["135%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderColor: "#d5d2ff",
            borderWidth: 2,
            color: "#d5d2ff",
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };
}
调用：
var changeBar = echarts.init(document.getElementById("changeBar"));
changeBar.setOption(
  getSolidOption(
    [0, 0, 260, 30, 30, 30],
    [0, 182, 191, 30, 0, 30],
    [0, 182, 191, 0, 40, 40]
  )
);

注：getSolidOption方法中柱状图的柱宽barWidth给了一个固定的值，若改变这个值时图形可能会有些变形，此时只需要调整series[1]、series[2]、series[4]、series[5]、series[7]、series[8]中symbolOffset的值即可。此案例中列举了三种柱状图，其中series数组中前3个元素为新增柱状图，中间三个为删除柱状图，最后三个为修改柱状图，由于每个柱子都由上中下三部分组成，因此series需要定义的元素较多。对于新增柱状图来说series[0]为柱子的主体部分，series[1]为柱子的底部，series[2]为柱子的顶部，以此类推。为了达到整体性的效果，每个柱状图的三部分颜色需要达到统一。

此处介绍的是多3D立体柱状图，若想要了解单个柱子的3D柱状图，请参考《echarts实现单3D立体柱状图》，文章地址：https://blog.csdn.net/Dalin0929/article/details/110188346