异步数据加载

在之前的例子中，我们一直将数据直接填入setOption配置项中，那么当我们的数据项很大的时候，这样写就不太完美了。

所以我们可以使用jQuery等工具来异步获取数据，并填入setOption中。

1.数据加载

本节我们来基于 jQuery 获取数据。

数据要单独放入 .json 文件中
使用 jQuery 中的 get 方法来获取数据

首先，使用以下命令获取实验需要的 .json 文件。

1	wget https://labfile.oss.aliyuncs.com/courses/10532/data.json

使用以下命令获取 ECharts 和 jQuery 文件。

1 2	wget https://labfile.oss.aliyuncs.com/courses/5788/echarts.js wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js

获取了图表需要的数据后，我们使用 jQuery 中的 get 方法来获取 data.json 文件中的数据。回忆一下，语法格式如下：

1	$.get(url, data, callback(data, status, xhr), dataType);

然后，新建一个 index.html 文件，在文件中写入以下内容：

:collapsed-lines

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <title>异步加载数据</title>
  </head>

  <body>
    <div id="main" style="width:600px; height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("main"));
      $.get(
        "data.json",
        function (data) {
          myChart.setOption({
            title: {
              text: "电影类型",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                type: "pie",
                radius: "55%",
                data: data.data_pie, // 数据
              },
            ],
          });
        },
        "json"
      );
    </script>
  </body>
</html>

效果如下：

:::: demo-wrapper
::: center

:::
::::

尽管已经很方便了，但是还存在一个问题。那就是日常生活中的数据都是动态变化的，如何让图标实时更新呢？

2.数据更新

从上面的学习中我们知道了，数据的加载都是在 setOption 配置项中完成的。

其实除了加载数据，设置图表实例的配置项、数据、万能接口、所有参数和数据的修改都可以通过 setOption 来完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画配置项的话，ECharts 会找到两组数据之间的差异，然后通过合适的动画去表现数据的变化。

比如我们来看个例子：

:collapsed-lines

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="echarts.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <title>更新数据</title>
  </head>

  <body>
    <div id="main" style="width:600px; height:400px;"></div>
    <!--绑定点击事件 updateData-->
    <button onclick="updateData()">更新数据</button>
    <script type="text/javascript">
      var nums = [25, 5, 4, 35, 12, 30];
      var myChart = echarts.init(document.getElementById("main"));
      option = {
        xAxis: {
          type: "category",
          data: ["喜剧片", "恐怖片", "爱情片", "科幻片", "纪录片", "动画片"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: nums,
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
      function updateData() {
        // 生成随机数
        var num = Math.floor(Math.random() * 10);
        for (var i in nums) {
          nums[i] = nums[i] + num;
        }
        myChart.setOption(option); // 绘制新图表
      }
    </script>
  </body>
</html>

这段代码采用函数updateDate()来更新图表📊，其实我们可以封装一个setInterval()，更加直观。