最近公司有一个数据可视化大屏的功能（给各地客户领导看的，说是看着有科技感），这个功能就开到了我这，因为客户在全国各个省份，有的是省级的，有的是市级的，登录之后，显示该省或者该市的各个数据情况，我也是第一回做这个省份或者城市的地图。
这种可视化的图表，第一个想到的是ECharts,就打开了EChartst的官网，找到一个类似的，上面是香港
分析了一下，上面只是有鼠标停留的数据，要是换到其他的城市，香港的地图也用不到其他的城市呀，又仔细看了一下，发现示例代码的第一行中，是一个ajax请求，就在控制台上打印了看了一下，这究竟是请求的啥
我一看返回的这些数据，这是涉及到我的知识盲区了，就问了公司的啥都会的后台，告诉我这叫 geojson ,让我自己去百度高德地图网站去找你要这个城市geojson,好吧，确实第一回知道这个知识点，我就在网上找了一下，百度地图的jeojson我没有找到，大家要是找到的话，在评论里说一下，找到了一个高德地图下载geojson的网址
我就下载了一个北京的，这个json还不小，在vscode打开格式化了看了一看，好家伙，一万七千多行的json.
北京市的geojson已经拿到了，先在本地写个小demo，跑通一下（这里是个简版的，提示数据之类的都先删除掉了，具体参数可以看一下ECharts的官方文档）
备注：在这里我为了方便，把下载好的.json改成了.js
<body>
<div id="main" style="width: 1000px;height:500px;"></div>
</body>
<script src="./echarts.js"></script>
<script src="./bj.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
echarts.registerMap('bj', bj);
myChart.setOption(option = {
title: {
text: '北京市地图',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '北京市地图',
type: 'map',
mapType: 'bj', //
label: {
show: true
}
}
]
});
</script>
怀着激动的心，我打开了页面
好不容易出来了，我又试了试其他的省份和城市，如河北省
做到这，已经成功了一大半了，可是目前有个小问题，就是当现实城市的时候，有些地区因为面积小的原因，城区的名字都推到了一块，这种情况，和产品经理讨论以后，做一个鼠标滚动放大，来解决这个问题，我在查了一下ECharts鼠标滚轮放大的api，试了半天dataZoom这个，加什么也不变大，后来发现，因为这次的地图，不能用这个，在这块耽误了很多时间，应该是在series这里设置
series: [
{
name: '北京市地图',
type: 'map',
mapType: 'bj',
label: {
show: true
},
zoom: 1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2 //可以放大几倍
}
}
]
好了，一个最基础的显示省份下面的城市或者城市显示下面的区县完成，如果要是根据后台返回地区的账号显示该地区的地图，大家可以去高德地图注册一个开发者，上面有详细的高德地图文档，我在这里附上高德地图api的地址
