echarts动态更新数据-CSDN博客

本文链接：https://blog.csdn.net/m0_61246613/article/details/124258223

`ECharts` 中实现异步数据的更新，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。

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

  <body>
    <div id="sex-statistics" style="width: 600px; height: 400px"></div>
    <!-- 引入echarts和jQuery -->
    <script src="/echarts.min.js"></script>
    <script src="/jQuery.js"></script>
    <script>
      var sexChart = echarts.init(document.getElementById("sex-statistics"));
      // 指定图表的配置项和数据
      var sexOption = {
        title: {
          text: "xx教室学生人数实时数据",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)", //a:图名 b:data[n].name c:value d:百分比
        },
        legend: {
          //图例配置
          orient: "vertical", //图例纵向显示
          x: "left", //在图的左边显示
          y: "middle", //a在图的下方显示
          data: ["男", "女"], //图例名称，与data中的name对应
        },
        series: [
          {
            //图表系列。可以有多个，每个系列通过 type 决定自己的图表类型
            name: "学生性别",
            type: "pie", //饼图,用饼图的方式来实现环形图
            radius: ["50%", "70%"], //这里使用饼图来做环形图，因此，要定义内外两个圆占整个图的比例
            label: {
              //配置标签，这里是圆环图中间的标签
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
            data: [
              {
                //数据配置
                name: "男",
                value: 2,
              },
              {
                name: "女",
                value: 1,
              },
            ],
          },
        ],
      }; // 使用刚指定的配置项和数据显示图表。
      sexChart.setOption(sexOption);

      // 动态数据获取
      var url =
        "https://console-mock.apipost.cn/app/mock/project/ecd658cf-4753-4eed-c388-d0f19bed9df5/stunum";

      // 定时任务
      setInterval(function () {
        //1、发送ajax消息获取实时男女生数据
        //2、通过setOption函数，设置到图表中
        $.get(url, function (res) {
          var a = res.male;
          var b = res.female;
          console.log(a, b);
          sexChart.setOption({
            series: [
              {
                data: [
                  { value: res["male"], name: "男" },
                  { value: res["female"], name: "女" },
                ],
              },
            ],
          });
        });

        sexChart.setOption(sexOption);
      }, 2000);
    </script>
  </body>
</html>