AI 助理
备案控制台
开发者社区 云计算 文章 正文

ajax+json模拟一个页面多个统计图数据交互

2023-11-17 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ajax+json模拟一个页面多个统计图数据交互 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>五分钟上手饼图</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="page-container">
      <!-- 统计图模块   -->
      <div class="row">
        <div class="col-md-12  col-sm-12  col-xs-12">
          <!-- 左侧饼图 -->
          <div class="col-md-2  col-sm-2  col-xs-2" style="width: 21%">
            <div class="charts2">
              <div id="main1" style="height: 180px;"></div>
            </div>
          </div>
          <!-- 右侧统计图 -->
          <div class="col-md-5  col-sm-5  col-xs-5" style="width: 39%;">
            <div class="charts4">
              <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
              <div id="main" style="width: 500px; height: 200px;"></div>
            </div>
            <div class="charts5">
              <div id="main2" style="width: 500px; height: 200px;"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12  col-sm-12  col-xs-12 charts6">
            <div id="main3" style="width: 500px;height: 200px;"></div>
          </div>
        </div>
        <!-- 底部统计图 -->
        <div class="col-md-12  col-sm-12  col-xs-12  bottom">
          <div class="col-md-7  col-sm-7  col-xs-7  charts7">
            <div id="main4" style=" height: 200px;"></div>
          </div>
          <div class="col-md-5  col-sm-5  col-xs-5  charts8">
            <div id="main5" style="width: 600px; height: 200px;"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      $.ajax({
        url: "test.json",
        data: {},
        type: 'GET',
        success: function(data) {
          alert(JSON.stringify(data))
          aFun(data.echatX, data.echatY);
          bFun(data);
          cFun(data.echatX, data.echatY);
          dFun(data.echatX, data.echatY);
          eFun(data.echatX, data.echatY);
          fFun(data.echatX, data.echatY);
        },
      });
      // =============右上侧柱状图==============
      var aChart = echarts.init(document.getElementById('main'));
      function aFun(x_data, y_data) {
        // 指定图表的配置项和数据
        aChart.setOption({
          title: {},
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            /* 改变x轴颜色 */
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 5,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [{
            name: '巡检达标率',
            type: 'bar',
            // 设置柱状图大小
            barWidth: 20,
            // 设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#1268f3" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#08a4fa" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#01ccfe" // 100% 处的颜色
                }], false)
              }
            },
            data: y_data,
          }]
        });
      }
      // ==============左侧饼状图==============
      var bChart = echarts.init(document.getElementById('main1'));
      function bFun(param) {
        // 指定图表的配置项和数据
        bChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: [{
            name: '统计人数',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                }
              }
            },
            data: [
              /* { value: 12, name: '管理', itemStyle: { color: '#5f4b9c' } },
                { value: 3, name: '炼钢工', itemStyle: { color: '#2e73ba' } },
                { value: 4, name: '操作工', itemStyle: { color: '#7aa83a' } },*/
              {
                value: param.peopleOutline,
                name: '在线',
                itemStyle: {
                  color: '#005eff'
                }
              },
              { value: param.peopleOnline, name: '离线', itemStyle: { color: '#ff9194' } },
            ]
          }]
        });
      }
      // ==============右上侧第二个折线图==============
      // 基于准备好的dom，初始化echarts实例
      var cChart = echarts.init(document.getElementById('main2'));
      function cFun(x_data, y_data) {
        // 指定图表的配置项和数据
        cChart.setOption({
          title: {
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['近七日收益']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            type: 'category',
            boundaryGap: false,
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 5,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [
            {
              name: '',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#0e4b7a" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "#0d3f70" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "#0c3367" // 100% 处的颜色
                  }], false)
                }
              },
              stack: '总量',
              data: y_data
            }
          ]
        });
      }
      // ==============中间满屏折线图==============
      // 基于准备好的dom，初始化echarts实例
      var dChart = echarts.init(document.getElementById('main3'));
      // 指定图表的配置项和数据
      function dFun(x_data, y_data) {
        dChart.setOption({
          title: {
            left: 'left',
            text: '概率',
            show: false
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{a}:{c}',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            show: false,
            top: '30',
            bottom: '60',
            right: '60',
            left: '60'
          },
          legend: {
            show: true,
            selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
            bottom: 10,
            left: 50,
            textStyle: {
              color: '#666',
              fontSize: 12
            },
            itemGap: 20,
            data: ['设备一', '设备二', '设备三'],
            inactiveColor: '#ccc'
          },
          xAxis: {
            splitLine: {　　　　 show: false　　 },
            type: 'category',
            data: x_data,
            axisPointer: {
              type: 'shadow'
            },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            axisTick: {
              show: true,
              interval: 0
            },
          },
          // 设置两个y轴，左边显示数量，右边显示概率
          yAxis: [{
              splitLine: {　　　　 show: false　　 },
              type: 'value',
              name: '数量',
              max: 1000,
              min: 0,
              show: true,
              interval: 500,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                }
              },
            },
            // 右边显示概率
            {
              splitLine: {　　　　 show: false　　 },
              type: 'value',
              name: '概率',
              min: 0,
              max: 100,
              interval: 10,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                }
              },
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
          series: [{
              name: '设备一',
              type: 'bar',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#0e4b7a" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "#0d3f70" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "#0c3367" // 100% 处的颜色
                  }], false)
                }
              },
              data: y_data,
              barWidth: '50%',
            },
            {
              name: '设备一',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
              data: y_data,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: "#DDA0DD"
                }
              }
            },
          ]
        });
      }
      // ==============底部第一个折线图==============
      // 基于准备好的dom，初始化echarts实例
      var eChart = echarts.init(document.getElementById('main4'));
      // 指定图表的配置项和数据
      function eFun(x_data, y_data) {
        eChart.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['近七日收益']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            type: 'category',
            boundaryGap: false,
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 10,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [
            {
              name: '近七日收益',
              type: 'line',
              symbol: 'circle', // 折线点设置为实心点
              symbolSize: 6, // 折线点的大小
              itemStyle: {
                normal: {
                  color: "#1bdaf8", // 折线点的颜色
                  lineStyle: {
                    color: "#0d427e" // 折线的颜色
                  }
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#0e4b7a" // 0% 处的颜色
                  }, {
                    offset: 0.6,
                    color: "#0d3f70" // 60% 处的颜色
                  }, {
                    offset: 1,
                    color: "#0c3367" // 100% 处的颜色
                  }], false)
                }
              },
              stack: '总量',
              data: y_data,
            }
          ]
        });
      }
      // ==============底部柱状图==============
      var fChart = echarts.init(document.getElementById('main5'));
      // 指定图表的配置项和数据
      function fFun(x_data, y_data) {
        fChart.setOption({
          title: {
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {　
            splitLine: {　　　　 show: false　　 },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
            data: x_data,
          },
          yAxis: {　
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            scale: true,
            name: '心率值',
            max: 150,
            min: 0,
            splitNumber: 10,
            // 改变y轴颜色
            axisLine: {
              lineStyle: {
                color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              }
            },
          },
          series: [{
            name: '巡检达标率',
            type: 'bar',
            // 设置柱状图大小
            barWidth: 20,
            // 设置柱状图渐变颜色
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#e12251" // 0% 处的颜色
                }, {
                  offset: 0.6,
                  color: "#df635a" // 60% 处的颜色
                }, {
                  offset: 1,
                  color: "#e79363" // 100% 处的颜色
                }], false)
              }
            },
            data: y_data,
          }]
        });
      }
    </script>
  </body>
