查看疫情数据(如何把jquery的值赋值到echars里面)

最新推荐文章于 2023-01-17 12:41:28 发布

全栈开发crud师

最新推荐文章于 2023-01-17 12:41:28 发布

阅读量211

点赞数

分类专栏：前端文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/Sunraiseprice/article/details/121048115

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <button id="jr">今日新增数据</button>
    <button id="lj">累计新增数据</button>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript">
      $("#jr").click(function () {
        // alert("Text: " + $("#test").text());
        $.ajax({
          url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
          //   url: "kuaidi.json",
          type: "get",
          //   crossDomain: true,
          // data: {
          //   apiKey: apiKey,
          //   expressNumber: expressNumber,
          //   expressType: expressType,
          // },
          dataType: "jsonp",
          //   dataType: "json",
          success: function (res) {
            // console.log(res.data);
            // 转换为json字符串
            // var jsondx = JSON.stringify(res.data);
            // console.log(jsondx);
            // console.log(typeof jsondx);
            console.log(res);
            console.log(res.data);
            console.log(typeof res);
            yqsj = res.data;
            // var obj = yqsj.parseJSON(); //由JSON字符串转换为JSON对象
            var obj = JSON.parse(yqsj);
            console.log(obj);
            var areaTree = obj.areaTree[0].children;
            console.log(obj.areaTree[0].children);
            var shengfen = [];
            var nums = [];
            areaTree.forEach(function (element) {
              console.log(element.name);
              shengfen.push(element.name);
              //   nums.push(element.total.confirm);
              nums.push(element.today.confirm);
            });
            console.log(shengfen);

            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};

            var option;

            option = {
              xAxis: {
                type: "category",
                data: shengfen,
                axisLabel: {
                  interval: 0,
                },
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: nums,
                  type: "bar",
                  showBackground: true,
                  backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                  },
                  itemStyle: {
                    //上方显示数值
                    normal: {
                      label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          color: "black",
                          fontSize: 16,
                        },
                      },
                    },
                  },
                },
              ],
            };

            if (option && typeof option === "object") {
              myChart.setOption(option);
            }
          },
        });
      });
      $("#lj").click(function () {
        // alert("Text: " + $("#test").text());
        $.ajax({
          url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
          //   url: "kuaidi.json",
          type: "get",
          //   crossDomain: true,
          // data: {
          //   apiKey: apiKey,
          //   expressNumber: expressNumber,
          //   expressType: expressType,
          // },
          dataType: "jsonp",
          //   dataType: "json",
          success: function (res) {
            // console.log(res.data);
            // 转换为json字符串
            // var jsondx = JSON.stringify(res.data);
            // console.log(jsondx);
            // console.log(typeof jsondx);
            console.log(res);
            console.log(res.data);
            console.log(typeof res);
            yqsj = res.data;
            // var obj = yqsj.parseJSON(); //由JSON字符串转换为JSON对象
            var obj = JSON.parse(yqsj);
            console.log(obj);
            var areaTree = obj.areaTree[0].children;
            console.log(obj.areaTree[0].children);
            var shengfen = [];
            var nums = [];
            areaTree.forEach(function (element) {
              console.log(element.name);
              shengfen.push(element.name);
              nums.push(element.total.confirm);
              //   nums.push(element.today.confirm);
            });
            console.log(shengfen);

            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};

            var option;

            option = {
              xAxis: {
                type: "category",
                data: shengfen,
                axisLabel: {
                  interval: 0,
                },
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: nums,
                  type: "bar",
                  showBackground: true,
                  backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                  },
                  itemStyle: {
                    //上方显示数值
                    normal: {
                      label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          color: "black",
                          fontSize: 16,
                        },
                      },
                    },
                  },
                },
              ],
            };

            if (option && typeof option === "object") {
              myChart.setOption(option);
            }
          },
        });
      });
    </script>
  </body>
</html>

全栈开发crud师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
查看疫情数据(如何把jquery的值赋值到echars里面)

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style> div { height: 500px; width: 100%; } </style> </head> <body> <div id="container"></div&
复制链接

扫一扫