echarts 实现3D立体柱状图示例

该示例有如下几个特点：

        ①实现tooltip自定义样式（echarts 实现tooltip提示框样式自定义-CSDN博客）

        ②数据为0时，顶部四边形不展示

        ③legend图标设置为自定义图片

【第②也是一个难点，我没有找到其他解决办法，暂时就把color写成函数进行判断，数据为0时设置颜色透明，若有其他更好的解决办法，相互交流呀~】

代码如下：

 
<script>
import Echart from "@/components/Echart/index.vue";
import * as echarts from "echarts";
export default {
  name: "aircraftDistributionChart",
  props: ["width", "height"],
  components: {
    Echart
  },
  data() {
    return {
      type: 0,
      options: {},
      xAxisData: ["机场1", "机场2"],
      legendData: [],
      seriesData: {
        "飞机1": [
          3,
          5
        ],
        "飞机2": [
          4,
          2
        ],
        "飞机3": [
          0,
          4
        ]
      },
      title: "飞机分布",
      loadingStyle: null,
      data: [],
      clientWidth: document.body.clientWidth,
      colorList: [
        {
          offset0: "#00FCFF",
          offset1: "#00A8FF",
        },
        {
          offset0: "#FFE8D6",
          offset1: "#FFA800",
        },
        {
          offset0: "#A1C1FF",
          offset1: "#654BFF",
        },
        {
          offset0: "#05FF00",
          offset1: "#EAFFD6",
        },
        {
          offset0: "#FFC7DB",
          offset1: "#FF1485",
        },
 
        {
          offset0: "#FFB8B2",
          offset1: "#FF7165",
        },
        {
          offset0: "#E8CCFF",
          offset1: "#AF82FB",
        },
        {
          offset0: "#CAF6FB",
          offset1: "#2DDBF0",
        },
        {
          offset0: "#FFF8CB",
          offset1: "#FFEA53",
        },
        {
          offset0: "#FCC2EE",
          offset1: "#F970D7",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getDetailInfo(e) {},
    async getData() {
      let that = this;
      let data = JSON.parse(JSON.stringify(this.seriesData));
      let tempData = Object.keys(data);
      this.legendData = [];
      this.seriesData = [];
      for (let i = 0; i < tempData.length; i++) {
        let temKey = tempData[i];
        let leg = {
          name: tempData[i],
          icon: "path://M 869.188 431.844 H 726.763 L 471.95 118.25 h -117.563 l 117.563 313.594 H 231.875 L 131.469 352.25 H 62 l 59.175 236.419 h 350.775 l -117.563 313.594 h 117.563 l 254.813 -313.594 h 196.031 c 16.875 0 39.2062 0 39.2062 -39.2062 c 0 -52.0875 -40.6125 -117.563 -92.8125 -117.563 Z",
        };
        let arr = [
          {
            name: temKey,
            type: "bar",
            barWidth: 16,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    //只要修改前四个参数就ok
                    offset: 0,
                    color: that.colorList[i].offset0,
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: that.colorList[i].offset1,
                  },
                ]),
                barBorderRadius: [0, 0, 0, 0],
                opacity: "1",
              },
            },
            data: data[temKey],
            barGap: "20%",
          },
          {
            name: temKey,
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value == 0) {
                    return "rgba(255,255,255,0)";
                  } else {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          //只要修改前四个参数就ok
                          offset: 0,
                          color: that.colorList[i].offset0,
                        }, //柱图渐变色
                        {
                          offset: 1,
                          color: that.colorList[i].offset1,
                        },
                      ]
                    );
                  }
                },
                borderWidth: 1,
                borderColor: "rgba(0,252,255,0.6)",
                opacity: "1",
                shadowColor: "rgb(0,0,0,0.1)",
                shadowOffsetX: "0.5",
                shadowOffsetY: "0.5",
              },
            },
            symbol: "rect",
            symbolRotate: 45,
            symbolSize: ["12", "12"],
            symbolOffset: [(tempData.length - 1) * -9.5 + i * 19, "-8"],
            symbolPosition: "end",
            data: data[temKey],
            z: 3,
          },
        ];
        this.legendData.push(leg);
        this.seriesData = this.seriesData.concat(arr);
      }
      this.creatChart();
    },
    // 根据屏幕宽度处理数据
    handleWidth(data) {
      return ((this.clientWidth / 1920) * data).toFixed(0);
    },
    creatChart() {
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          textStyle: {
            align: "left"
          },
          className: "custom-tooltip-box",
          formatter: function (params) {
            let tip = "";
            for (let i = 0; i < params.length; i++) {
              let a = "";
              a = `
                    ${params[i].seriesName}：
                    ${params[i].value} 架
                  
`;