echarts绘制斜切柱状图

！！！echarts版本要在4.4.0之上 注：一种比较简单取巧的方式：使用图片代替立体柱状图 可以直接把ui给的柱状图的立体柱体图片下载下来 转换成base64文件 使用symbol去设置柱体 具体可参考echarts使用图片代替立体柱状图 - 掘金 (juejin.cn)

<template>
  <div class="highrisk-types" :style="styleObj">
    <div class="common-title" v-show="height">
      <slot name="title"></slot>
      <!-- <el-button @click="checkDetailLists">查看详细列表</el-button> -->
    </div>
    <div class="content enforce-content">
      <div ref="ConsumptionChart" style="height: 100%; width: 100%"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { echartfontSize } from "@/utils";
const myShape = {
  x: 0,
  y: 0,
  width: 13, //间距
};
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
  shape: myShape,
  buildPath: function (ctx, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - 17, shape.y - 10];
    const c2 = [xAxisPoint[0] - 17, xAxisPoint[1]];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
// 注册三个面图形
echarts.graphic.registerShape("InclinedRoofBar", InclinedRoofBar);

export default {
  name: "theWorkType",
  components: {},
  props: {
    height: {
      type: Number,
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  computed: {
    // 内容高度
    contentHeight() {
      return this.height - 43;
    },
    styleObj() {
      return {
        height: this.height + "px",
        top: this.height + 10 + "px",
      };
    },
    // 地区信息
    areaInfo() {
      return this.$store.state.app.areaInfo;
    },
  },
  watch: {},
  mounted() {
    this.getOption();
  },
  methods: {
    getOption() {
      this.$http
        .get(`/enforce/lawenforcementcensus/caseWorkTypeCensus?type=0&topNum=8`)
        .then((res) => {
          if (res.success) {
            this.chartDatas = res.data;
            this.initEchart(res.data);
          }
        })
        .catch((err) => console.log(err));
    },
    initEchart(seriesData) {
      this.myChart = echarts.init(this.$refs.ConsumptionChart);
      const option = {
        color: ["#b27e44"],
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          confine: true,
          textStyle: {
            fontSize: 14,
          },
        },
        legend: {
          top: 5,
          itemWidth: 16,
          itemHeight: 8,
          left: "center",
          padding: 0,
          textStyle: {
            color: "#fff",
            fontSize: 14,
            padding: [2, 0, 0, 0],
          },
          data: ["作业数量"],
        },
        grid: {
          top: 40,
          bottom: 10,
          left: 20,
          right: 20,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 30,
            textStyle: {
              color: "#fff",
              fontSize: echartfontSize(0.12),
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          zlevel: 10,
        },
        yAxis: {
          type: "value",
          name: "",
          min: 0,
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: echartfontSize(0.12),
            },
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 16,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#9D9D9D",
              width: 1,
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: "custom",
            name: "作业数量",
            itemStyle: {
              borderColor: "#b27e44",
              borderWidth: 1,
              color: "#b27e44",
              normal: {
                borderWidth: 1,
              },
            },
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              const xlocation = api.coord([api.value(0), 0]);
              return {
                type: "InclinedRoofBar",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0] + 10,
                  y: location[1],
                  xAxisPoint: [xlocation[0] + 10, xlocation[1]],
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#FFA042",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0,0)",
                    },
                  ]),
                  stroke: "#b27e44",
                },
              };
            },
            data: [],
          },
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                fontSize: 14,
                offset: [15, 0],
              },
            },
            showBackground: false,
            barWidth: 14,
            itemStyle: {
              color: "transparent",
            },
            tooltip: {
              show: false,
            },
            data: [],
          },
        ],
      };
      const { xAxis, series } = option;
      // 处理数据
      xAxis.data = seriesData.map((item) => item.workmode);
      series[0].data = seriesData.map((item) => item.censusCount);
      this.myChart.setOption(option);
      window.addEventListener("resize", function () {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$url: "~images/module/regulatoryIndex";
.highrisk-types {
  width: 540px;
  overflow: hidden;
  transition: height 0.4s;

  .content {
    padding: 15px 15px 5px;
  }

  /deep/ .el-button span {
    line-height: 0px;
  }
}
</style>