当前位置：首页 > news >正文

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

news 来源：原创 2024/4/28 3:28:11

需求

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

技术栈

vue + echarts

思路

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

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

params是返回来的一个对象

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;}});

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