Echarts。 3d柱状图

---

效果

参考了https://www.makeapie.com/explore.html

代码

代码如下（示例）：

let option = {
        title: {
          show: false,
        },
        grid: {
          left: 100,
          bottom: 100,
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: "#fff",
              fontWeight: "normal",
              fontSize: 15,
            },
            interval:0,
            margin: 30, //刻度标签与轴线之间的距离。
          },
          
          data: ["11", "22", "33", "44", "55", "66"],
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
          // 下边加阴影
            name: "",
            type: "pictorialBar",
            // symbol: path,
            symbolSize: [81, 25],
            symbolOffset: [0, 12],
            z: 1,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return colorList[params.dataIndex];
              },
              shadowColor: "rgba(115, 106, 28, .7)",
              shadowBlur: 3,
              shadowOffsetX: 0,
              shadowOffsetY: 2,
            },
            data: [1, 1, 1, 1, 1, 1],
          },
          {
          // 柱状图
            name: "2020",
            type: "bar",
            barWidth: 81,
            barGap: "-100%",
            z: 10,
            itemStyle: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
            data: data1,
          },
          {
          // 图标。这里有个缺点，就是data1的数据不能重复，否则图标会重复，没想到别的好的方法
            name: "",
            type: "pictorialBar",
            symbol: function (params) {
            // 这里的params是柱状图的值，即data1
                let idx = data1.indexOf(params)
                return 'image://' + path[idx];
              },
            symbolSize: [75, 57],
            symbolOffset: [0, -50],
            z: 15,
            symbolPosition: "end",
            data: data1,
          },
          {
          // 图标下面的黑色面，可以使用颜色
            name: "",
            type: "pictorialBar",
            symbol: function (params) {
                let idx = data1.indexOf(params)
                return 'image://' + iconPath[idx];
              },
            symbolSize: [81, 25],
            symbolOffset: [0, -12],
            z: 12,
            symbolPosition: "end",
            data: data1,
          },
        ],
      };
      myChart.setOption(option);