echarts3D立体柱状图和渐变柱状图

直接上代码
 

 const color = {
        "计划": "rgba(30, 169, 237, 1)",
        "累计": "#cb7f20"
      };
      const showColor = {
        "计划": "rgba(5, 75, 170, 0)",
        "累计": "rgba(203, 128, 32, 0)"
      };
      const banColor = {
        "计划": "rgba(5, 75, 170, 1)",
        "累计": "rgba(206, 100, 32, 1)"
      };
const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "8%",
          top: "18%",
          right: "8%",
          bottom: "12%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          triggerEvent: true,
          axisLine: {
            show: false
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "14",
            interval: 0
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: "#0C4F81",
              type: "solid"
            }
          },
          data: ["计划", "累计"]
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#4F88BD",
            padding: [0, 25, -5, 0],
            fontSize: 12,
            fontFamily: "Microsoft YaHei"
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }

        },
        series: [
          {
            name: "城燃卸车量",
            type: "bar",
            data: ["", Math.floor((data["累计城燃卸车量"] / data["计划城燃卸车量"]) * 100)],
            label: {
              show: true,
              color: "#fff",
              position: "top",
              align: "left",
              formatter: "{c}%",
              valueAnimation: true
            }
          },
          {
            z: 2,
            name: "超期",
            type: "pictorialBar",
            symbolPosition: "end",
            data: [100, Math.floor((data["累计城燃卸车量"] / data["计划城燃卸车量"]) * 100)],
            symbol: "diamond",
            symbolOffset: ["0%", "-42%"], // 盖子的位置
            symbolSize: [19, 15], // 盖子的大小
            itemStyle: {
              color: (params) => {
                const topColor = {
                  type: "linear",
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: color[params.name] },
                    { offset: 1, color: banColor[params.name] }
                  ]
                }; // 上方菱形颜色设置
                return topColor;
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 1,
            type: "bar",
            name: "超期",
            barWidth: 18,
            barGap: "50%",
            data: [100, Math.floor((data["累计城燃卸车量"] / data["计划城燃卸车量"]) * 100)],
            itemStyle: {
              color: (params) => new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: showColor[params.name] },
                { offset: 0.8, color: color[params.name] }
              ])
            }
          }
        ]
      };

效果图如下

3D立体柱状图只要在颜色的部分将渐变改为以下样式

color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
            offset: 0,
            color: colorArr[0],
            },
            {
            offset: 0.5,
            color: colorArr[0],
            },
            {
            offset: 0.5,
            color: colorArr[1],
            },
            {
            offset: 1,
            color: colorArr[1],
            },
        ],
    };

效果图如下不同柱子不同颜色可以自己配置

值得注意的是3D效果跟渐变效果好像无法同时存在，至少我在开发过程中还没突破如何让3D效果跟阴影同时存在，因为渐变用的是函数new echarts.graphic.LinearGradient而3D效果需要将color变量赋值为上面这个，我将二者融合使用发现直接不生效了，不清楚为什么，有没有大神在评论区给解答一下，谢谢大佬。