您好,欢迎访问本站博客! 控制台  查看权限
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 网站所有资源均来自网络,如有侵权请联系站长删除!

Echarts 地图上面展示饼图信息

默认分类 Sena 2019-11-29 13 次浏览 0个评论

image.png


后续进行美化, 先上代码, 其实就是把地图经纬度转为X/Y坐标。

// 品牌优势-区域分布
	me.initEcharts2 = function() {
		var myChart = echarts.init(document.getElementById('echarts2'), 'light');
		$.get('../json/chengdu5city.json', function(geoJson) {
			echarts.registerMap('CD', geoJson);
			myChart.setOption(option = {
				title : {
					text : '城市配送物流区域分布',
					x : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : function(params, ticket, callback) {
						return params.value * "100000";
					}
				},
				toolbox : {
					show : true,
					orient : 'vertical',
					left : 'right',
					top : 'center',
					feature : {
						dataView : {
							readOnly : false
						},
						restore : {},
						saveAsImage : {}
					}
				},
				visualMap : {
					min : 0,
					max : 13,
					text : [ 'High', 'Low' ],
					realtime : false,
					calculable : true,
					inRange : {
						color : [ 'lightskyblue', 'yellow', 'orangered' ]
					}
				},
				series : [ {
					name : '香港18区人口密度',
					type : 'map',
					mapType : 'CD', // 自定义扩展图表类型
					itemStyle : {
						normal : {
							label : {
								show : true
							}
						},
						emphasis : {
							label : {
								show : true
							}
						}
					},
					data : [ {
						name : '锦江区',
						value : 0.0005116
					}, {
						name : '青羊区',
						value : 0.0006116
					}, {
						name : '金牛区',
						value : 0.000517583
					}, {
						name : '武侯区',
						value : 0.000416583
					}, {
						name : '成华区',
						value : 0.000711583
					} ]
				} ]
			});

			setTimeout(function() {
				myChart.setOption({
					series : getPieSeries(scatterData(), myChart)
				});
			}, 10);
		});
	}

	var scatterData = function getVirtulData() {
		var data = [ {
			name : '锦江区',
			value : 0.00012358 * 100000
		}, {
			name : '青羊区',
			value : 0.00012358 * 100000
		}, {
			name : '金牛区',
			value : 0.00012358 * 100000
		}, {
			name : '武侯区',
			value : 0.00012358 * 100000
		}, {
			name : '成华区',
			value : 0.00012358 * 100000
		} ];
		return data;
	}

	function getPieSeries(scatterData, chart) {
		return echarts.util.map(scatterData, function(item, index) {
			var center = chart.convertToPixel({
				seriesIndex : 0
			}, [ 104.153987825, 30.740483625 ]);
			console.log(center);
			return {
				id : index + 'pie',
				type : 'pie',
				center : center,
				label : {
					normal : {
						formatter : '{c}',
						position : 'inside'
					}
				},
				radius : 50,
				data : [ {
					name : '工作',
					value : Math.round(Math.random() * 24)
				}, {
					name : '娱乐',
					value : Math.round(Math.random() * 24)
				}, {
					name : '睡觉',
					value : Math.round(Math.random() * 24)
				} ]
			};
		});
	}


已有 13 位网友参与,快来吐槽:

发表评论