echarts结合阿里云地图json选择器展示地图
效果： 1：引入echarts的官方JS： 使用示例：
2：配套你的地图json用这个，但是只到区： 使用示例：
3：（1）推荐一个可以精确到镇街的地图选择器： 使用示例： （2）： 导入你哥哥刚刚保存的地图文件，就可以得到一块块的地图展示
<!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: 建德市,
}
}]
});
});
