echarts绘制地图,包含世界地图和中国详细地图，包含中国详细的省份地图，很详细，很好用，自己手机的两套自用的
2022-07-24 15:59:24
30.48MB
1
北京地图Json文件，包含区的Geo文件、用Echarts的可以改造制作市地图下钻，市级地图，北京地图Json文件
2022-04-08 15:37:01
100KB
1
function getGzMap(_data) {
if (_chinaMap == undefined) {
var dom = document.getElementById("container");
_chinaMap = echarts.init(dom);
_chinaMap.on('click', function(params) {
console.log(params);
var _type = params.seriesType;
if (_type == "map") {
//window.parent.aaa('aa') //调用父页面方法
} else if (_type == "effectScatter") {
window.parent.showMap();
}
})
}
var option = {
backgroundColor: 'rgba(0,0,0,0)',
visualMap: {
type: 'piecewise',
show: false,
min: 0,
max: 300,
splitNumber: 3,
itemWidth: 10,
itemHeight: 10,
itemGap: 5,
seriesIndex: [1],
pieces: [
{ min: 0, max: 100, label: '优' },
{ min: 101, max: 200, label: '良' },
{ min: 201, max: 300, label: '高风险' }
],
//color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄
color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿
textStyle: {
color: '#9EA8B1',
fontSize: 10
}
},
tooltip: {
formatter: '{b}'
},
geo: {
map: 'guangdong',
roam: true,
aspectScale: 1,
zoom: 1.5,
layoutCenter: ['55%', '40%'],
layoutSize: 500,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111',
borderColor: '#3BB4DF',
shadowColor: '#25A3FC',
shadowBlur: 10
},
emphasis: {
areaColor: '#ddb926'
}
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: unitData,
symbolSize: 10,
symbol: 'image://../../../../Content/images/One/fire.png',
//symbolRotate: 35,
rippleEffect: {
period: 4,
scale: 5,
brushType: 'fill',
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
name: '',
type: 'map',
geoIndex: 0,
mapType: 'guangdong', // 自定义扩展图表类型
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
label: {
show: true,
fontSize: 10,
color: '#111'
},
shadowColor: '#ddb926',
shadowBlur: 5,
},
emphasis: {
label: { show: true },
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
},
data: _data
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
data: windData,
symbolSize: 10,
symbol: 'image://../../../../Content/images/One/wind.png',
//symbolRotate: 35,
rippleEffect: {
period: 4,
scale: 5,
brushType: 'fill',
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
]
};
$.getJSON('../../MapCN/guangdong.json', function(chinaJson) {
echarts.registerMap('guangdong', chinaJson);
_chinaMap.setOption(option, true);
});
}
2022-03-28 14:04:26
4.71MB
1
直接放到echarts 里可以绘制贵州省地图,有需要画地图的小伙伴可以下载使用，亲测有效哦，当然主要是自己使用
2022-03-24 10:55:38
70KB
1