echarts使用ajax接收json数据完成南丁格尔玫瑰图
首先从官网上找到南丁格尔玫瑰图的源码
官网链接->https://echarts.baidu.com/examples/editor.html?c=pie-custom修改后可以正确运行的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE;">
<title>RoseEcharts-JSON请求数据</title>
<script src="js/echarts.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
var chart = document.getElementById('chart');
var chartData = echarts.init(chart);
chartData.setOption({
backgroundColor: '#2c343c',
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
//修改
data:[],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
var jsondatas = [];
$.ajax({
type:'get',
url:'roseechartsjsondata.json',
dataType:"json",
success:function(result){
console.log("result",result);
for(var x=0;x<result.list.length;x++)
{
jsondatas.push(result.list[x]);
}
console.log("jsondatas",jsondatas);
chartData.setOption({
series:[{
name: '访问来源',
data:jsondatas
}]
});
},
error : function(errorMsg) {
}
});
});
</script>
</head>
<body>
<div id="chart" style="width: 1000px; height: 400px;"></div>
</body>
</html>
json数据如下：
{“list”:
[{“value”:235, “name”:“视频广告”},
{“value”:274, “name”:“联盟广告”},
{“value”:310, “name”:“邮件营销”},
{“value”:335, “name”:“直接访问”},
{“value”:400, “name”:“搜索引擎”}]
}
要注意的是，饼图里的数据，value和name是数组中的一组，最好不要分开存；以及将传进来的json数据push进jsondatas时，别忘记了数据前有个list。
结果图和官网相同：