echarts使用ajax接收json数据完成南丁格尔玫瑰图

蔚落 2022-03-17 16:40 300阅读 0赞

首先从官网上找到南丁格尔玫瑰图的源码  
官网链接->[https://echarts.baidu.com/examples/editor.html?c=pie-custom][https_echarts.baidu.com_examples_editor.html_c_pie-custom]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JnZ2dsYnk_size_16_color_FFFFFF_t_70]修改后可以正确运行的代码如下：

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

结果图和官网相同：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JnZ2dsYnk_size_16_color_FFFFFF_t_70 1]

[https_echarts.baidu.com_examples_editor.html_c_pie-custom]: https://echarts.baidu.com/examples/editor.html?c=pie-custom
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JnZ2dsYnk_size_16_color_FFFFFF_t_70]: /images/20220317/11e7c4a24dc14c72a4f7251ab7895e11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JnZ2dsYnk_size_16_color_FFFFFF_t_70 1]: /images/20220317/155f0fa20d7340c3956556c41d98bc50.png