echarts河南省地图json文字居中，鼠标悬浮显示
super
2023-12-05 15:28
1116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="map" style="width: 100%;height: 500px">
</div>
<script src="jquery.min.js"></script>
<script src="echarts5.4.1.min.js"></script>
<script>
var mapOption = {
tooltip: {
show: true //鼠标经过提示
},
visualMap: {
show: false,
min:10,
max: 50, //控制根据返回值 控制数量
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#0062cd', '#093EE5', '#0B33A9'] //显示颜色
}
},
bmap: {},
series: [{
name: '数量',
layoutCenter: ['50%', '50%'],
layoutSize: '80%',
aspectScale: 1,
type: 'map',
mapType: 'henan', // 自定义扩展图表类型
zoom: 1.4,
label: {
show: true,
normal: {
show: true,
textStyle: {
fontSize: 12,
fontWeight: 'normal',
color: '#fff',
fontFamily: 'Microsoft YaHei',
}
},
emphasis: {
show: true,
color: '#fff',
},
},
itemStyle: {
normal: {
areaColor: "#0062CD", //改变地图里面的颜色
borderColor: '#91CCF0',//边框颜色
borderWidth: 1.5,//边框宽度
shadowColor: '#093493',
shadowBlur: 2,
opacity: 1,
label: {
show: true,
}
},
},
data: [{
name: '郑州',
value: 150,
}, {
name: '洛阳',
value: 117
}, {
name: '开封',
value: 53
}, {
name: '信阳',
value: 123
}, {
name: '驻马店',
value: 135
}, {
name: '南阳',
value: 128
}, {
name: '周口',
value: 151
}, {
name: '许昌',
value: 17
}, {
name: '平顶山',
value: 33
}, {
name: '新乡',
value: 0
}, {
name: '漯河',
value: 63
}, {
name: '商丘',
value: 21
}, {
name: '三门峡',
value: 22
}, {
name: '济源',
value: 49
}, {
name: '焦作',
value: 27
}, {
name: '安阳',
value: 2
}, {
name: '鹤壁',
value: 0
}, {
name: '濮阳',
value: 35
}, {
name: '开封',
value: 53
}],
},
// {
// name: 'Top 5',
// type: 'effectScatter',
// coordinateSystem: 'bmap',
// data: convertData(data.sort(function(a, b) {
// return b.value - a.value;
// }).slice(0, 6)),
// data: pointData,
// symbolSize: function(val) {
// return val[2] / 10;
// },
// showEffectOn: 'emphasis',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// label: {
// formatter: '{b}',
// position: 'right',
// show: true
// },
// itemStyle: {
// color: '#f4e925',
// shadowBlur: 10,
// shadowColor: 'red'
// },
// zlevel: 1
// },
],
};
$.getJSON('./henan.json', function(csJson) { //引入你需要绘画的地图json表
echarts.registerMap('henan', csJson);
var myEcharts = echarts.init(document.getElementById("map"))
myEcharts.setOption(mapOption)
});
</script>
</body>
</html>
需要json文件，联系微信 feimao7210, 5元/份，另有各省json数据，欢迎咨询
0 条讨论