</html>

test.json

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        0,
        10,3,43,5,47,8,39,0,1
    ],
    "echatY2": [
        0
    ],
    "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}
文章标签：
CDN
关键词：
JSON数据
JSON交互
ajax数据
ajax交互
JSON Ajax
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
祈澈菇凉
目录
相关文章
奔跑的数据
|
11天前
|
数据采集 JSON 数据处理
抓取和分析JSON数据：使用Python构建数据处理管道
在大数据时代，电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术，高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务，模拟真实用户行为，提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
奔跑的数据
26 1
抓取和分析JSON数据：使用Python构建数据处理管道
1842782014377483
|
1天前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据：从编码到解码
在现代Web开发中，JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据，包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法，可以显著提升JSON处理的性能，确保系统快速稳定运行。
1842782014377483
12 3
刘大猫.
|
16天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
36 18
运营研究坊
|
16天前
|
JSON JavaScript Java
在Java中处理JSON数据：Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用，重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能，包括数据绑定、流式API和树模型，并通过示例演示了如何使用Jackson进行JSON解析和生成。最后，作者分享了一些实用的代码片段和使用技巧，帮助读者更好地理解和应用这些工具。
运营研究坊
39 0
在Java中处理JSON数据：Jackson与Gson库比较
陌陌谣
|
3天前
|
存储 JSON 监控
公司用什么软件监控电脑：JSON 在监控信息交互中的应用探索
在现代企业管理中，电脑监控软件广泛应用于保障信息安全和提升工作效率。JSON（JavaScript Object Notation）因其简洁和易读性，在监控信息的收集、传输和处理中扮演着关键角色。本文介绍了 JSON 在监控数据结构、信息传输及服务器端处理中的具体应用，展示了其在高效监控系统中的重要性。
陌陌谣
17 0
技术交流18179014480
|
26天前
|
JSON JavaScript API
（API接口系列）商品详情数据封装接口json数据格式分析
在成长的路上，我们都是同行者。这篇关于商品详情API接口的文章，希望能帮助到您。期待与您继续分享更多API接口的知识，请记得关注Anzexi58哦！
技术交流18179014480
75 1
技术交流18179014480
|
18天前
|
JSON API 数据格式
商品详情数据JSON格式示例参考（api接口）
JSON数据格式的商品详情数据通常包含商品的多个层级信息，以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考：
技术交流18179014480
62 0
m1a6
|
19天前
|
存储 JSON 前端开发
JSON与现代Web开发：数据交互的最佳选择
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也便于机器解析和生成。它以文本格式存储数据，常用于Web应用中的数据传输，尤其是在客户端和服务器之间。
m1a6
30 0
明弟有理想
|
21天前
|
存储 JavaScript 前端开发
TypeScript :使用mock提供数据&as const 的使用&tsconfig.json配置
本文介绍了如何在项目中使用 Mock 提供数据，包括安装依赖、配置 Vite 和 TypeScript，以及如何使用 `as const`、元组和 tsconfig.json 配置文件。通过这些配置，可以实现更灵活和高效的开发体验。
明弟有理想
28 0
武子康
|
27天前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
武子康
22 0

