第十二 饼图标注

效果

 右侧代码链接:

第十一节统计图+列表-CSDN博客

 数据结构

getCountryPriceRange: {
	"msg": "操作成功",
	"total": 54,
	"flag": true,
	"rows": [{
		"code": "06",
		"latitude": "122.868277704",
		"name": "名称",
		"projectpricesection": "[{\"name\":\"0\",\"value\":0},{\"name\":\"0\",\"value\":0},{\"name\":\"0\",\"value\":1},{\"name\":\"0\",\"value\":0},{\"name\":\"0\",\"value\":2},{\"name\":\"0\",\"value\":0}]",
		"longitude": "11.7391506519"
	}, {
		"code": "09",
		"latitude": "104.921349515",
		"name": "名称",
		"projectpricesection": "[{\"name\":\"小于\",\"value\":1},{\"name\":\"500\",\"value\":0},{\"name\":\"1000\",\"value\":3},{\"name\":\"5\",\"value\":0},{\"name\":\"1亿\",\"value\":1},{\"name\":\"5亿\",\"value\":0}]",
		"longitude": "12.7074563632"
	}],
	"status": "C00000"
},

1.初始化方法

2.查数据

根据条件查数据

top1Click: function() {
		ak_nav.clearAll();
		$("#main_select_box3").css('display', 'flex'); // 显示变量框
 
		var temp = {};
		var sgzt_type3 = localStorage.getItem('sgzt_type3');
		if (sgzt_type3 == 1) {
			var projectStatus = akglobe_config.underConstruction;
			if (projectStatus) {
				projectStatus = projectStatus.join("','");
				projectStatus = "'" + projectStatus + "'";
			}
			temp.projectstatus = projectStatus;
		} else if (sgzt_type3 == 2) {
			var year = (new Date).getFullYear();
			temp.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime());
			temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime());
		}
		var options = new Object();
		options.url = "/manage-api/getCountryPriceRange";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		 
		 options.callback = function(data) {
			 ak_left_click2.top1CallBack(data.rows,2);
			 ak_right_pie_money_all.init();
		 }
		
		 // 如果是测试环境 使用假数据
		 if(typep002==2){
			   ak_left_click2.top1CallBack(ak_ztqg.getCountryPriceRange.rows,2);
			   ak_right_pie_money_all.init();
		 }else{
			akglobe_config.ajaxQuery(options);
		 }
		 
	},

3.获取到数据后判断

有的地图上不止饼图还有水滴图等统计方式,需要判断这个是要用什么统计标注

top1CallBack: function(data, type) {
		var DEFAULT_STYLE22 = {
			position: "absolute",
			top: "0",
			left: "0",
			width: "120px",
			height: "120px"
		};
		var result = data; // config.demodata_Department;
		for (var i = 0; i < result.length; i++) {
			var db = result[i];
			var name = db.name;
			var obj = new Object();
			obj.name = db.name;
			// obj.address = db.address;
			obj.lat = db.latitude;
			obj.lng = db.longitude;
			if (db.latitude > 1000) {
				continue
			}
			if (db.longitude > 1000) {
				continue
			}
			obj.code = db.code;
			var projectpricesection = JSON.parse(db.projectpricesection);
	 
			obj.projectpricesection = projectpricesection;
			var position = new Cesium.Cartesian3.fromDegrees(obj.lat, obj.lng, 60);
			var options = new Object();
			options.style = DEFAULT_STYLE22;
			var divicon = new DivIcon(viewer, position, obj.name);
		 

			var DEFAULT_STYLE223 = {
				position: "absolute",
				top: "0",
				left: "0",
				width: "25px",
				height: "25px"
			};
			divicon.setStyle(DEFAULT_STYLE223);
			var dbs = 0.53 * i;
			if (dbs > 1) {
				dbs = dbs / 3;
			}
			if (dbs > 1) {
				dbs = dbs / 3;
			}
			obj.value = dbs; //  parseflot 
			var objcharts = new Object();
			objcharts.divicon = divicon;
			objcharts.obj = obj; //  对象
			//  去不同的  统计图  
			if (type == 1) {
				this.addEcharts(objcharts); // 水滴
			} else if (type == 2) { // 饼图
				this.addEchartsPieMoney(objcharts);
			} else if (type == 3) { //仪表盘
				this.addEchartsYbp(objcharts);
			}

			this.arrCharts1.push(divicon);
		}
	},

4.渲染饼图标注

addEchartsPieMoney: function(objcharts) {
		var obj = objcharts.obj;
		var divicon = objcharts.divicon;
		var value = obj.value; // 这里应该是实际的数组

		var myChart = echarts.init(divicon._delegate);
		var bgColor = '#E3F7FF';
		// 指定图表的配置项和数据
		var option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c}  ({d}%)',
				position: 'right',
				extraCssText: "z-index:999"
			},
			series: [{
				name: objcharts.obj.name,
				type: 'pie',
				// radius: '55%',
				radius: '95%',
				color: config.pieColor,
				center: ['50%', '50%'],
				data: obj.projectpricesection,
				label: {
					normal: {
						show: false,
						position: 'inner'
					}
				},
				minAngle: 0,	// 最小角度
				// roseType: 'angle',
				itemStyle: {
					// normal: {
					// 	shadowBlur: 200,
					// 	shadowColor: 'rgba(0, 0, 0, 0.5)'
					// }

					label: {
						// show:true,
						// formatter:'{d}%'
						show: true,
						formatter: function(val) { //让series 中的文字进行换行
							return val.name.split(" ").join("\n");
						},
						rich: {
							// 这个'value'样式表示文字颜色为白色
							dark: {
								color: '#000',
							}
						}
					},
					labelLine: {
						show: true,
						length: 2,
						color: ['#00a3db', '#f7c024', '#d7eff5', '#ffdd19', '#eb8d2d',
							'#6bc7e6'
						],
					},
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					},


				}
			}]
		};

		myChart.setOption(option);

		var canvas = divicon._delegate.childNodes[0].childNodes[0];
		canvas.onclick = function(e) {
			console.log(e);
			console.log(value);
			console.log(obj);
			// alert('我被点击了' + value + JSON.stringify(obj));
			// ak_right_pie.init();
			ak_right_pie_money.init(obj);
		}

	},

饼图的颜色是用变量配置的

color: config.pieColor,

pieColor: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],

 以下代码是当饼图被点击后的事件

var canvas = divicon._delegate.childNodes[0].childNodes[0];
        canvas.onclick = function(e) {
            console.log(e);
            console.log(value);
            console.log(obj);
            ak_right_pie_money.init(obj);
        }