☀️ 我的主页：YYDataV ☀️欢迎点赞 收藏 ⭐留言，欢迎多多交流
目录
一、方案架构
1、地图模块
2、关键技术
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
三、源码下载
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。
话不多说，开始分享干货，欢迎讨论！今天分享的是数据可视化中非常重要的组件【中国各省市地图】，地图优点太多了，它可以非常炫酷清晰的呈现出地区和企业数据之间的关系，达到一目了然的效果。
❤️效果展示❤️
一、方案架构
1、地图模块
包含以下城市：阿拉善盟，巴彦淖尔，包头，赤峰，鄂尔多斯，呼和浩特，呼伦贝尔，通辽，乌海，乌兰察布，锡林郭勒，兴安盟 。
2、关键技术
- Echarts 地理坐标系(geo)
- Echarts各地区不同的散点气泡图大小(effectScatter)
- Echarts各地区不同的视觉映射颜色效果(visualMap)
- 国际标准数据集(geoJSON)
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、html 页面布局
<h2>内蒙古 - nei4_meng2_gu3</h2>
<table>
<tr>
<td><div id="a1_la1_shan4_meng2" class="citymap"></div></td>
<td><div id="ba1_yan4_nao4_er3" class="citymap"></div></td>
<td><div id="bao1_tou2" class="citymap"></div></td>
<td><div id="chi4_feng1" class="citymap"></div></td>
</tr><tr>
<td><div id="e4_er3_duo1_si1" class="citymap"></div></td>
<td><div id="hu1_he2_hao4_te4" class="citymap"></div></td>
<td><div id="hu1_lun2_bei4_er3" class="citymap"></div></td>
<td><div id="tong1_liao2" class="citymap"></div></td>
</tr><tr>
<td><div id="wu1_hai3" class="citymap"></div></td>
<td><div id="wu1_lan2_cha2_bu4" class="citymap"></div></td>
<td><div id="xi2_lin2_guo1_le4_meng2" class="citymap"></div></td>
<td><div id="xing1_an1_meng2" class="citymap"></div></td>
</tr><tr>
</tr>
</table>
2、引入地图文件
<!-- 17 内蒙古 -->
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_a1_la1_shan4_meng2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_ba1_yan4_nao4_er3.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_bao1_tou2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_chi4_feng1.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_e4_er3_duo1_si1.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_hu1_he2_hao4_te4.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_hu1_lun2_bei4_er3.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_tong1_liao2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_wu1_hai3.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_wu1_lan2_cha2_bu4.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_xi2_lin2_guo1_le4_meng2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_xing1_an1_meng2.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":"152921","properties":{"name":"阿拉善左旗","cp":[105.666275,38.833389],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[105.80078125,37.9404296875],[105.7998046875,37.9375],[105.798828125,37.9345703125],[105.798828125,37.9306640625],[105.798828125,37.9267578125],[105.798828125,37.923828125],[105.798828125,37.919921875],[105.7998046875,37.9150390625],[105.7998046875,37.91015625],[105.80078125,37.9072265625],[105.8017578125,37.9033203125],[105.8037109375,37.900390625],[105.8046875,37.8984375],[105.8056640625,37.8955078125],[105.806640625,37.892578125],[105.8076171875,37.8896484375],[105.8076171875,37.88671875],[105.8076171875,37.8828125],[105.80859375,37.880859375],[105.80859375,37.87890625],[105.8095703125,37.8759765625],[105.80859375,37.8720703125],[105.806640625,37.869140625],[105.806640625,37.8662109375],[105.8056640625,37.8642578125],[105.8046875,37.8623046875],[105.8017578125,37.859375],[105.798828125,37.8564453125],[105.7978515625,37.8544921875],[105.794921875,37.8525390625],[105.79296875,37.8505859375],[105.7900390625,37.84765625],[105.787109375,37.8447265625],[105.7841796875,37.83984375],[105.7822265625,37.8369140625],[105.78125,37.8349609375],[105.78125,37.8330078125],[105.779296875,37.8291015625],[105.779296875,37.8271484375],[105.77734375,37.82421875],[105.775390625,37.818359375],[105.7744140625,37.8154296875],[105.7724609375,37.8115234375],[105.767578125,37.806640625],[105.765625,37.8046875],[105.7607421875,37.80078125],[105.755859375,37.7978515625],[105.751953125,37.796875],[105.7451171875,37.79296875],[105.7412109375,37.7919921875],[105.73828125,37.791015625],[105.734375,37.7900390625],[105.7294921875,37.7890625],[105.7255859375,37.7880859375],[105.7216796875,37.7861328125],[105.71875,37.783203125],[105.7138671875,37.7822265625],[105.708984375,37.7802734375],[105.7041015625,37.7783203125],[105.7001953125,37.77734375],[105.6962890625,37.775390625],[105.689453125,37.7744140625],[105.68359375,37.7724609375],[105.6806640625,37.7724609375],[105.677734375,37.7724609375],[105.6748046875,37.7734375],[105.6708984375,37.7763671875],[105.66796875,37.7763671875],[105.6650390625,37.7763671875],[105.662109375,37.7763671875],[105.6591796875,37.77734375],[105.6533203125,37.7783203125],[105.6513671875,37.7783203125],[105.646484375,37.7802734375],[105.64453125,37.78125],[105.6396484375,37.7822265625],[105.6376953125,37.7822265625],[105.6337890625,37.7822265625],[105.626953125,37.7802734375],[105.6240234375,37.779296875],[105.623046875,37.7783203125],[105.6220703125,37.7744140625],[105.62109375,37.7734375],[105.619140625,37.763671875],[105.6171875,37.75390625],[105.6171875,37.7412109375],[105.6171875,37.72265625],[105.6162109375,37.7197265625],[105.615234375,37.71875],[105.6142578125,37.7158203125],[105.61328125,37.7109375],[105.6103515625,37.70703125],[105.6103515625,37.70703125],[105.6044921875,37.7021484375],[105.599609375,37.7001953125],[105.599609375,37.7001953125],[105.59375,37.69921875],[105.58984375,37.7001953125],三、源码下载
含HTTP服务+本省市的GeoJSON数据+Echarts图表：
【源码】数据可视化：基于Echarts+GeoJson实现的地图视觉映射散点（气泡）组件【17】-内蒙古省.zip-企业管理文档类资源
