Echarts怎么用后台传来的json数据
Echarts怎么用后台传来的json数据
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
myChart.showLoading(); // 数据加载完之前先显示一段简单的loading动画
var names = []; // 类别数组(实际用来盛放X轴坐标值)
var nums = []; // 销量数组(实际用来盛放Y坐标值)
$.ajax({
type: "post",
async: true,
// 异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url: "file_ashx/Czmj.ashx",
// 请求发送到TestServlet处
data: {},
dataType: "json",
// 返回数据形式为json
success: function(result) {
// 请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].scabbr); // 挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].je1); // 挨个取出销量并填入销量数组
}
myChart.hideLoading(); // 隐藏加载动画
myChart.setOption({ // 加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
}
},
error: function(errorMsg) {
// 请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>
参考资料
Echarts怎么用后台传来的json数据的更多相关文章
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...
- Highcharts接收后台传来的json对象值无法显示
在highcharts接收后台传来的json对象网上已经有很多的介绍,在此不多做说明,这里想记录一笔的是在接收的json解析后的value值是String类型的,而highcharts里的data数组 ...
- Ajax处理后台返回的Json数据
// 处理后台传来的Json字符串装换成Json对象 var dataJson = JSON.parse(data); // 此时可以从Json对象中取值 if(dataJson.result == ...
- c# 动态获取http通过post传来的json数据
//获取http通过post传来的json数据 using Newtonsoft.Json; public HttpResponseMessage Query() { var request=Syst ...
- 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
先看一下我要实现的功能界面: 这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...
- PHP+MySQL+Easyui tree菜单从后台加载json数据(一)
实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...
- ajax传递json数据,springmvc后台就收json数据
1.ajax数据的封装 var json = {"token":token};//封装json数据 $.ajax({ url:'', data:JSON.stringify(jso ...
- ajax获取后台传递的json数据
最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简 ...
- ASP.NET前台table通过Ajax获取绑定后台查询的json数据
上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax J ...
随机推荐
- Lucene 查询分页技术
常用的Lucene查询代码如下所示,该代码的作用是将path路径下的所有索引信息返回 public String matchAll(String path) { try { Directory dir ...
- 关于IE浏览器输入框字体不兼容问题
当写完 input的text输入框后 IE里输入框字体偏上 那么有个简单的解决办法 就是设置行高line-height:Xpx\9;就可以解决 \9表示所有IE
- Eclipse中使用Maven创建项目 (转)
转自:http://www.gogogogo.me/development/eclipse-maven-webapp.html Apache Maven是一个优秀的项目构建和管理工具,许多 ...
- Codeforces 221 E. Little Elephant and Shifts
E. Little Elephant and Shifts time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- Codeforces 807 B T-Shirt Hunt
B. T-Shirt Hunt http://codeforces.com/problemset/problem/807/B time limit per test 2 seconds memory ...
- 数字配对(bzoj 4514)
Description 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对 ...
- 最小割dp Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E
http://codeforces.com/contest/724/problem/E 题目大意:有n个城市,每个城市有pi件商品,最多能出售si件商品,对于任意一队城市i,j,其中i<j,可以 ...
- 【IDEA】 Can't Update No tracked branch configured for branch master or the branch doesn't exist. To make your branch track a remote branch call, for example, git branch --set-upstream-to origin/master
IDEA点击GIT更新按钮时,报错如下: Can't UpdateNo tracked branch configured for branch master or the branch doesn' ...
- LintCode 190: Next Permutation
LintCode 190: Next Permutation 题目描述 给定一个若干整数的排列,给出按正数大小进行字典序从小到大排序后的下一个排列. 如果没有下一个排列,则输出字典序最小的序列. 样例 ...
- ECNA 2017
ECNA 2017 Abstract Art 题目描述:求\(n\)个多边形的面积并. solution 据说有模板. Craters 题目描述:给定\(n\)个圆,求凸包的周长. solution ...