echarts柱状图设置柱子的间距（barGap属性）

 

<template>
  <div id="tradebar" class="barBox" />
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "BarEcharts",
  props: ["barData"],
  data() {
    return {
      myChart: "",
      option: {},
      echartTimer: "",
    };
  },
  mounted() {
    this.option = {
      backgroundColor: "rgba(0,16,47,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          shadowStyle: {
            color: "rgba(41, 95, 204, 0.2)",
          },
        },
      },
      legend: {
        data: ["产品数量", "需求数量"],
        align: "right",
        right: 10,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35,
      },
      grid: {
        top: "18%",
        bottom: "3%",
        left: "6%",
        right: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: this.barData.x,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            formatter: function () {
              return "";
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#00c7ff",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#063374",
            },
          },
        },
      ],
      series: [
        {
          name: "产品数量",
          type: "bar",
          data: this.barData.z,
          barWidth: 14, //柱子宽度
          barGap: 0.5, //柱子之间间距
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#206aea",
                },
                {
                  offset: 1,
                  color: "#2299EA",
                },
              ]),
              opacity: 1,
            },
          },
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 5,
              color: "#fff",
              formatter: function (params) {
                if (params.value > 0) {
                  return params.value;
                } else {
                  return "";
                }
              },
            },
          },
        },
        {
          name: "需求数量",
          type: "bar",
          data: this.barData.y,
          barWidth: 14,
          barGap: 0.5,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#b66501",
                },
                {
                  offset: 1,
                  color: "#B68B1C",
                },
              ]),
              opacity: 1,
            },
          },
          label: {
            normal: {
              show: true,
              position: "top",
              distance: 5,
              color: "#fff",
              formatter: function (params) {
                if (params.value > 0) {
                  return params.value;
                } else {
                  return "";
                }
              },
            },
          },
        },
      ],
    };
    this.myChart = this.$echarts.init(document.getElementById("tradebar")); // 图标初始化
    this.myChart.setOption(this.option); // 渲染页面
    var that = this;
    let index = 0;
    this.echartTimer = setInterval(function () {
      var len = that.barData.y.length;
      if (index >= len) {
        index = 0;
      }
      that.myChart.dispatchAction({
        type: "showTip", // 提示框
        seriesIndex: 0,
        dataIndex: index, // 第 lightIndex   柱子高亮
      });
      index += 1;
    }, 1000);
    // 随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  beforeDestroy() {
    this.myChart.clear();
    if (this.echartTimer) {
      clearInterval(this.echartTimer);
    }
  },
};
</script>

<style scoped>
.barBox {
  width: 100%;
  height: 90%;
}
</style>