对公长尾客户掘金云平台项目,需要展示厦门市地图,显示数据分布方式
<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";
}
});
});