怎么从JSON获取数据到Echart制作饼图

afen888 发布于 2015/09/21 14:27
阅读 4K+
收藏 0

我从JSON获取数据制作的饼图,不显示,下面是我的代码:

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<title></title>
</head>


<body>
<div id="rp2-l-top" style="width: 29%;height:200px;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<!--以下为line-->
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie',
],
function line(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('rp2-l-top'));
var option = ""; //先定义option,后填充,定义的数据为空,
//异步调用表格数据使用$.ajax
$.ajax({
type: "get",
url: "http://devapi.jiaj.com.cn:8080/jiajian-service/api/v1/report/user/summary", //调用地址
data: "",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
//调用成功后执行下面的数据
success: function(data) {
var xzhou = [];
var c_doctor = [];//社区箬医生
var c_family = [];//社区家庭
var Specialist = [];//专科医生
var total = [];
//定义for循环,用于获取data数据
for (var x = 1; x < data.length; x++) { //
xzhou.push(data[x].date); //为X轴填充X轴的数据为'日期'
c_doctor.push(data[x].generalPractitionerRegistrationCount); 
c_family.push(data[x].familyRegistrationCount); 
Specialist.push(data[x].specialistPractitionerRegistrationCount);
total.push(data[x].generalPractitionerRegistrationCount+data[x].familyRegistrationCount+data[x].specialistPractitionerRegistrationCount); //和
}
//填充option数据
option = {
title : {
       text: '用户量统计',
       subtext: '总数':
       "data": total,
       x:'center'
   },
   tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   legend: {
       orient : 'vertical',
       x : 'left',
       data:['社区医生', '社区家庭', '专科医生']
   },
   calculable : true,
   series: [{
//
"name": "社区医生",
"type": "pie",
"radius" : "55%",
            "center": ["50%", 225],
"data": c_doctor 
},
//
{
"name": "社区家庭",
"type": "pie",
"radius" : "55%",
            "center": ["50%", 225],
"data": c_family 
},
//
{
"name": "专科医生",
"type": "pie",
"radius" : "55%",
            "center": ["50%", 225],
"data": Specialist
}
           
   ]
};
// 为echarts对象加载数据 
myChart.setOption(option);
},
error: function(xhr) {
var msg = JSON.stringify(xhr);
},
});
}
);
</script>
</body>


</html>

加载中
0
afen888
afen888

这个问题解决了,下面是解决的代码:

饼图的数据获取的值为value,示例代码为:data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}]

我解决的代码是   value:{data[0].generalPractitionerRegistrationCount}获取到第一行值为generalPractitionerRegistrationCount
 

返回顶部
顶部