echarts横向柱状图斜切

一、效果图如下：

二、代码配置如下：
（1）父组件

<template>
  <div class="page-con">
    <div class="main-con">
      <item />
    </div>
  </div>
</template>

<script>
import item from '../bigdata/components/item.vue'
export default {
  components: {
    item
  }
}
</script>

<style lang="scss" scoped>
.page-con {
  width: 100%;
  height: 100%;
  .main-con {
    width: 32%;
    height: 33%;
  }
}
</style>

（2）子组件：

<template>
  <div class="main">
    <div class="volume" id="volume2"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawBar();
    });
    //获取数据。
    this.reloadChart();
    //自适应浏览器。
    window.addEventListener("resize", () => {
      this.reloadChart();
    });
  },
  //组件销毁。
  destroyed() {
    this.disposeChart();
  },
  methods: {
    drawBar() {
      this.myChart = this.$echarts.init(document.getElementById("volume2"));
      const dataSource = [
        { value: "8", unit: "个", name: "事件1" },
        { value: "1", unit: "个", name: "事件2" },
        { value: "2", unit: "个", name: "事件3" },
        { value: "3", unit: "个", name: "事件4" },
        { value: "8", unit: "个", name: "事件5" },
      ];
      let option = {
        backgroundColor: "#00000d",
        tooltip: {
          trigger: "axis",
        },
        grid: {
          containLabel: true,
          left: "4%",
          right: "5%",
          bottom: "2%",
          top: "30",
        },
        xAxis: {
          name: "",
          show: true,
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#61738C",
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#b3c7c9",
              fontSize: this.fontSize(0.35),
            },
          },
          axisLine: {
            show: true, //不显示x轴
            lineStyle: {
              color: "#15588b",
            },
          },
          axisTick: {
            show: false, //不显示刻度
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              margin: 10,
              color: "#b3c7c9",
              fontWeight: 400,
              fontSize: this.fontSize(0.35),
              interval: 0,
              formatter: function (value) {
                let str = "";
                let num = 4; //每行显示字数
                let valLength = value.length; //该项x轴字数
                let rowNum = Math.ceil(valLength / num); // 行数
                if (rowNum > 1) {
                  for (let i = 0; i < rowNum; i++) {
                    let temp = "";
                    let start = i * num;
                    let end = start + num;
                    temp = value.substring(start, end) + "";
                    str += temp;
                  }
                  return str;
                } else {
                  return value;
                }
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#61738C",
                type: "dashed",
              },
            },
            axisLine: {
              show: true, //不显示x轴
              lineStyle: {
                color: "#15588b",
              },
            },
            axisTick: {
              show: false, //不显示刻度
            },
            data: dataSource.map((item) => item.name),
          },
        ],
        series: [
          {
            type: "bar",
            barMinWidth: "10",
            backgroundStyle: {
              opacity: 1,
              color: "#1f4365",
            },
            yAxisIndex: 0,
            data: dataSource.map((item) => item.value),
            barWidth: 20,
            stack: "2",
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#00d5fc",
                  },
                  {
                    offset: 1,
                    color: "#1280eb",
                  },
                ]),
              },
            },
            markLine: {
              symbol: "none", //去掉箭头
              data: [
                {
                  type: "average",
                  name: "平均数",
                },
              ],
              label: {
                position: "start",
                formatter: ({ name }) => {
                  return `{a|${"平均数"}}`;
                },
                align: "center",
                rich: {
                  a: {
                    color: "#fff",
                    backgroundColor: "#00a8ff",
                    padding: [6, 8],
                    borderColor: "#7cd1e0",
                    borderWidth: 0,
                    borderRadius: 10,
                  },
                },
              },
              lineStyle: {
                color: "#00a8ff",
              },
            },
          },
          {
            type: "pictorialBar",
            data: dataSource.map((item) => item.value),
            xAxisIndex: 0,
            yAxisIndex: 0,
            zlevel: 99,
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAACXBIWXMAAAsTAAALEwEAmpwYAAANd2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTA5LTEyVDEwOjU3OjI5KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wOS0xMlQxMToxNzo0OCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wOS0xMlQxMToxNzo0OCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NTc2ZjgwOS1hZDcyLWJlNDYtOWVlMi01Yjc2ZTY5NmZiOGUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODBlNmNkYTUtZmExYi0xNTQzLWFhNzktYTI0YzUxMzU4NDEzIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ODBlNmNkYTUtZmExYi0xNTQzLWFhNzktYTI0YzUxMzU4NDEzIj4gPHBob3Rvc2hvcDpEb2N1bWVudEFuY2VzdG9ycz4gPHJkZjpCYWc+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjBlNmFkMzNhLTA4NTQtZDU0My1iNDRmLTc1NjU0YTllOTc5NjwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyZTk5NDVhNS00MDYyLWFkNDgtODIxYS1lZjBmYjk2M2NlMmE8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NDVmYTAzYmMtMjIzYS02MjQ5LWJjYTktM2Y0NzYyOTc1YzkxPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjQ5NzI2Mzc1LThlYWYtMzQ0Yy1hZWZlLWFmMzhiODgzM2RiMTwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1MDk1ZGI4Zi1jNzhhLTBkNGItYWUzYi05Njc1MmVmZjYwY2M8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6NWFmMjQ1MjgtOTgwNC0xMWViLWI5Y2MtOWRlMzRhYTk0NzgyPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYwYTNjNGQ3LTJhOTctNWY0YS05ZmUxLTQ2MWJjZDNjM2YwMDwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo3NmE4M2NiYS1jMDI2LWFlNGYtOThiZi03ODYzNjQyNjRiZWE8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6N2UzN2M3YWQtOGJmNi0xZjRhLTljM2EtZGI5ODZhMmE1Y2UxPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1ODljZDg5LTI4MTgtNzU0Yy1iYzMxLWYyOTllYmMzNTVmNzwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDphMGZmZDEzMy00MmQzLTQ1NGMtOTE0OS0wYzBlMWU4ZjZiNDk8L3JkZjpsaT4gPHJkZjpsaT5hZG9iZTpkb2NpZDpwaG90b3Nob3A6Y2ZlMDZjNmEtNTkxNC1hNDQwLWI1M2QtMTcxMzRlZjU4YmVhPC9yZGY6bGk+IDxyZGY6bGk+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRjMTRhNTY3LTNhMzEtNGU0ZS04MzVlLWRkZjYxYTc1ODEwMTwvcmRmOmxpPiA8cmRmOmxpPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmOTdiODc1My1kMTUwLWQzNGYtOGJkMy04NmE2N2JlN2MyZTM8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOjA4NzhmNzk4LWFhNWItZjY0Yy05NGYxLTE2MWEzNmFkMzhiODwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6NzkwZDBmMTAtOThiNC04MTQyLThlOWUtYTcyMDI5YjlkZWVkPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDo3RUUyNEQ2NzJDNjgxMUVEQjgzNTg0MkY5REY0ODA3MDwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6N0VFMjRENkIyQzY4MTFFREI4MzU4NDJGOURGNDgwNzA8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOjdjYjU4ZDU3LTYyZTItYmI0OC1iNzMzLTY0OWM3ZmFlNzBjYTwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6OGY5YWY5N2QtMzc2MC00YTQ0LThiMDItYjZmZDk3NzdmYzFjPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDo5MEMzRjhEQjU5MjgxMUVEQkU0N0E4NEU5RDRDQjEyODwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6YmQyNmMzMDEtMTBiMS04YjQyLWE3OTItMWFjZmIzNDFhZDlkPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDpjMGI0NWJiNi1mMmU1LWZiNDgtOTI2Mi04ZDJiYWRlZTMzYzA8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOmMzY2YwMzhhLTg3MjItY2I0ZC1hYjBlLTBiMWJhZWU1MWJhZjwvcmRmOmxpPiA8cmRmOmxpPnhtcC5kaWQ6Y2NjN2M2ZTYtM2FiOC0zYjRhLWE5OGMtMzY0YjNlZGQxM2VjPC9yZGY6bGk+IDxyZGY6bGk+eG1wLmRpZDpkMmFkYTk1ZC0xZjcwLWNkNGQtYWRjZi1mZDA1NTYwNzA3MDI8L3JkZjpsaT4gPHJkZjpsaT54bXAuZGlkOmViNjQwZTFmLTkxNDgtZWI0MS04MjNlLTE5MDUwMzhkYjdlYzwvcmRmOmxpPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOkRvY3VtZW50QW5jZXN0b3JzPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjgwZTZjZGE1LWZhMWItMTU0My1hYTc5LWEyNGM1MTM1ODQxMyIgc3RFdnQ6d2hlbj0iMjAyMy0wOS0xMlQxMDo1NzoyOSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NTc2ZjgwOS1hZDcyLWJlNDYtOWVlMi01Yjc2ZTY5NmZiOGUiIHN0RXZ0OndoZW49IjIwMjMtMDktMTJUMTE6MTc6NDgrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7E/Bf0AAACe0lEQVRIiZWUXU/UQBRAz522tCwfGyTxxZiIRoUgYqLGN3+Ef8uf5ZvBBAVUjKImvvgACWbRdvtxfehMd3YpZLaPTXrm5PTekdta4Z74tDZADKTAAFgF1oD1ai16jWGbkEf5GZ/Vr8zMawEMkAAZsAQMNZI7GLaCwIDU+hbIOnh8WouFR5fgmby0h4bBC30HJP4HzjoGFix8GRhqwrNQMMqpyfUXINfBF4ElNdzUSDaCrUs9cscY6E3ifuiyZua5fR/0mLF+ACqgcuZ9SVrzJHBCAJRzKfQEKICyD+7MFzHc0FjuhrKl1GNgBPwDcnNFkgwYNJl5Yg8Mg491H/gL5MDYXGk9f5KRKfTYgxez8ElvYaix3Au2rvQzXhJsc5fErb1NIrv2sDB4OyUXFl5gs/jWkyQL8igUjHJhCv3oWY+xo3i5tzDUSO4HW1f6BWWE9zMdvC/JDkIaDB/rAW0SBy59uD8lA01kJxSMkptCDz3rwsKby72FVY3nTvIHb0po1792d3dn3aSyjbAYDC/1wFp3UwLU2IsrYTLfA12Qx6FglMLkHdwlqSy8MUwvzorG8iDYutavKOeetUvSQDuGnXWTyhbCUjB8MiV+EgdXw/Ti7IaCgdLk+p7+JFqtRzPwWB4GW1f6zSbJ8RbHWUObpZ3tVDYRVoLhJYdMJ/F7d/C293xJKpM3+0yPYImXxDdf1kQ2g60rPaHh7DprB081lQ2EYTC85IhJkt7eDh418ywO1JI3e9Ddgr1JHFw0Cb+7pea7NPz2zHutAUyTyi2E9WB4qXvAuTW/MgmA0UyehoKBRgp9Y+FueXqTtPBIXoSj+SSV/pgxL/usAf4DUH06aIViPR0AAAAASUVORK5CYII=",
            symbolRotate: 0,
            symbolSize: [15, 20],
            symbolPosition: "end",
            symbolOffset: [8, 0],
            itemStyle: {
              color: "#1dfffc",
              shadowColor: "rgba(29,255,252, 0.8)",
              shadowBlur: 10,
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    //字体自适应。
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
    //销毁图表。
    disposeChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    //重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawBar();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .volume {
    width: 100%;
    height: 100%;
  }
}
</style>