echarts-大数据量图表展示

最新推荐文章于 2025-03-05 11:07:16 发布

晓林love

最新推荐文章于 2025-03-05 11:07:16 发布

阅读量3.6k

点赞数

文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/u012963112/article/details/122740873

版权

问题
数据从后台传到前端，前端再渲染成图表。这个流程很简单易懂。问题在于，当数据量达到一定量时（为了方便，数据量用后台传过来的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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Echart</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.js"></script>
    <style>
      .container {
   
        width: 1800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="container" class="container"></div>
    <script>
      var timer = null;
      var option = {
   
        xAxis: [
          {
   
            type: "category",
            data: []
          }
        ],
        yAxis: [
          {
   
            type: "value",
            min: 0,