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

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

2023-11-17 210
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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数据
ajax数据
JSON交互
ajax交互
JSON Ajax
祈澈菇凉
目录
相关文章
游客tsrksm3mlhq4y
|
XML JSON 前端开发
ajax中get和post的区别，datatype返回的数据类型有哪些？web开发中数据提交的几种方式，有什么区别。
ajax的讲解
游客tsrksm3mlhq4y
700 0
奔跑的数据
|
机器学习/深度学习 数据采集 存储
动态渲染页面智能嗅探：机器学习判定AJAX加载触发条件
本文介绍了一种基于机器学习的智能嗅探系统，用于自动判定动态渲染页面中AJAX加载的最佳触发时机。系统由请求分析、机器学习判定、数据采集和文件存储四大模块构成，采用爬虫代理技术实现高效IP切换，并通过模拟真实浏览器访问抓取微博热搜及评论数据。核心代码示例展示了如何调用微博接口获取榜单与评论，并利用预训练模型预测AJAX触发条件，最终将结果以JSON或CSV格式存储。该方案提升了动态页面加载效率，为信息采集与热点传播提供了技术支持。
奔跑的数据
462 15
动态渲染页面智能嗅探：机器学习判定AJAX加载触发条件
小白学大数据
|
Web App开发 数据采集 前端开发
Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？
Python + Chrome 爬虫：如何抓取 AJAX 动态加载数据？
小白学大数据
743 2
阿里云开发者
|
JSON 人工智能 JavaScript
大语言模型下的JSON数据格式交互
本文作者总结了在解析JSON过程中遇到的一些问题和解决方案。
阿里云开发者
2700 1
刘大猫.
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
刘大猫.
220 18
左诗右码
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
556 4
众所周知
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑；Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例，如实时数据更新、表单验证与提交、动态加载内容等。同时，针对跨域问题、数据安全与性能优化提出了建议。总结指出，PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
众所周知
427 3
m1a6
|
存储 JSON 前端开发
JSON与现代Web开发：数据交互的最佳选择
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也便于机器解析和生成。它以文本格式存储数据，常用于Web应用中的数据传输，尤其是在客户端和服务器之间。
m1a6
1379 1
程序员小海绵
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例，Axios + JSON 品牌列表查询和添加
程序员小海绵
492 0
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
陌陌谣
|
存储 JSON 监控
公司用什么软件监控电脑：JSON 在监控信息交互中的应用探索
在现代企业管理中，电脑监控软件广泛应用于保障信息安全和提升工作效率。JSON（JavaScript Object Notation）因其简洁和易读性，在监控信息的收集、传输和处理中扮演着关键角色。本文介绍了 JSON 在监控数据结构、信息传输及服务器端处理中的具体应用，展示了其在高效监控系统中的重要性。
陌陌谣
235 0

热门文章

最新文章

  • 1
    vbscript/javascript结合搞定ajax中文乱码问题。
  • 2
    Ajax Tutorial，Ajax指导
  • 3
    jQuery Ajax 实例 全解析 (转)
  • 4
    基于Ajax的五子棋演示
  • 5
    Ajax在IE浏览器会出现中文乱码解决办法
  • 6
    ajax和它的超时
  • 7
    前端javascript练习题Ajax封装
  • 8
    js 判断ajax请求的401错误码
  • 9
    ajax 处理请求回来的数据
  • 10
    html Ajax读取数据
  • 1
    超越JSON：Python结构化数据处理模块全解析
    1273
  • 2
    淘宝拍立淘按图搜索API系列，json数据返回
    921
  • 3
    Python中的json模块：从基础到进阶的实用指南
    738
  • 4
    Python采集淘宝商品评论API接口及JSON数据返回全程指南
    1080
  • 5
    【GoGin】（3）Gin的数据渲染和中间件的使用：数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
    421
  • 6
    【GoGin】（2）数据解析和绑定：结构体分析，包括JSON解析、form解析、URL解析，区分绑定的Bind方法
    516
  • 7
    【Java】（10）进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化
    431
  • 8
    【Java基础】（1）进程与线程的关系、Tread类；讲解基本线程安全、网络编程内容；JSON序列化与反序列化
    397
  • 9
    Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
    900
  • 10
    Swagger动态参数注解：使用@DynamicParameters实现JSON参数的灵活定义
    518

    • 相关课程

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

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！