echarts-大数据量图表展示

问题
数据从后台传到前端，前端再渲染成图表。这个流程很简单易懂。问题在于，当数据量达到一定量时（为了方便，数据量用后台传过来的json数据的实际大小表示），比如50M大小数据，以网速5M/s来算，需要10s以上（毕竟后台可能需要处理一下数据才能发过来），渲染图表的时间随着数据量的增大而加长，50M数据需要15s以上才能渲染出来。而且渲染出来后，进行图表的缩放或者其它交互仍然会有明显的卡顿。（卡顿现象是否明显、渲染时间是否缩短或延长，有很大一部分取决于电脑硬件配置不同）
————————————————
在vue+echart中，切换渲染不同的图表组件，比如line.vue和bar.vue两个图表组件（每个组件都有单独的echart实例），在切换组件时，开发者很容易忘掉，需要把组件内的echart实例销毁的事情。如果在切换组件（销毁组件）时，不进行echart实例的删除，可能导致内存中echart的实例一直存在，CPU占比会比较高。这种情况，可以在vue的生命周期函数beforeDestroy中使用this.chart.clear()或者this.chart.dispose()进行内存的释放。
————————————————

原文链接：https://blog.csdn.net/weixin_43955315/article/details/120071540

  
    
    
    
    

    
    
    
      .container {
        width: 1800px;
        height: 600px;
      }
    
  
  
    "container" class="container">
    
  

原文链接：https://blog.csdn.net/shaotaiban1097/article/details/102626828