echarts 多个3D柱状图

图片样式：

代码实现：

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
require("echarts/theme/sakura"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  components: {},
  data() {
    return {
      chart: null,
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.initChart();
  },

  computed: {},

  methods: {
    initChart() {
      //组织数据
      let setData = function (data, constData, showData) {
        data.filter(function (item) {
          if (item) {
            constData.push(1);
            showData.push(item);
          } else {
            constData.push(0);
            showData.push({
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: "rgba(0,0,0,0)",
                  borderWidth: 2,
                  color: "rgba(0,0,0,0)",
                },
              },
            });
          }
        });
      };
      //组织颜色
      let setColor = function (colorArr) {
        let color = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
					x: 0,
					x2: 0,
					y: 0,
					y2: 1, */
          colorStops: [
            {
              offset: 0,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[1],
            },
            {
              offset: 1,
              color: colorArr[1],
            },
          ],
        };
        return color;
      };

      var vehicle = [20, 49, 70, 232, 256];
      var controlBall = [2.6, 5.9, 9.0, 20.4, 21.7];

      var barWidth = 30;
      var constData1 = [];
      var showData1 = [];

      var constData2 = [];
      var showData2 = [];

      setData(vehicle, constData1, showData1);
      setData(controlBall, constData2, showData2);

      var colorArr1 = ["#345A8B", "#387ABD", "#51C0DB"];
      var colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];

      var color1 = setColor(colorArr1);
      var color2 = setColor(colorArr2);

      this.chart = this.$echarts.init(this.$el, "sakura");
      this.chart.setOption({
        title: {
          x: "center",
          y: 4,
          text: "AAAA",
          textStyle: {
            color: "#fff",
            fontSize: "15",
            fontFamily: "微软雅黑",
            fontWeight: "bold",
          },
        },

        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000", // 自定义文字颜色
            fontSize: 16, // 自定义文字大小
          },
        },
        grid: {
          y: 80,
          y2: 40,
          x: 40,
          x2: 50,
        },
        legend: {
          data: ["数量", "时间（天）"],
          x: "center",
          top: "10%",
          itemWidth: 20,
          itemHeight: 9,
          textStyle: {
            fontSize: 11,
            color: "#fff",
          },
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["曲靖", "玉溪", "大理", "昆明", "瑞丽"],
            boundaryGap: true, //控制x轴的数值是否顶头，默认为true留空，false则顶头
            axisLine: {
              //x轴的样式控制
              show: true, //显示与否
              lineStyle: {
                //线条样式
                // color: "#fff",
                width: 1,
                // type: "solid",
              },
            },
            axisLabel: {
              //控制x轴上的文字的样式
              show: true, //显示与否
              textStyle: { color: "#fff", fontSize: 12 }, //控制x轴字体样式
              //   formatter: "{value} °C", //轴上的数据带单位
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //控制y轴上的文字的样式
              show: true, //显示与否
              textStyle: { color: "#fff", fontSize: 9 }, //控制x轴字体样式
              // margin: 5,
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: "#22376d",
              },
            },
          },
        ],
        series: [
          {
            z: 1,
            type: "bar",
            name: "数量",
            barGap: "15%", //相邻柱子间距
            itemStyle: {
              borderRadius: [0, 0, 0, 0], //柱子四周圆角
              color: color1, //柱子左右颜色（深，浅）
            },
            label: {
              show: true,
              position: "top",
              textStyle:{
                color:"#fff"
              }
            },
            data: vehicle,
          },
          // ---------------------------------------------
          {
            z: 2,
            name: "数量",
            type: "pictorialBar",
            data: constData1, //此数据对应底部组件
            symbol: "diamond", //底部组件形状，不写默认为椭圆
            symbolOffset: ["-58%", "50%"], //与柱子的偏移角度
            symbolSize: [21, 10], //底面[宽，高]
            itemStyle: {
              normal: {
                color: color1, //底面左右颜色（深，浅）
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: "数量",
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData1, //此数据对应顶部组件
            symbol: "diamond",
            symbolOffset: ["-50%", "-47%"],
            symbolSize: [barWidth - 7, (10 * (barWidth - 7)) / barWidth],
            itemStyle: {
              normal: {
                /* borderColor: colorArr1[2],
							borderWidth: 2, */ //加上棱角分明
                color: colorArr1[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 1,
            type: "bar",
            name: "时间（天）",
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
              color: color2,
            },
            data: controlBall,
          },
          {
            z: 2,
            name: "时间（天）",
            type: "pictorialBar",
            data: constData2,
            symbol: "diamond",
            symbolOffset: ["50%", "40%"],
            symbolSize: [25, 10],
            itemStyle: {
              normal: {
                color: color2,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: "时间（天）",
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData2,
            symbol: "diamond",
            symbolOffset: ["55%", "-50%"],
            symbolSize: [barWidth - 7, (10 * (barWidth - 7)) / barWidth],
            itemStyle: {
              normal: {
                /* 	borderColor: colorArr2[2],
							borderWidth: 2, */
                color: colorArr2[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>