效果：
1：引入echarts的官方JS：上手echarts文档
使用示例：
2：配套你的地图json用这个，但是只到区：阿里云地图json选择器
使用示例：
3：（1）推荐一个可以精确到镇街的地图选择器：BigeMap
使用示例：
（2）：geojson地图json展示
导入你哥哥刚刚保存的地图文件，就可以得到一块块的地图展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="main" style="width: 100%; height: 400px;"></div>
</body>
<script src="./js/map.js" type="text/javascript" charset="utf-8"></script>
</html>
// 基于准备好的dom，初始化echarts实例
var mapcharts = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
mapcharts.showLoading();
// $.get('js/mapData.json', function(geoJson) {
$.get('https://geo.datav.aliyun.com/areas_v2/bound/330100_full.json', function(geoJson) {
console.log(geoJson);
mapcharts.hideLoading();
echarts.registerMap('Sy', geoJson);
mapcharts.setOption(option = {
title: {
text: '杭州市回收率分布统计',
subtext: '数据来自睿管理后台实时统计',
sublink: ''
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (户)'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#FFFFFF', 'yellow', 'green']
}
},
series: [{
name: '地图显示',
type: 'map',
mapType: 'Sy', // 自定义扩展图表类型
label: {
normal:{
show:true
}
},
data: [{
name: '临安区',
value: 20057,
},
{
name: '桐庐县',
value: 12254
},
{
name: '淳安县',
value: 316
},
{
name: '建德市',
value: 622
},
{
name: '富阳区',
value: 42224
},
{
name: '萧山区',
value: 406
},
{
name: '江干区',
value: 37659
},
{
name: '西湖区',
value: 42518
},
{
name: '滨江区',
value: 55230
},
{
name: '下城区',
value: 219
},
{
name: '余杭区',
value: 4918
},
{
name: '拱墅区',
value: 5881
},
{
name: '上城区',
value: 22222
},
],
// 自定义名称映射
nameMap: {
'Central and Western': '临安区',
'Eastern': '拱墅区',
'Islands': '上城区',
'Kowloon City': '余杭区',
'Kwai Tsing': '下城区',
'Kwun Tong': '滨江区',
'North': '西湖区',
'Sai Kung': '江干区',
'Sha Tin': '萧山区',
'Sham Shui Po': '临安区',
'Southern': '桐庐县',
'Tai Po': '淳安县',
'Tsuen Wan': '建德市',
}
}]
});
});
版权声明：本文为qq_42453562原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。