echart 3d柱形图

<template>
  <div class="topContent">
  	<!-- dv-border-box-7换成div即可 -->
    <dv-border-box-7 :color="['#03308B', '#012678']" background="#03308B">
      <div class="title">企业报警统计</div>
      <div class="content" id="dom3" ref="chart"></div>
    </dv-border-box-7>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option1: {
        grid: {
          height: "100",
        },
        // x轴坐标数据
        xAxis: {
          type: "category",
          data: ["5月", "6月", "7月", "8月"],
          nameTextStyle: {
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            data: [120, 200, 150, 100],
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
          },
        ],
      },
      labels: ["5月", "6月", "7月", "8月"],
      // 设置柱形图柱子颜色
      colors: [
        [
          { offset: 0, color: "rgba(26, 132, 191, 1)" },
          { offset: 1, color: "rgba(52, 163, 224, 0.08)" },
        ],
        [
          { offset: 0, color: "rgba(137, 163, 164, 1)" },
          { offset: 1, color: "rgba(137, 163, 164, 0.08)" },
        ],
        [
          { offset: 0, color: "rgba(44, 166, 166, 1)" },
          { offset: 1, color: "rgba(44, 166, 166, 0.08)" },
        ],
        [
          { offset: 0, color: "rgba(34, 66, 186, 1)" },
          { offset: 1, color: "rgba(34, 66, 186, 0.08)" },
        ],
      ],
      seriesData: [
        {
          label: "五月",
          value: [32],
        },
        {
          label: "六月",
          value: [24],
        },
        {
          label: "七月",
          value: [42],
        },
        {
          label: "八月",
          value: [20],
        },
      ],
      option: {
        xAxis: {
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#fff",
          },
          data: ["5月", "6月", "7月", "8月"],
        },
        tooltip: {
          show: true,
        },
        legend: {
          show: false,
          data: "",
          right: "25",
          top: "18",
          icon: "rect",
          itemHeight: 10,
          itemWidth: 10,
          textStyle: {
            color: "#000",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "rgba(255,255,255,.4)",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: ["#ccc"],
            },
          },
        },
        grid: {
          top: "20",
          height: "140",
        },
        series: "",
      },
      finalSeries: "",
    };
  },
  mounted() {
    this.getlegendData();
    this.getSeriesData();
    var chartDom = document.getElementById("dom3");
    var myChart = echarts.init(chartDom);
    // 定义柱状图左侧图形元素
    const leftRect = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
        width: 19, //柱状图宽
        zWidth: 8, //阴影折角宽
        zHeight: 4, //阴影折角高
      },
      buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
        const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
        const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
        const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
        const p4 = [shape.x + shape.width / 2, shape.y];

        ctx.moveTo(p0[0], p0[1]);
        ctx.lineTo(p1[0], p1[1]);
        ctx.lineTo(p2[0], p2[1]);
        ctx.lineTo(p3[0], p3[1]);
        ctx.lineTo(p4[0], p4[1]);
        ctx.lineTo(p0[0], p0[1]);
        ctx.closePath();
      },
    });
    // 定义柱状图右侧以及顶部图形元素
    const rightRect = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
        width: 18,
        zWidth: 15,
        zHeight: 8,
      },
      buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
        const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
        const p4 = [shape.x + shape.width / 2, shape.y];
        const p5 = [
          xAxisPoint[0] + shape.width / 2 + shape.zWidth,
          xAxisPoint[1],
        ];
        const p6 = [
          shape.x + shape.width / 2 + shape.zWidth,
          shape.y - shape.zHeight / 2,
        ];
        const p7 = [
          shape.x - shape.width / 2 + shape.zWidth,
          shape.y - shape.zHeight,
        ];
        ctx.moveTo(p4[0], p4[1]);
        ctx.lineTo(p3[0], p3[1]);
        ctx.lineTo(p5[0], p5[1]);
        ctx.lineTo(p6[0], p6[1]);
        ctx.lineTo(p4[0], p4[1]);

        ctx.moveTo(p4[0], p4[1]);
        ctx.lineTo(p6[0], p6[1]);
        ctx.lineTo(p7[0], p7[1]);
        ctx.lineTo(p1[0], p1[1]);
        ctx.lineTo(p4[0], p4[1]);
        ctx.closePath();
      },
    });
    // 注册图形元素
    echarts.graphic.registerShape("leftRect", leftRect);
    echarts.graphic.registerShape("rightRect", rightRect);
    this.option && myChart.setOption(this.option);
  },

  methods: {
    getlegendData() {
      const data = [];
      this.labels.forEach((item, index) => {
        data.push({
          name: item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              0,
              this.colors[index]
            ),
          },
        });
      });
      this.option.legend.data = data;
    },
    getSeriesData() {
      const data = [];
      this.seriesData.forEach((item, index) => {
        data.push({
          type: "custom",
          name: item.label,
          renderItem: (params, api) => {
            return this.getRenderItem(params, api);
          },
          data: item.value,
          itemStyle: {
            color: () => {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                this.colors[index]
              );
            },
          },
        });
      });
      this.option.series = data;
    },
    getRenderItem(params, api) {
      const index = params.seriesIndex;
      let location = api.coord([api.value(0) + index, api.value(1)]);
      var extent = api.size([0, api.value(1)]);
      return {
        type: "group",
        children: [
          {
            type: "leftRect",
            shape: {
              api,
              xValue: api.value(0) + index,
              yValue: api.value(1),
              x: location[0],
              y: location[1],
            },
            style: api.style(),
          },
          {
            type: "rightRect",
            shape: {
              api,
              xValue: api.value(0) + index,
              yValue: api.value(1),
              x: location[0],
              y: location[1],
            },
            style: api.style(),
          },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
.topContent {
  // width: 370px;
  height: 290px;
  margin: 20px 0;
  ::v-deep .dv-border-box-7 {
    padding: 0 20px;
    box-sizing: border-box;
    border: solid 3px #03308b !important;
  }
  .title {
    color: #08e8ff;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    background: linear-gradient(
      to right,
      rgba(1, 39, 121, 0.5),
      #012e82,
      rgba(1, 39, 121, 0.5)
    );
  }
  .content {
    width: 100%;
    height: 200px;
    padding: 10px;
    margin-top: 9px;
    color: #ffffff;
    box-sizing: border-box;
    background: #013785;
    box-shadow: 0 0 10px 3px #0465a3 inset;
  }
}
</style>

效果如下: