在线实例

效果图

1

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

代码

<!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
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

java计算机毕业设计教师工作量统计系统 基于SpringBoot的高校教师绩效测算与可视化平台 教师教学任务与工作量智能汇总系统

avatar 永洪数据分析社区
cover

BI是报表？BI是可视化？BI到底是什么？

avatar 永洪数据分析社区

AI智能体+BI可视化：1小时极速入门，市场部独力完成分析报告

商务蓝：适合正式报告活力橙：适合创意活动环保绿：适合可持续发展主题自主分析能力：不再依赖IT部门，活动当天即可产出分析结论智能数据处理：AI智能体自动完成80%的数据清洗和分析工作专业可视化：通过PowerBI制作媲美专业数据分析师的报告持续优化：建立可复用的分析模板，后续活动效率更高决策支持：基于数据快速调整营销策略，提升活动ROI现在就可以尝试部署你的第一个智能分析环境，体验从数据到决策的高速

avatar 永洪数据分析社区