近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。
❤️效果展示❤️
一、方案架构
1、地图模块
2、关键技术
-
- Echarts 地理坐标系(geo)
- Echarts各地区不同的散点气泡图大小(effectScatter)
- Echarts各地区不同的视觉映射颜色效果(visualMap)
- 国际标准数据集(geoJSON)
二、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）
1、html 页面布局
<h2>湖北 - hu2_bei3</h2>
<table>
<tr>
<td><div id="e4_zhou1" class="citymap"></div></td>
<td><div id="en1_shi1_tu3_jia1_zu2_miao2_zu2_zi4_zhi4_zhou1" class="citymap"></div></td>
<td><div id="huang2_gang1" class="citymap"></div></td>
<td><div id="huang2_shi2" class="citymap"></div></td>
</tr><tr>
<td><div id="jing1_men2" class="citymap"></div></td>
<td><div id="jing1_zhou1" class="citymap"></div></td>
<td><div id="qian2_jiang1" class="citymap"></div></td>
<td><div id="shen2_nong2_jia4_lin2_qu1" class="citymap"></div></td>
</tr><tr>
<td><div id="shi2_yan4" class="citymap"></div></td>
<td><div id="sui2_zhou1" class="citymap"></div></td>
<td><div id="tian1_men2" class="citymap"></div></td>
<td><div id="wu3_han4" class="citymap"></div></td>
</tr><tr>
<td><div id="xian1_tao2" class="citymap"></div></td>
<td><div id="xian2_ning2" class="citymap"></div></td>
<td><div id="xiang1_yang2" class="citymap"></div></td>
<td><div id="xiao4_gan3" class="citymap"></div></td>
</tr><tr>
<td><div id="yi2_chang1" class="citymap"></div></td>
</tr>
</table> 2、引入地图文件
<!-- 湖北 -->
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_e4_zhou1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_en1_shi1_tu3_jia1_zu2_miao2_zu2_zi4_zhi4_zhou1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_huang2_gang1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_huang2_shi2.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_jing1_men2.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_jing1_zhou1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_qian2_jiang1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_shen2_nong2_jia4_lin2_qu1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_shi2_yan4.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_sui2_zhou1.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_tian1_men2.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_wu3_han4.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_xian1_tao2.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_xian2_ning2.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_xiang1_yang2.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_xiao4_gan3.js"></script>
<script src="js/shape-with-internal-borders/hubei/hu2_bei3_yi2_chang1.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":"420702","properties":{"name":"梁子湖区","cp":[114.684731,30.100141],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[114.677734375,30.2685546875],[114.6748046875,30.267578125],[114.673828125,30.265625],[114.671875,30.263671875],[114.671875,30.2607421875],[114.671875,30.2578125],[114.6708984375,30.2568359375],[114.6708984375,30.2568359375],[114.6689453125,30.255859375],[114.666015625,30.255859375],[114.6630859375,30.2548828125],[114.6611328125,30.25],[114.6611328125,30.2490234375],[114.662109375,30.2470703125],[114.662109375,30.24609375],[114.6630859375,30.244140625],[114.6630859375,30.2431640625],[114.6640625,30.2421875],[114.6650390625,30.23828125],[114.666015625,30.2353515625],[114.6650390625,30.2314453125],[114.6650390625,30.2294921875],[114.6650390625,30.2294921875],[114.6650390625,30.228515625],[114.6650390625,30.2216796875],[114.666015625,30.2197265625],[114.666015625,30.21875],[114.671875,30.2158203125],[114.6728515625,30.2158203125],[114.673828125,30.21484375],[114.6748046875,30.2138671875],[114.6767578125,30.2119140625],[114.6787109375,30.2099609375],[114.6787109375,30.20703125],[114.6806640625,30.205078125],[114.6806640625,30.2041015625],[114.6845703125,30.2021484375],[114.6865234375,30.19921875],[114.689453125,30.197265625],[114.6962890625,30.1943359375],[114.6962890625,30.1943359375],[114.6962890625,30.1943359375],[114.6962890625,30.1943359375],[114.6962890625,30.193359375],[114.69921875,30.19140625],[114.701171875,30.189453125],[114.703125,30.1865234375],[114.705078125,30.185546875],[114.7119140625,30.185546875],[114.7138671875,30.185546875],[114.716796875,30.1845703125],[114.71875,30.18359375],[114.7236328125,30.1796875],[114.724609375,30.1796875],[114.724609375,30.1796875],