携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情
需求
最近有这么一个需求,公司呢要做一个数据分析表格,但是呢数据太大,没法全部传过来,产品希望用户可以通过滑动进度条,我们动态的去获取数据,今天刚有个思路,试验了一下,走了几个坑,最终还是完成了,分享给大家
技术栈
vue + echarts
思路
首先我们需要监听滑动进度条这个事件,也就是echarts的dataZoom的事件,百度了一下是这样的
this.echartsInstance.on("dataZoom", (params) => {
//事件代码
});
params是返回来的一个对象
主要是两个属性,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;
}
});
这样基本上就是实现了,但是在实际系统上需要把他写成异步,因为我们需要在服务器获取数据,看一下效果
展示
echarts配置太多了,烦死了