【大数据可视化系列一】echarts自动轮播镂空条形图

        复盘项目，整理出的大数据可视化系列样式，之后会陆续更新这个系列。

如标题所示，这篇文章主要实现的是带有自动轮播效果的镂空条形图，先上最终效果图。 

 

想要做出上面的效果，主要实现以下几点：

1. 条形图镂空效果，并且条柱左侧不贴边
2. 自动轮播

1.条形图镂空效果，并且条柱左侧不贴边

刚看到UI图的时候我就想，(*｀▽´*) 哎这不就是一个渐变条加上外边框吗，赶紧翻echarts文档找资料看看背景色跟边框属性。‘哒哒哒’一段代码敲出来运行一看，好家伙，样式是出来了就是这个白边跟渐变条贴在了一起，没有镂空的效果。(´-ι_-｀)

为了实现镂空效果，必须让渐变条跟白边有空隙，那么是不是可以想象成一个白边透明大条柱包裹着一个渐变小条柱呢？有了思路就去实现效果。条柱的样式好实现，但是又出现一个新的问题，怎么让两个条柱重叠在一起。为了解决这个问题找到了barGap属性，官方描述是这样的：

barGap属性控制不同系列柱间距离，数值为百分比（如‘30%’，表示柱间距离为柱子宽度的30%）。如果想要两个系列的柱子重叠，可以设置barGap为‘-100%’，这在用柱子做背景的时候有用。

 太好啦，实现了镂空的效果！(oﾟ▽ﾟ)o  

接着就是要实现条柱左侧不贴边，在查阅了相关的文章之后找到了stack属性。

stack是数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。所以让一号条柱颜色为透明，二号条柱看起来就像是不贴边的效果。镂空效果也可以从这优化，大条柱跟小条柱分别由左侧的一、二号组成。让小条柱的一号数值大于大条柱的一号数值，就可以做出左侧镂空效果。再让小条柱总数值小于大条柱总数值做出右侧镂空效果。

2.自动轮播

自动轮播需要使用echarts的dataZoom属性，相关代码设置如下：

dataZoom: [ // 滑动条
    {
        type: "inside", // slider/inside
        orient: "vertical", // 布局方式 horizontal：水平  vertical：垂直
        startValue: that.sValue, // 起始数值，sValue动态设置
        endValue: that.eValue, // 结束数值，eValue动态设置
        zoomOnMouseWheel: false, // 触发缩放
        moveOnMouseWheel: true, // 触发数据窗口平移
        throttle: 2000, // 视图刷新的频率
    }
]

轮播原理就是控制数据窗口显示范围startValue和endValue每隔一段时间调整一次，比如先展示第一条到第五条数据，两秒之后换成第二条到第六条数据。以此类推，每隔两秒调整一次。关键代码如下：

// 自动轮播
autoMove() {
    let that = this;
    this.timeOut = setInterval(() => {
        if (
            that.chartOption.dataZoom[0].endValue === that.chartData.length - 1
        ) {
            that.chartOption.dataZoom[0].startValue = 0;
            that.chartOption.dataZoom[0].endValue = 4;
        } else {
            that.chartOption.dataZoom[0].startValue = that.chartOption.dataZoom[0].startValue + 1;
            that.chartOption.dataZoom[0].endValue = that.chartOption.dataZoom[0].endValue + 1;
        }
        that.myChart.setOption(that.chartOption);
    }, 2000);
},

自动轮播镂空条形图完整代码如下：

