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="bar">
    <div ref="volumn" class="volume" />
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    // 获取数据。
    this.$nextTick(() => {
      if (this.$refs.volumn) {
        this.reloadChart();
        // 自适应浏览器。
        window.addEventListener("resize", () => {
          this.reloadChart();
        });
      }
    });
  },
  // 组件销毁。
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    drawChart() {
      this.myChart = echarts.init(this.$refs.volumn);
      let category = [
        {
          name: "北京",
          value: 3000,
        },
        {
          name: "上海",
          value: 3000,
        },
        {
          name: "陕西",
          value: 8000,
        },
        {
          name: "甘肃",
          value: 9000,
        },
        {
          name: "河南",
          value: 10000,
        },
      ];
      let yName = []; // y轴名称
      let bgData = []; // 最大值用作背景显示的数据
      let maxValue = category[category.length - 1].value; //最大值
      category.forEach((element) => {
        yName.push(element.name);
        bgData.push({
          name: element.name,
          value: maxValue,
          type: element.type,
        });
      });
      let option = {
        backgroundColor: "#000000",
        xAxis: {
          max: maxValue,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 80,
          top: 20,
          right: 80,
          bottom: 20,
        },
        yAxis: [
          {
            // 每条图形上面的文字
            inverse: false,
            data: yName,
            axisLabel: {
              padding: [0, 0, 45, 0],
              inside: true,
              textStyle: {
                fontSize: 20,
                fontWeight: 400,
                color: "#B1C3DD",
                align: "left",
              },
              formatter: "{value}",
              rich: {
                a: {
                  color: "transparent",
                  lineHeight: 20,
                  fontSize: 14,
                  shadowColor: "rgba(0, 0, 0, 1)",
                  shadowBlur: 10,
                },
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            // y轴最左侧的文字
            axisTick: "none",
            axisLine: "none",
            position: "left",
            axisLabel: {
              padding: [0, 20, 0, 26], // 调整文字位置
              textStyle: {
                color: "rgba(255,255,255,.8)",
                fontSize: "20",
              },
            },
            data: [5, 4, 3, 2, 1],
          },
          {
            // y轴最右侧的文字
            axisTick: "none",
            axisLine: "none",
            type: "category",
            axisLabel: {
              margin: 10,
              textStyle: {
                color: "#6DE8FA",
                fontSize: "14",
              },
            },
            data: category,
          },
        ],
        series: [
          {
            // 背景样式
            name: "背景",
            type: "pictorialBar",
            barWidth: 10,
            // barHeight: 10,
            stack: "总量",
            barGap: "-100%",
            symbol: "fixed",
            symbolRepeat: "repeat",
            legendHoverLink: false,
            itemStyle: {
              normal: {
                color: "rgba(153, 153, 153, 0.23)",
              },
            },
            data: bgData,
            symbolSize: [8, 20],
            animation: false, //关闭动画
            z: 0,
          },
          {
            name: "info",
            type: "pictorialBar",
            barWidth: 10,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#009cff",
                  },
                  {
                    offset: 1,
                    color: "#00e4ff",
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [6, 20],
            symbolPosition: "start",
            symbolOffset: [0, -1],
            data: category,
            z: 1,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 字体自适应。
    fontSize(res) {
      const clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      const fontSize = 40 * (clientWidth / 1920);
      return res * fontSize;
    },
    // 销毁图表。
    disposeChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
    },
    // 重新加载图表。
    reloadChart() {
      this.disposeChart();
      this.drawChart();
    },
  },
};
</script>

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