在vue中使用 Echarts组件化 父子组件--> 动态刷新

想要让 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);
      });