<template>
  <div class="layout">
    <div
      ref="barChart"
      style="width: 100%; height: 100%;"
      @mouseenter="stopMove"
      @mouseleave="mouseleaveAl"
    >
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      timeOut: null, // 自动轮播定时器
      myChart: null,
      chartOption: {}, // 图表参数
      chartData: [200, 550, 160, 1100, 800, 980, 550], // 图表数值
      chartCategory: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
      sValue: 0,  // 起始数值
      eValue: 4,  // 结束数值
    };
  },
  methods: {
    drawBar() {
      let that = this;
      let minVal = Math.min.apply(null, this.chartData);
      let insideVoid = this.chartData.map((item) => {
        return minVal / 3;
      }); // 内部空白效果部分数据，为了让条形图不贴边
      let insideBar = this.chartData.map((item) => {
        return item - minVal / 2;
      }); // 内部柱条数值长度
      let borderVoid = this.chartData.map((item) => {
        return minVal / 5;
      }); // 外部空白效果部分数据，为了让条形图不贴边
      let borderBar = this.chartData.map((item) => {
        return item - minVal / 5;
      }); // 外部柱条数值长度
      this.chartOption = {
        tooltip: { // 提示框
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          showContent: false,
        },
        grid: {
          left: "15%",
          top: "4%",
          bottom: "30",
          right: "15%",
        },
        xAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "rgba(230, 247, 255, 0.5)",
            },
            showMaxLabel: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(230, 247, 255, 0.3)",
              type: [30, 20],
              dashOffset: 10,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#BAE7FF",
            },
          },
          splitNumber: 6,
        },
        yAxis: {
          type: "category",
          data: that.chartCategory,
          inverse: true, // 颠倒Y轴数据，由下到上变成从上到下
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#BAE7FF",
            },
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          //滑动条
          {
            type: "inside", // slider/inside
            orient: "vertical", // 布局方式 horizontal：水平  vertical：垂直
            startValue: that.sValue, // 从头开始
            endValue: that.eValue, // 一次性展示5个
            zoomOnMouseWheel: false, // 触发缩放
            moveOnMouseWheel: true, // 触发数据窗口平移
            throttle: 2000, // 视图刷新的频率
          },
        ],
        series: [
          {
            type: "bar",
            data: borderVoid,  // 白边大条柱左侧不贴边
            stack: "2",
            itemStyle: {
              normal: {
                barBorderColor: "rgba(255, 255, 255, 0)",
                color: "rgba(255, 255, 255, 0)",
              },
            },
            label: {
              show: false,
            },
            barWidth: 16,
          },
          {
            type: "bar",
            data: borderBar, // 白边大条柱，图表数据
            stack: "2",
            itemStyle: {
              barBorderRadius: 18,
              color: "rgba(255, 255, 255, 0)",
              borderColor: "rgba(230, 247, 255, 0.6)",
              borderWidth: 1,
              borderRadius: 20,
            },
            label: {
              show: true,
              position: "right",
              color: "#1EE7E7",
              formatter: function (params) {
                return that.chartData[params.dataIndex];
              },
            },
            barWidth: 16,
          },
          {
            type: "bar",
            data: insideVoid,  // 渐变小条柱左侧不贴边
            stack: "1",
            itemStyle: {
              normal: {
                barBorderColor: "rgba(255, 255, 255, 0)",
                color: "rgba(255, 255, 255, 0)",
              },
            },
            label: {
              show: false,
            },
            barWidth: 6,
          },
          {
            type: "bar",
            data: insideBar,  // 渐变小条柱
            stack: "1",
            itemStyle: {
              barBorderRadius: 18,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#1EE7E7" },
                { offset: 1, color: "#1890FF" },
              ]),
            },
            label: {
              show: false,
            },
            barWidth: 6,
            barGap: "-175%",
          },
        ],
      };
      that.stopMove();
      that.myChart = null;
      that.$nextTick(() => {
        that.myChart = echarts.init(that.$refs["barChart"]);
        that.myChart.setOption(that.chartOption);
        that.autoMove();
      });
    },
    // 自动轮播
    autoMove() {
      let that = this;
      this.timeOut = setInterval(() => {
        if ( that.chartOption.dataZoom[0].endValue === that.chartData.length - 1 ) {
          that.chartOption.dataZoom[0].startValue = 0;
          that.chartOption.dataZoom[0].endValue = 4;
        } else {
          that.chartOption.dataZoom[0].startValue = that.chartOption.dataZoom[0].startValue + 1;
          that.chartOption.dataZoom[0].endValue = that.chartOption.dataZoom[0].endValue + 1;
        }
        that.myChart.setOption(that.chartOption);
      }, 2000);
    },
    // 鼠标移入停止轮播
    stopMove() {
        clearInterval(this.timeOut);
    },
    // 鼠标划出自动轮播
    mouseleaveAl() {
        this.autoMove();
    },
  },
};
</script>

以上就是本篇文章的全部内容，如果对你有帮助的话点个赞支持一下。我们下篇文章见ヾ(๑╹◡╹)ﾉ"~