web端使用百度ECHARTS动态从服务器获取数据显示在扇形图中

效果图
在这里插入图片描述
具体实现:
先引入js文件

<script src="js/echarts.min.js"></script>
var province=new Array();
		for( var i=0;i<34;i++){
			province[i]=new Array();
			province[i][1] = 0;
	    	province[i][2] = 0; 
		}
		province[0][0]=11;province[1][0]=12;province[2][0]=13;province[3][0]=14;province[4][0]=15;
		province[5][0]=21;province[6][0]=22;province[7][0]=23;province[8][0]=31;province[9][0]=32;
		province[10][0]=33;province[11][0]=34;province[12][0]=35;province[13][0]=36;province[14][0]=37;
		province[15][0]=41;province[16][0]=42;province[17][0]=43;province[18][0]=44;province[19][0]=45;
		province[20][0]=46;province[21][0]=50;province[22][0]=51;province[23][0]=52;province[24][0]=53;
		province[25][0]=54;province[26][0]=61;province[27][0]=62;province[28][0]=63;province[29][0]=64;
		province[30][0]=65;province[31][0]=71;province[32][0]=81;province[33][0]=82;
		province[0][3]='北京市'; province[1][3]='天津市'; province[2][3]='河北省'; province[3][3]='山西省'; province[4][3]='内蒙古自治区';
		province[5][3]='辽宁省'; province[6][3]='吉林省'; province[7][3]='黑龙江省'; province[8][3]='上海市'; province[9][3]='江苏省';
		province[10][3]='浙江省'; province[11][3]='安徽省'; province[12][3]='福建省'; province[13][3]='江西省'; province[14][3]='山东省';
		province[15][3]='河南省'; province[16][3]='湖北省'; province[17][3]='湖南省'; province[18][3]='广东省'; province[19][3]='广西壮族自治区';
		province[20][3]='海南省'; province[21][3]='重庆市'; province[22][3]='四川省'; province[23][3]='贵州省'; province[24][3]='云南省';
		province[25][3]='西藏自治区'; province[26][3]='陕西省'; province[27][3]='甘肃省'; province[28][3]='青海省'; province[29][3]='宁夏回族自治区';
		province[30][3]='新疆维吾尔自治区'; province[31][3]='台湾省'; province[32][3]='香港特别行政区'; province[33][3]='澳门特别行政区';
		function findSendCount(){
	    	$.ajax({
    	        url: "http://IP地址:8080/项目名/REST/Domain/getExpressList",
    	        type: "get",
    	        dataType: "json",
    	        async:false,
    	        success: function(data){ 	           
    	            setCount(data);  
    	        },
    	        error: function(msg){
    	            alert("ajax连接异常");
    	        }
    	    });
	    }
	    function setCount(data){
	    	var i;
	    	var j;
	    	for(i=0;i<data.length;i++){
	    		sendstr=data[i].sender.regionCode.toString();
	    		receivestr=data[i].recever.regionCode.toString();
	    		for(j=0;j<34;j++){
	    			if(province[j][0]==sendstr.slice(0,2)){
	    				province[j][1]++;
	    				//alert(j+"+++");
	    			}
	    			if(province[j][0]==receivestr.slice(0,2)){
	    				province[j][2]++;
	    			}
	    		}
	    	}
	    	addData();
	    	
	    }
	    function addData(){
	    	var a=0;var b=0;
	    	for(i=0;i<34;i++){
	    		if(province[i][1]!=0){
	    			var value=province[i][1];
	    			var name=province[i][3];
					value1[a++]={value: value,name:name};
	    		}
	    		if(province[i][2]!=0){
	    			value2[b++]={value: province[i][2],name:province[i][3]};
	                //alert(value2[b-1].name+"+"+value2[b-1].value);
	    		}
	    	}
	    	show();
	    }
	    function show(){
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				
				option = null;
				option = {
				    title: {
				        text: '地区寄件收件统计',
				        subtext: '以省为单位',
				        left: 'center'
				    },  
				    tooltip: {
				        trigger: 'item',
				        formatter: '{a} <br/>{b} : {c} ({d}%)'
				    }, 
	
					series: [
						{
							name: '地区寄件统计',
							type: 'pie',
							radius: [20, 110],
							center: ['25%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: value1
						},
				        {
				            name: '地区收件统计',
				            type: 'pie',
				            radius: [30, 110],
				            center: ['75%', '50%'],
				            roseType: 'area',
							label: {
				                show: false
				            },
				            emphasis: {
				                label: {
				                    show: true
				                }
				            },
				            data: value2
				        }
					]
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值