Vue实现柱状图自动横向滚动

Vue实现柱状图自动横向滚动

vue实现折线图（柱状图）自动横向滚动的原理就是：通过定时器修改Echarts的配置（option）达到效果。

此块需要了解Echarts中dataZoom这个组件，这个组件用于：用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。简单来说就是，在数据量多的时候，既能保持Echarts美观度，也能让用户自由查看所有数据。

在dataZoom组件中有三种类型，在本次需求中，使用的是内置型数据区域缩放组件（dataZoomInside）。

主要代码：

dataZoom: [
    {
        xAxisIndex: 0, 	//这里是从X轴的0刻度开始
        show: false, 	//是否显示滑动条，本次需求中，设置为false
        type: "inside", // 类型：内置型数据区域缩放组件
        startValue: 0, 	// 从头开始。
        endValue: 3, 	// 一次性展示几个。
    },
],

总体代码：

<script>
export default {
  name: "screenLeft",
  data() {
    return {
      xAxisData: [],
      xProgram: [10, 22, 28, 43, 49],	// 横轴数据
      yProgram: [5, 4, 3, 5, 10],		// 竖轴数据
    };
  },
  methods: {
    initCharts() {
      let that = this;
      // id获取元素
      const chartDom = document.getElementById("xxx");

      // 全局引用的方式
      var myChart = that.$echarts.init(chartDom);

      let option = {
        color: ["#F3B44B", "#14ABDF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          top: "10",
          itemWidth: 12.5,
          itemHeight: 12.5,
          data: [
            {
              name: "项目一",
              // 强制设置图形为圆。
              textStyle: {
                color: "rgba(255, 255, 255, 0.7)",
              },
            },
            {
              name: "项目二",
              // 强制设置图形为圆。
              textStyle: {
                color: "rgba(255, 255, 255, 0.7)",
              },
            },
          ],
        },
		// 滑动
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0],
            show: false,
            startValue: 0, // 从头开始
            endValue: 3, // 一次性展示几个
          },
        ],

        xAxis: {
          axisTick: { show: false },
          axisLabel: {
            textStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 14 },
            interval: 0,
          },
          data: ["横向1", "横向2", "横向3", "横向4", "横向5"], // 底部坐标轴
        },
        yAxis: [
          {
            axisLabel: {
              textStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 14 },
              formatter: function (value, index) {
                return value;
              },
            },
            max: 50,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#14ABDF",
                opacity: "0.15",
              },
            },
            boundaryGap: [0, 0.1],
          },
          {
            axisLabel: {
              textStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 14 },
              formatter: function (value, index) {
                return value + "%";
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#14ABDF",
                opacity: "0.15",
              },
            },
            boundaryGap: [0, 0.1],
          },
        ],
        series: [
          {
            name: "项目一", // 最上方
            data: that.xProgram,
            color: "#F3B44B",
            type: "bar",
            stack: "x", // 堆叠的关键，保持一致
            barWidth: 15, //柱图宽度,
          },
          {
            name: "项目二",
            data: that.yProgram,
            color: "#00C8F3",
            type: "bar",
            stack: "x",
            barWidth: 15,
          },
        ],
      };

      setInterval(function () {
        // 每次向左滑动一个，最后一个从头开始。
        console.log("option.dataZoom[0].endValue", option.dataZoom[0].endValue);
        console.log("that.xProgram.length" + that.xProgram.length);

        if (option.dataZoom[0].endValue == that.xProgram.length) {
          option.dataZoom[0].startValue = 0;
          option.dataZoom[0].endValue = 3;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      }, 3000);


      // 绘制图表
      myChart.setOption(option);   // 此处仍需要再绘制一次，否则会出现第一个数据不显示的问题
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    // 初始化
    this.initCharts();
  },
};
</script>

参考文档：

1. 官网配置项-dataZoom