【Echarts】大数据量时异步分段加载

在线实例

效果图

另外两个动态追加数据的实例

实例1：即时加载更新
效果图：
实例2：前 n 条即时加载显示，剩余数据后台加载
效果图：
代码

<!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,
            max: 100
          }
        ],
        series: [
          {
            data: [],
            type: "line"
          }
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%"
          }
        ]
      };

      $(function() {
        _echart = echarts.init(document.getElementById("container"));

        /*默认初始数据*/
        var rData = randomData(20);
        option.xAxis[0].data = option.xAxis[0].data.concat(rData.xData);
        option.series[0].data = option.series[0].data.concat(rData.yData);

        _echart.setOption(option);
        /*end*/

        /*ajax 请求分段加入数据*/
        fetchData();
        /*end*/
      });

      function fetchData(fIndex = 1) {
        let option = _echart.getOption();
        /*传入 url， 参数：批次，每次加载的数据量由后台控制，返回值包含一个 status */

        //   $.getJSON(url, {batch: batch}, function(res){
        //          option.xAxis[0].data = option.xAxis[0].data.concat(res.data.xData);
        //          option.series[0].data = option.series[0].data.concat(res.data.yData);
        //          ...
        //          _echart.setOption(option);
        //          if (res.status == 'loading') {
        //              fetchData(fIndex + 1);
        //          }
        //   })

        /*模拟生成返回数据*/
        let res = {
          data: randomData(3000), //每一批次加载 3000 条数据
          status: fIndex <= 100 ? "loading" : "completed" //status 表示是否加载完：值为 loading/completed/error。这里模拟加载 100 批数据后加载完成
        };
        console.log(option.xAxis[0].data.length);
        option.xAxis[0].data = option.xAxis[0].data.concat(res.data.xData);
        option.series[0].data = option.series[0].data.concat(res.data.yData);

        option.dataZoom[0].start = 0; //固定显示前 300 条数据
        option.dataZoom[0].end =
          option.series[0].data.length < 300
            ? 100
            : (300 * 100) / option.series[0].data.length;

        _echart.setOption(option);
        if (res.status == "loading" || res.status == "completed") {
          if (res.status == "completed") {
            alert("load completed");
            return;
          } else {
            sleep(500).then(() => {
              fetchData(fIndex + 1); //延迟 0.5 秒自调用。防止调用频繁引起的无法显示，防止服务器压力过大
            });
          }
        } else {
          alert("Error");
        }
        /*end*/
      }

      function randomData(len) {
        const now = new Date();
        let data = {
          xData: [],
          yData: []
        };
        for (let i = 0; i < len; i++) {
          data.xData.push(`${now.getMinutes()}:${now.getSeconds()}`);
          data.yData.push(Math.random() * 100);
        }
        return data;
      }

      function sleep(time) {
        return new Promise(resolve => setTimeout(resolve, time));
      }
    </script>
  </body>
</html>
【Echarts】大数据量时异步分段加载

在线实例

效果图

另外两个动态追加数据的实例

代码

悦读
