对公长尾客户掘金云平台项目,需要展示厦门市地图,显示数据分布方式

<div class="el-box" id="pieMap"  style="height: 430px;"></div>

var pieMapdom = document.getElementById("pieMap");
var pieMap = echarts.init(pieMapdom);
$.get('http://blog.lxcss.com/case/dgcwjjpp/dist/js/350200.json', function(mapJson) {
	pieMap.showLoading();
	pieMap.hideLoading();
	echarts.registerMap('xiamen', mapJson);
	pieMapOpTion = {
		tooltip: {
			trigger: 'item',
			formatter: '{b}',
		},
		geo: {
			map: 'xiamen',
			roam: true,
			zoom: 1,
			label: {
				normal: {
					show: true,
					textStyle: {
						color: '#fff',
					},
				},
				emphasis: {
					textStyle: {
						color: '#fff',
					},
				},
			},
			itemStyle: {
				normal: {
					borderColor: '#163257',
					borderWidth: 1,
					areaColor: '#0066b3',
				},
				emphasis: {
					areaColor: '#1693f1',
					borderWidth: 0,
				},
			},
		},
		
		series: [{
			name: '厦门',
			type: 'map',
			geoIndex: 0,
			map: 'xiamen',
			roam: true,
			itemStyle: {
				// 地图板块区域的多边形 图形样式
				normal: {
					// 默认板块信息
					areaColor: '#0066b3',
					borderColor: '#0066b3',
				},
				emphasis: {
					// 高亮版板块信息
					areaColor: '#1693f1',
				},
			},
			zoom: 3,
			tooltip: {
				trigger: 'item',
				formatter: (p) => {
					let val = p.value;
					if (p.name == '南海诸岛') return;
					if (window.isNaN(val)) {
						val = 0;
					}
					let txtCon = "<div style='text-align:left'>" + p.name + ':' + val
						.toFixed(2) + '</div>';
					return txtCon;
				},
			},
			label: {
				normal: {
					show: false,
				},
				emphasis: {
					show: false,
				},
			},
			data: [{
					name: '同安区',
					value: 174.34
				},{
					name: '翔安区',
					value: 3574.34
				},{
					name: '集美区',
					value: 3574.34
				},{
					name: '海沧区',
					value: 2574.34
				},{
					name: '活里区',
					value: 2174.34
				},{
					name: '思明区',
					value:	374.34
				},
			]
		}, ],
	};
	pieMap.setOption(pieMapOpTion);
	pieMap.on('click', function (params) {
		console.log(params);
		if(params.dataIndex == 5){
			window.location.href="驾驶舱2.html";
		}
	});

});

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注