Echarts怎么用后台传来的json数据

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <title>ECharts</title>
  7.     <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
  8.     <script type="text/javascript" src="js/echarts.js"></script>
  9. </head>
  11. <body>
  12. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  13. <div id="main" style="width: 600px;height:400px;"></div>
  14. <script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));
  15. // 显示标题，图例和空的坐标轴
  16. myChart.setOption({
  17.     title: {
  18.         text: '异步数据加载示例'
  19.     },
  20.     tooltip: {},
  21.     legend: {
  22.         data: ['销量']
  23.     },
  24.     xAxis: {
  25.         data: []
  26.     },
  27.     yAxis: {},
  28.     series: [{
  29.         name: '销量',
  30.         type: 'bar',
  31.         data: []
  32.     }]
  33. });
  34. myChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画
  35. var names = []; // 类别数组（实际用来盛放X轴坐标值）
  36. var nums = []; // 销量数组（实际用来盛放Y坐标值）
  37. $.ajax({
  38.     type: "post",
  39.     async: true,
  40.     // 异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
  41.     url: "file_ashx/Czmj.ashx",
  42.     // 请求发送到TestServlet处
  43.     data: {},
  44.     dataType: "json",
  45.     // 返回数据形式为json
  46.     success: function(result) {
  47.         // 请求成功时执行该函数内容，result即为服务器返回的json对象
  48.         if (result) {
  49.             for (var i = 0; i < result.length; i++) {
  50.                 names.push(result[i].scabbr); // 挨个取出类别并填入类别数组
  51.             }
  52.             for (var i = 0; i < result.length; i++) {
  53.                 nums.push(result[i].je1); // 挨个取出销量并填入销量数组
  54.             }
  55.             myChart.hideLoading(); // 隐藏加载动画
  56.             myChart.setOption({ // 加载数据图表
  57.                 xAxis: {
  58.                     data: names
  59.                 },
  60.                 series: [{
  61.                     // 根据名字对应到相应的系列
  62.                     name: '销量',
  63.                     data: nums
  64.                 }]
  65.             });
  66.         }
  67.     },
  68.     error: function(errorMsg) {
  69.         // 请求失败时执行该函数
  70.         alert("图表请求数据失败!");
  71.         myChart.hideLoading();
  72.     }
  73. })
  74. </script>
  75. </body>
  77. </html>

参考资料

Echarts怎么用后台传来的json数据的更多相关文章

  1. 通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  2. Highcharts接收后台传来的json对象值无法显示

    在highcharts接收后台传来的json对象网上已经有很多的介绍,在此不多做说明,这里想记录一笔的是在接收的json解析后的value值是String类型的,而highcharts里的data数组 ...

  3. Ajax处理后台返回的Json数据

    // 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...

  4. c# 动态获取http通过post传来的json数据

    //获取http通过post传来的json数据 using Newtonsoft.Json; public HttpResponseMessage Query() { var request=Syst ...

  5. 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据，并解析Json数据，将前台传来的Json数据写入数据库表中

      先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...

  6. PHP+MySQL+Easyui tree菜单从后台加载json数据(一)

    实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...

  7. ajax传递json数据，springmvc后台就收json数据

    1.ajax数据的封装 var json = {"token":token};//封装json数据 $.ajax({ url:'', data:JSON.stringify(jso ...

  8. ajax获取后台传递的json数据

      最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...

  9. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

随机推荐

  1. 下载网页视频音频方法（djyeye为例）

    方法一: 三步操作: 选择media即可. m4a即为音频实际地址. 方法二: 方法三: 遨游浏览器 感谢知乎 https://www.zhihu.com/question/26938393

  2. 「Python」socket指南

    开始 网络中的 Socket 和 Socket API 是用来跨网络的消息传送的,它提供了 进程间通信(IPC) 的一种形式.网络可以是逻辑的.本地的电脑网络,或者是可以物理连接到外网的网络,并且可以 ...

  3. Dozer 对象的"搬运工"

    前言:项目中,经常会遇到各层对象之间相互进行值传递的过程,如在数据据持久层有一持久类EntityA,在视图层可能会变为ViewA,通常情况下,这两个类的属性 名称 .类型都是一致的,   在两个对象传 ...

  4. 认识单点登录cas

    么是单点登录?单点登录全称Single Sign On(以下简称SSO),是指在多系统应用群中登录一个系统,便可在其他所有系统中得到授权而无需再次登录,包括单点登录与单点注销两部分 1.登录 相比于单 ...

  5. android内存回收顺序

    最近做项目的时候,经常会考虑到系统回收进程,释放资源等问题.特别查找了相关资料,了解下android内存回收顺序以及回收场景. 下面内容都为网络查找资料,若有错误,欢迎指出. 以下顺序,依次被回收的可 ...

  6. CRF++进行中文分词实例

    工具包:https://taku910.github.io/crfpp/#tips 语料:http://sighan.cs.uchicago.edu/bakeoff2005/ 安装: 1)下载linu ...

  7. NASA: A Closer View of the Moon（近距离观察月球）

    Posted to Twitter by @Astro_Alex, European Space Agency astronaut Alexander Gerst, this image shows ...

  8. Django【进阶】modelform

    modelform:models+form   建议尽量用Djangoform,更灵活,但也有人用modelform,写起来很简单 缺点,在models里面,表模型必须有__str__()方法 可添加 ...

  9. Codeforces Round #502

    Codeforces Round #502 C. The Phone Number 题目描述:求一个\(n\)排列,满足\(LIS+LDS\)最小 solution 枚举\(LIS\),可证明\(LD ...

  10. UVA题解三

    UVA题解三 UVA 127 题目描述:\(52\)张扑克牌排成一列,如果一张牌的花色或者数字与左边第一列的最上面的牌相同,则将这张牌移到左边第一列的最上面,如果一张牌的花色或者数字与左边第三列的最上 ...