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

最新推荐文章于 2024-05-15 14:53:08 发布

烧烤平底锅

最新推荐文章于 2024-05-15 14:53:08 发布

阅读量9.2k

点赞数 6

后台数据是[{"name":"任务A"，"num":"123"},{"name":"任务B"，"num":"123"},······]，那么Echarts怎么用这些数据，变为横坐标是name ，纵坐标是num？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

<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>

烧烤平底锅

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Echarts怎么用后台传来的json数据？

后台数据是[{"name":"任务A"，"num":"123"},{"name":"任务B"，"num":"123"},······]，那么Echarts怎么用这些数据，变为横坐标是name ，纵坐标是num？&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
复制链接

扫一扫