ECharts南丁格尔玫瑰图 + Ajax 动态展示

ECharts南丁格尔玫瑰图 + Ajax 动态展示

---

不说太多话——直接上菜

首先引用 echarts 的 js

<script src="echarts/echarts.js"></script>

在页面设置 div 不要忘记设置宽高

#main {
          width: 660px;
            height: 500px;
}
<div id="main" ></div>

准备好了 正式开始

 <script type="text/javascript">
    	var demolist= {};
    	$(document).ready(function() {
    	// 基于准备好的dom，初始化echarts实例
    	demolist.myChart = echarts.init(document.getElementById('main'));
    	// 指定图表的配置项和数据
    	option = {
    		    title : {
    		        text: '南丁格尔玫瑰图',
    		        x:'center'
    		    },
    		    tooltip : {
    		        trigger: 'item',
    		        formatter: "{a} <br/>{b} : {c} ({d}%)"
    		    },
    		    legend: {
    		        x : 'center',
    		        y : 'bottom',
    		        data:[]
    		    },
    		    toolbox: {
    		        show : true,
    		        feature : {
    		            mark : {show: true},
    		            dataView : {show: true, readOnly: false},
    		            magicType : {
    		                show: true,
    		                type: ['pie', 'funnel']
    		            },
    		            restore : {show: true},
    		            saveAsImage : {show: true}
    		        }
    		    },
    		    calculable : true,
    		    series : [
    		        {
    		            name:'面积模式',
    		            type:'pie',
    					//调节图形大小
    		            radius : [50, 150],
    		            roseType : 'area',
    		            data:[
    		                {value:[], name:[]}
    		            ]
    		        }
    		    ]
    		};
    	
    	// 使用刚指定的配置项和数据显示图表。
    	demolist.myChart.setOption(option);
    	demolist.demoSList(); 
    	});
    	//ajax刷新ecahrts数据
    	demolist.followSList = function() {
    		demolist.myChart.showLoading({
    		    effect : 'ring'
    		});
    		$.ajax({
    			type : "post",
    			async : true,
    			url : "demo/list",
    			data : {
    				"label":$('#label').val(),
    				"value":$('#value').val()
    			},
    			dataType : "json",
    			success : function(result) {
    				demolist.myChart.hideLoading();
    				demolist.setEchartsValue(result,demolist.myChart);
    				myMask3.remove();
    			}
    		});
    	}
    	
    	/**
    	*	计算echarts结果数据
    	*	result 后台ajax返回的结果      obj：echarts对象
    	*/
    	demolist.setEchartsValue=function(result,obj){
    		var label = [];
    		var value = [];
    		
    		if (result) {
    			var ytotal = 0;
    			for (var i = 0; i < result.length; i++) {
    				label.push(result[i].label);
    				value.push(result[i].value);
    			}
    			obj.setOption({	
    				legend: {
    			        x : 'center',
    			        y : 'bottom',
    			        data:label
    			    },
    			    series : [
    			        {
    			            name:'面积模式',
    			            type:'pie',
    			            radius : [50, 150],
    			            roseType : 'area',
    			            data:(function(){
    			            	var res = [];
    		                    var len = result.length;
    		                        for(var i=0,size=len;i<size;i++) {
    		                         res.push({
    		                             //通过把result进行遍历循环来获取数据并放入Echarts中
    		                             name: result[i].label,
    		                             value: result[i].value
    		                         });
    		                        }
    		                        return res;
    		                })()
    			        }
    			    ]
    		});
    		}
    	}
    </script>

---

成果图