echarts拖动进度条,动态更新数据

2,997 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情

需求

最近有这么一个需求,公司呢要做一个数据分析表格,但是呢数据太大,没法全部传过来,产品希望用户可以通过滑动进度条,我们动态的去获取数据,今天刚有个思路,试验了一下,走了几个坑,最终还是完成了,分享给大家

技术栈

vue + echarts

思路

首先我们需要监听滑动进度条这个事件,也就是echarts的dataZoom的事件,百度了一下是这样的

this.echartsInstance.on("dataZoom", (params) => {
    //事件代码
});

params是返回来的一个对象

params.png 主要是两个属性,end,start,百分比形式

  • end:进度条右面距离开始的长度
  • start:进度条左前面距离开始的长度

所以我们可以根据用户移动了多长的距离,再去更新数据

实现

先创建一个项目,配置一下echarts 我的echarts配置如下

options: {
    dataZoom: [
      {
        // 增加滚动条以及鼠标拖动滚动条功能
        type: "slider",
        backgroundColor: "rgba(19, 28, 59, 1)",
        fillerColor: "rgba(38, 128, 255, 1)",
        borderColor: "transparent",
        startValue: 0,
        endValue: 8,
        zoomLock: true,
        height: "2%",
        bottom: 0,
        brushSelect: false,
        showDetail: false,
        handleStyle: { opacity: 0 },
        dataBackground: {
          lineStyle: { opacity: 0 },
          areaStyle: { opacity: 0 },
        },
      },
    ],
    xAxis: {
      type: "category",
      axisTick: false,
      data: [
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "1",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
      ],
    },
    yAxis: [
      {
        type: "value",
        name: "人数",
        position: "left",
      },
    ],
    grid: {
      left: "20%",
    },
    series: [
      {
        data: [
          150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147,
          260,
        ],
        type: "line",
        name: "人数",
      },
    ],
  },

dataZoom就是开启进度条的功能,xAxis是x轴,为什么要给他那么多的空值呢?因为我们需要x轴长度固定,不然我们向里面添加数据会导致dataZoom的进度条变小,不好看

把这个配置传给echarts实例就可以生成表,然后需要监听dataZoom的变化

 mounted() {
    this.echartsInstance = echarts.init(this.$refs.myEchartRef);
    this.echartsInstance.setOption(this.options);
    this.echartsInstance.on("dataZoom", (params) => {

    });
  },

选择在mounted时候加载图表

那么当我们什么时候才需要去获取数据呢?

因为我给dataZoom一个startValue和endValue,表示它可以展示9个数据,我们获取的时候可以获取18个数据,当进度天滑动时候,找到9个数据/总数据的比值,如果进度条滑动距离大于这个比值,那么意味着我们需要获取数据了

获取数据后,再把数据用splite添加到option的xAxis的data中,

我们会发现此时的echarts根本没刷新,如果想刷新,还需要监听一下options属性,然后再调用setOptions方法,但是千万不要后面跟上true,因为跟上true意味着全部清空属性,而不是添加属性

  watch: {
    options: {
      handler() {
        this.echartsInstance.setOption({ xAxis: this.options.xAxis });
      },
      deep: true,
    },
  },

watch要开启深度监听,而且只给她一个xAxis,不是把这个options给他,他会帮我们和旧的options合并的

当进度条滑动需要执行的

this.echartsInstance.on("dataZoom", (params) => {
      //tick类似与节流
      if (params.start - this.tick >= 10) {
        //找到第一个为空的数据
        const index = this.options.xAxis.data.indexOf("");
        添加数据
        this.options.xAxis.data.splice(
          index,
          this.xAxisArray.length,
          ...this.xAxisArray
        );
        this.tick = params.start;
      }
    });

这样基本上就是实现了,但是在实际系统上需要把他写成异步,因为我们需要在服务器获取数据,看一下效果

展示

chrome_Hn0RsUdeTP.gif

echarts配置太多了,烦死了