echart+html 云南省地图
效果图
需要文件
地图json:地图json https://datav.aliyun.com/portal/school/atlas/area_selector
echart:https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
代码
<!DOCTYPE html>
<html style="height: 100%" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8"/>
<title>云南省地图</title>
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="width: 900px;height:600px;background-color: black;"></div>
<script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="./js/yunnan.js"></script>
<script type="text/javascript">
var mapJson = "./js/yunnan.json";
var myChart = echarts.init(document.getElementById('main'))
myChart.showLoading();
$.getJSON(mapJson, function(geoJson) {
echarts.registerMap('yunnan', geoJson);
myChart.hideLoading();
option = {
title: {
top: 30,
text: '云南省地图',
x: 'center',
textStyle: {
color: '#fff',
fontSize: 12,
}
},
visualMap: {
show: false,
min: 0,
max: 100,
inRange: {
color: ['red', 'blue'],
},
},
geo: {
map: "yunnan",
aspectScale: 0.75, // 长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.2,
y: 0.2,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(15, 41, 77, 0.10)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(89, 127, 178,0.3)', // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
shadowColor: '#87DEFF',
borderColor: 'transparent',
shadowOffsetX: 10,
shadowOffsetY: 15,
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'green',
label: {
show: false,
},
},
},
},
series: [{
// 上面覆盖的地图配置
type: 'map',
roam: false,
label: {
show: true,
color: '#FFFFFF',
fontSize: 13,
fontWeight: 300
},
itemStyle: {
normal: {
borderColor: 'rgba(53, 157, 178, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(15, 41, 77, 0.50)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(53, 157, 178, 0.5)', // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(51, 137, 255, 0.50)',
label: {
color: '#fff',
},
borderColor: 'rgb(255,255,255,0.4)',
// shadowColor: 'rgb(12,25,50)',
borderWidth: 1,
},
},
zoom: 1.1,
map: "yunnan", // 使用
}],
}
myChart.setOption(option, true);
});
</script>
</body>
</html>