目录
❤️效果展示❤️
一、方案架构
1、地图模块
2、关键技术
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、html 页面布局
2、引入地图文件
3、绘制地图气泡图，视觉映射效果
4、动态加载geoJson数据
5、GeoJSON数据格式
三、源码下载
❤️系列文章❤️
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。
话不多说，开始分享干货，欢迎讨论！今天分享的是数据可视化中非常重要的组件【中国各省市地图】，地图优点太多了，它可以非常炫酷清晰的呈现出地区和企业数据之间的关系，达到一目了然的效果。
❤️效果展示❤️
一、方案架构
1、地图模块
包含以下城市：白沙黎族自治县，保亭黎族苗族自治县，昌江黎族自治县，澄迈县，儋州，定安县，东方，海口，乐东黎族自治县，临高县，陵水黎族自治县，琼海，琼中黎族苗族自治县，三沙，三亚，屯昌县，万宁，文昌，五指山 。
2、关键技术
- Echarts 地理坐标系(geo)
- Echarts各地区不同的散点气泡图大小(effectScatter)
- Echarts各地区不同的视觉映射颜色效果(visualMap)
- 国际标准数据集(geoJSON)
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、html 页面布局
<h2>海南 - hai3_nan2</h2>
<table>
<tr>
<td><div id="bai2_sha1_li2_zu2_zi4_zhi4_xian4" class="citymap"></div></td>
<td><div id="bao3_ting2_li2_zu2_miao2_zu2_zi4_zhi4_xian4" class="citymap"></div></td>
<td><div id="chang1_jiang1_li2_zu2_zi4_zhi4_xian4" class="citymap"></div></td>
<td><div id="cheng2_mai4_xian4" class="citymap"></div></td>
</tr><tr>
<td><div id="dan1_zhou1" class="citymap"></div></td>
<td><div id="ding4_an1_xian4" class="citymap"></div></td>
<td><div id="dong1_fang1" class="citymap"></div></td>
<td><div id="hai3_kou3" class="citymap"></div></td>
</tr><tr>
<td><div id="le4_dong1_li2_zu2_zi4_zhi4_xian4" class="citymap"></div></td>
<td><div id="lin2_gao1_xian4" class="citymap"></div></td>
<td><div id="ling2_shui3_li2_zu2_zi4_zhi4_xian4" class="citymap"></div></td>
<td><div id="qiong2_hai3" class="citymap"></div></td>
</tr><tr>
<td><div id="qiong2_zhong1_li2_zu2_miao2_zu2_zi4_zhi4_xian4" class="citymap"></div></td>
<td><div id="san1_sha1" class="citymap"></div></td>
<td><div id="san1_ya4" class="citymap"></div></td>
<td><div id="tun2_chang1_xian4" class="citymap"></div></td>
</tr><tr>
<td><div id="wan4_ning2" class="citymap"></div></td>
<td><div id="wen2_chang1" class="citymap"></div></td>
<td><div id="wu3_zhi3_shan1" class="citymap"></div></td>
</tr>
</table>2、引入地图文件
<!-- 海南 -->
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_bai2_sha1_li2_zu2_zi4_zhi4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_bao3_ting2_li2_zu2_miao2_zu2_zi4_zhi4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_chang1_jiang1_li2_zu2_zi4_zhi4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_cheng2_mai4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_dan1_zhou1.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_ding4_an1_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_dong1_fang1.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_hai3_kou3.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_le4_dong1_li2_zu2_zi4_zhi4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_lin2_gao1_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_ling2_shui3_li2_zu2_zi4_zhi4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_qiong2_hai3.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_qiong2_zhong1_li2_zu2_miao2_zu2_zi4_zhi4_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_san1_sha1.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_san1_ya4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_tun2_chang1_xian4.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_wan4_ning2.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_wen2_chang1.js"></script>
<script src="js/shape-with-internal-borders/hainan/hai3_nan2_wu3_zhi3_shan1.js"></script>3、绘制地图气泡图，视觉映射效果
function make_city(cityName, chartDom) {
myChart = echarts.init(document.getElementById(chartDom), window.gTheme);
var option = {
title: {
text: cityName + "市 地图",
left: "center",
},
tooltip: {
trigger: "item",
formatter: function (params) {
if (typeof params.value == "object") {
value = params.value[2];
} else if (typeof params.value == "number") {
value = params.value;
} else {
value = 0;
}
return params.name + " : " + value + "亿元";
},
},
visualMap: {
realtime: true,
calculable: true,
seriesIndex: 0,
},
geo: [
{
map: cityName,
roam: true,
layoutCenter: ["50%", "50%"],
layoutSize: "120%",
selectedMode: "single",
zoom: 0.7,
},
],
series: [
{
name: "地图",
type: "map",
coordinateSystem: "geo",
geoIndex: 0,
data: [],
},
{
name: "Top 5",
type: "effectScatter",
coordinateSystem: "geo",
geoIndex: 0,
data: [],
symbolSize: function (val) {
return val[2] / 20;
},
rippleEffect: {
brushType: "stroke",
},
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}4、动态加载geoJson数据
function asyncData(filename, idContainer) {
$.getJSON(filename).done(function (data) {
dataNoCoordinate = data.map(handleData);
dataDesc = data
.sort(function (a, b) {
return b.value[2] - a.value[2];
})
.slice(0, 5);
var myChart = echarts.init(document.getElementById(idContainer));
myChart.setOption({
series: [
{ data: dataNoCoordinate },
{
data: dataDesc,
},
],
});
});
}5、GeoJSON数据格式
{"type":"FeatureCollection","features":[{"type":"Feature","id":"469025","properties":{"name":"白沙黎族自治县","cp":[109.451484,19.224823],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[109.46484375,19.0185546875],[109.4638671875,19.0107421875],[109.462890625,19.0078125],[109.4619140625,19.00390625],[109.4619140625,19.001953125],[109.4609375,19],[109.4599609375,18.998046875],[109.458984375,18.9970703125],[109.45703125,18.99609375],[109.455078125,18.99609375],[109.453125,18.9951171875],[109.453125,18.9951171875],[109.451171875,18.9951171875],[109.4501953125,18.9951171875],[109.44921875,18.9951171875],[109.4482421875,18.9951171875],[109.447265625,18.994140625],[109.4443359375,18.9931640625],[109.443359375,18.9921875],[109.4404296875,18.9921875],[109.4375,18.9912109375],[109.4365234375,18.9912109375],[109.4345703125,18.9912109375],[109.4326171875,18.9912109375],[三、源码下载
含HTTP服务+本省市的GeoJSON数据+Echarts图表：
