❤️效果展示❤️
一、方案架构
1、地图模块
2、关键技术
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、html 页面布局
2、引入地图文件
3、绘制地图气泡图，视觉映射效果
4、动态加载geoJson数据
5、GeoJSON数据格式
三、源码下载
❤️系列文章❤️
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。
话不多说，开始分享干货，欢迎讨论」天」分享的是数据可视化中非常重要的组件【中国各省市地图】，地图优点太多了，它可以非常炫酷清晰的呈现出地区和企业数据之间的关系，达到一目了然的效果。
❤️效果展示❤️
一、方案架构
1、地图模块
包含以下城市：百色，北海，崇左，防城港，贵港，桂林，河池，贺州，来宾，柳州，南宁，钦州，梧州，玉林 。
2、关键技术
- Echarts 地理坐标系(geo)
- Echarts各地区不同的散点气泡图大小(effectScatter)
- Echarts各地区不同的视觉映射颜色效果(visualMap)
- 国际标准数据集(geoJSON)
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、html 页面布局
<h2>广西 - guang3_xi1</h2>
<table>
<tr>
<td><div id="bai3_se4" class="citymap"></div></td>
<td><div id="bei3_hai3" class="citymap"></div></td>
<td><div id="chong2_zuo3" class="citymap"></div></td>
<td><div id="fang2_cheng2_gang3" class="citymap"></div></td>
</tr><tr>
<td><div id="gui4_gang3" class="citymap"></div></td>
<td><div id="gui4_lin2" class="citymap"></div></td>
<td><div id="he2_chi2" class="citymap"></div></td>
<td><div id="he4_zhou1" class="citymap"></div></td>
</tr><tr>
<td><div id="lai2_bin1" class="citymap"></div></td>
<td><div id="liu3_zhou1" class="citymap"></div></td>
<td><div id="nan2_ning2" class="citymap"></div></td>
<td><div id="qin1_zhou1" class="citymap"></div></td>
</tr><tr>
<td><div id="wu2_zhou1" class="citymap"></div></td>
<td><div id="yu4_lin2" class="citymap"></div></td>
</tr>
</table>2、引入地图文件
<!-- 广西 -->
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_bai3_se4.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_bei3_hai3.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_chong2_zuo3.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_fang2_cheng2_gang3.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_gui4_gang3.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_gui4_lin2.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_he2_chi2.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_he4_zhou1.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_lai2_bin1.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_liu3_zhou1.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_nan2_ning2.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_qin1_zhou1.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_wu2_zhou1.js"></script>
<script src="js/shape-with-internal-borders/guangxi/guang3_xi1_yu4_lin2.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":"451002","properties":{"name":"右江区","cp":[106.618225,23.90097],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[106.140625,23.57421875],[106.140625,23.5751953125],[106.1396484375,23.576171875],[106.13671875,23.5791015625],[106.1357421875,23.580078125],[106.12890625,23.5849609375],[106.125,23.5859375],[106.123046875,23.58984375],[106.12109375,23.5947265625],[106.1201171875,23.6005859375],[106.12109375,23.60546875],[106.125,23.6123046875],[106.12890625,23.619140625],[106.12890625,23.619140625],[106.1337890625,23.625],[106.1376953125,23.6328125],[106.140625,23.6396484375],[106.1416015625,23.642578125],[106.14453125,23.6494140625],三、源码下载
含HTTP服务+本省市的GeoJSON数据+Echarts图表：
