想要让 Echarts组件 实现动态的刷新 ， 首先把数据处理一下，因为杂乱无章的数据来实现动态刷新，对我来说并没有什么作用
这是图表最开始的样子，因为我用的是 固定的数据，所以可能显得比较整齐，并且是 从大到小 排序的
接下来，我们让图表实现 从大到小 排序并且 每5条数据 一页
排序：
//对数组进行排序 通过回调函数来决定是 从大到小 还是 从小到大
this.allDate.sort((a, b) => {
return b.value - a.value; //从大到小 (从小到大 => a.value - b.value )
});
刷新一下 看看数据的展示效果：
分页：
定义两个属性 一个 当前页显示的条目，一个 一共显示多少页
总页数：
// 每5个元素显示一页
this.totalPage =
this.allDate.length % 5 === 0
? this.allDate.length / 5
: this.allDate.length / 5 + 1;
当前显示页数 ：这里注意 需要 *5 截取的是 当前页数据 开始 和 结束 的位置
然后我们 看一下 效果:
接下来 通过定时器来刷新 图表的数据
// 定时器 决定 动态刷新的效果
startInterval() {
// 小技巧:一般定时器前 先判断 如果有定时器 先将它关闭
if(this.timerID){
clearInterval(this.timerID);
}
this.timerID = setInterval(() => {
//每当 currentPage 自增 就调用 updateChaet方法让 图表展示数据 进行更新
this.currentPage++;
// 如果 数据currentPage自增到 超出总页数 就让他从头计算
if (this.currentPage > this.totalPage) {
this.currentPage = 1;
}
this.updateChart();
}, 3000);
},
那么什么时候来调用 startInterval() 这个方法呢？
应该在获取数据之后来调用：
最后 我们在针对图表做一个 监听鼠标的操作
鼠标放到图表上，停止定时器，数据停止刷新 ---- 鼠标从图表上移开，从新启动定时器，数据开始刷新
这部分的代码 我们应该放在 初始化图表对象 的时候
//对图表对象 进行 鼠标事件的监听
this.chartInstance.on("mouseover", () => { //鼠标 放到 图表上
clearInterval(this.timerID);
});
this.chartInstance.on("mouseout", () => { //鼠标从图标上 移开
this.startInterval(this.timerID);
});