热门文章

最新文章

  • 1
    ajax省市县三级联动
  • 2
    jquery ajax return值 没有返回 的解决方法
  • 3
    ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo
  • 4
    最简单的Ajax
  • 5
    《JavaWeb篇》11.Filter&Listener&Ajax看这一篇就够了（二）
  • 6
    AJax学习笔记
  • 7
    fastadmin ajax 关掉提示信息,Fast.api.ajax关闭提示信息
  • 8
    ajax教程
  • 9
    Ext.Ajax.request和formPanel.getForm().submit两种提交方法的异同
  • 10
    Firefox AJAX请求readyState = 0，status = 0问题
  • 1
    jQuery ajax读取本地json文件 三级联动下拉框
    45
  • 2
    json转换大全 1.8遍历
    43
  • 3
    MYSQL--JSON_OBJECT 和 JSON_ARRAYAGG
    149
  • 4
    前端使用lottie-web，使用AE导出的JSON动画贴心教程
    583
  • 5
    Chrome插件开发（一）—manifest.json文件介绍
    133
  • 6
    JSON对象相互转换
    47
  • 7
    从JSON数据到Pandas DataFrame：如何解析出所需字段
    367
  • 8
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    206
  • 9
    ruoyi-nbcio发送消息的SerializationException: Could not read JSON: Unexpected character (‘¬‘ (code 172))
    135
  • 10
    基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式（支持并行网关）
    320

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • JSON 自学手册图文教程
  • Ajax入门

    • 相关电子书

    更多
  • 基于浏览器的实时构建探索之路
  • WEB浏览器中即将发生的安全变化
  • 低代码开发师（初级）实战教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月