在数据可视化大屏中，地图可视化是常用的高级图表之一。

很多小伙伴们以为地图太高大上了，那么实现起来估计也不容易，说实话，确实不那么容易，直接用echarts是要花些时间研究的，但是我们可以将其二次封装，以后在项目中就可以实现拿来主义，这样就简单快捷多了。

一、大屏整体架构 Echarts + Java SpringBoot

1. 效果展示

动态效果

鼠标右键切换主题

2. 前端布局 Bootstrap


<body style="background-color:rgb(11, 18, 39)"><div class="container_fluid" id="vue_app"><!-- 标题栏 --><div class="row_fluid"><div id="container_1" class="col-12"style="color:#f5be66; text-align:center; align-content: center; padding-top: 1%; padding-bottom: 1%;"><strong><h3>【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点&气泡&流向&组合&区域&三级下钻地图 </h3></strong><dv-decoration-5 style="width:100%; height:4%; color:#f5be66;"></dv-decoration-5></div></div><!-- 上栏 --><div class="row" style="height: 44%;"><!-- 上左栏 --><div class="col-xs-12 col-sm-4 col-md-4 "><dv-border-box-7><div id="container_2" style="height:100%;"></div></dv-border-box-7></div><!-- 上中栏 --><div class="col-xs-12 col-sm-4 col-md-4 "><dv-border-box-7><div id="container_3" style="height:100%;"></div></dv-border-box-7></div><!-- 上右栏 --><div class="col-xs-12  col-sm-4 col-md-4 "><dv-border-box-7><div id="container_4" style="height:100%;"></div></dv-border-box-7></div></div><!-- 下栏 --><div class="row" style="height: 44%; padding-top: 0.5%;"><!-- 下左栏 --><div class="col-xs-12 col-sm-4 col-md-4"><dv-border-box-7><div id="container_5" style="height:100%;"></div></dv-border-box-7></div><!-- 下中栏 --><div class="col-xs-12 col-sm-4 col-md-4 "><dv-border-box-7><div id="container_6" style="height:100%;"></div></dv-border-box-7></div><!-- 下右栏 --><div class="col-xs-12 col-sm-4 col-md-4 "><div class="col-xs-12 col-md-12 col-sm-12"><dv-border-box-7><div class="col-xs-12  col-md-12 col-sm-12"><button id="china" type="button" class="btn btn-info" style="width: fit-content;"onclick="make_china('china')">中国</button><button id="province" type="button" class="btn btn-info" onclick=""style="display: none; width: fit-content;"></button><button id="city" type="button" class="btn btn-info" onclick=""style="display: none;  width:fit-content"></button></div><div id="container_7" style="height:100%;"></div></dv-border-box-7></div></div></div></div><!-- 鼠标右键切换主题 theme [1/2] --><!-- style="width: 200px;" 必须写在html，不能写在css文件中 --><ul id="right_menu" style="width: 200px;"><li><img src="img/drop-down.png"> 主题列表</li><li>infographic</li><li>macarons</li><li>roma</li><li>shine</li><li>walden</li><li>westeros</li><li>wonderland</li><li>vintage</li><li>purple-passion</li><li>chalk</li><li>dark</li><li>essos</li></ul>
</body>

3. 后端Java代码

@RestController
@RequestMapping("/json")
public class Process {@RequestMapping("/{filename}")public String json(@PathVariable("filename") String filename) throws Exception {System.out.println(filename);ChangeJSON(filename);String jsonStr = readJSON(filename);System.out.println(jsonStr);return jsonStr;}

二、封装的Echarts地图可视化组件

我将项目中常用的地图组件整理了一下，主要6组，分为：

点式地图 scatter

点式+气泡组合地图 scatter + effectScatter

流向地图 lines

流向+气泡组合地图 lines + effectScatter

区域地图 map

国家省市三级下钻地图 map

1. 点式地图 scatter

echarts 代码

function init_echart_map_china_scatter(container) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById(container), window.gTheme);var data = [];var geoCoordMap = {};option = {title: {text: "点图 scatter",top: "top",left: "center",textStyle: {color: "hsl(200, 86%, 48%)",fontSize: "14",},},tooltip: {trigger: "item",formatter: function (params) {if (typeof params.value[2] == "undefined") {return params.name + " : " + params.value;} else {return params.name + " : " + params.value[2];}},},geo: {map: "china",zoom: 1,roam: true,layoutCenter: ["50%", "50%"],// 地图放大或缩小的尺寸layoutSize: "100%",selectedMode: "single",label: {emphasis: {show: false,},},// 地图背景色:蓝色// itemStyle: {//   normal: {//     areaColor: "#4c60ff",//     borderColor: "#002097",//   },//   emphasis: {//     areaColor: "#293fff",//   },// },// 地图背景色:itemStyle: {normal: {borderColor: "rgba(147, 235, 248, 1)",borderWidth: 1,areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: "rgba(175,238,238, 0)", // 0% 处的颜色},{offset: 1,color: "rgba(    47,79,79, .2)", // 100% 处的颜色},],globalCoord: false, // 缺省为 false},shadowColor: "rgba(128, 217, 248, 1)",shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10,},emphasis: {areaColor: "#389BB7",borderWidth: 0,},},},series: [{name: "点图",type: "scatter",coordinateSystem: "geo",// "diamond", "pin", "circle",symbol: "pin",// 自定义图形 car// symbol://   "path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z",data: [],symbolSize: function (val) {return val[2] / 20;},label: {normal: {formatter: "{b}",position: "right",show: false,},emphasis: {show: true,},},},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

JSON数据格式

[{"name": "长沙", "value": [113.019455, 28.200103, 619]}, {"name": "海门", "value": [121.15, 31.89, 160]}, {"name": "赤峰", "value": [118.87, 42.28, 141]}, {"name": "鄂尔多斯", "value": [109.781327, 39.608266, 650]}, {"name": "招远", "value": [120.38, 37.35, 459]}, {"name": "舟山", "value": [122.207216, 29.985295, 475]}, {"name": "齐齐哈尔", "value": [123.97, 47.33, 632]}, {"name": "盐城", "value": [120.13, 33.38, 835]}, {"name": "青岛", "value": [120.33, 36.07, 465]}, {"name": "乳山", "value": [121.52, 36.89, 426]}, {"name": "金昌", "value": [102.188043, 38.520089, 113]}, {"name": "泉州", "value": [118.58, 24.93, 855]}]

2. 点式+气泡组合地图 scatter + effectScatter

echarts 代码

function init_echart_map_china_effectScatter(container) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById(container), window.gTheme);var data = [];var geoCoordMap = {};option = {title: {text: "点图+气泡图 scatter-effectScatter",top: "top",left: "center",textStyle: {color: "hsl(200, 86%, 48%)",fontSize: "14",},},tooltip: {trigger: "item",formatter: function (params) {if (typeof params.value[2] == "undefined") {return params.name + " : " + params.value;} else {return params.name + " : " + params.value[2];}},},geo: {map: "china",layoutCenter: ["50%", "50%"],zoom: 1,roam: true,// 地图放大或缩小的尺寸layoutSize: "100%",selectedMode: "single",label: {emphasis: {show: false,},},// 地图背景色:蓝色itemStyle: {normal: {areaColor: "#4c60ff",borderColor: "#002097",},emphasis: {areaColor: "#293fff",},},},series: [{name: "点图",type: "scatter",coordinateSystem: "geo",data: [],symbolSize: function (val) {return val[2] / 50;},label: {normal: {formatter: "{b}",position: "right",show: false,},emphasis: {show: true,},},},{name: "Top 5",type: "effectScatter",coordinateSystem: "geo",data: [],symbolSize: function (val) {return val[2] / 40;},showEffectOn: "render",rippleEffect: {brushType: "stroke",},hoverAnimation: true,label: {normal: {formatter: "{b}",position: "right",show: true,},},zlevel: 1,},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}function async_echart_map_china_effectScatter(container, filename) {$.getJSON(filename).done(function (data) {var myChart = echarts.init(document.getElementById(container));myChart.setOption({series: [{ data: data },{data: data.sort(function (a, b) {return b.value[2] - a.value[2];}).slice(0, 5),},],});});
}

JSON数据格式

[{"name": "长沙", "value": [113.019455, 28.200103, 611]}, {"name": "海门", "value": [121.15, 31.89, 564]}, {"name": "赤峰", "value": [118.87, 42.28, 524]}, {"name": "鄂尔多斯", "value": [109.781327, 39.608266, 568]}, {"name": "招远", "value": [120.38, 37.35, 104]}, {"name": "舟山", "value": [122.207216, 29.985295, 254]}, {"name": "齐齐哈尔", "value": [123.97, 47.33, 439]}, {"name": "盐城", "value": [120.13, 33.38, 400]}, {"name": "青岛", "value": [120.33, 36.07, 126]}, {"name": "乳山", "value": [121.52, 36.89, 449]}, {"name": "金昌", "value": [102.188043, 38.520089, 643]}, {"name": "泉州", "value": [118.58, 24.93, 753]}]

3. 流向地图 lines

echarts 代码

function init_echart_map_china_lines(container) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById(container), window.gTheme);var data = [];var geoCoordMap = {};option = {title: {text: "流向图 lines",top: "top",left: "center",textStyle: {color: "hsl(200, 86%, 48%)",fontSize: "14",},},tooltip: {trigger: "item",formatter: function (params) {return (params.seriesName +"<br>" +params.data.fromName +" -> " +params.data.toName);},},geo: {map: "china",layoutCenter: ["50%", "50%"],zoom: 1,roam: true,// 地图放大或缩小的尺寸layoutSize: "100%",selectedMode: "single",label: {emphasis: {show: false,},},// 地图背景色:蓝色itemStyle: {normal: {areaColor: "#4c60ff",borderColor: "#002097",},emphasis: {areaColor: "#293fff",},},},series: {name: "流向图",type: "lines",symbol: ["circle", "arrow"],// symbol 大小symbolSize: 10,// 设置线条的效果effect: {show: true,period: 10,trailLength: 0,// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'// svg 图形pathsymbol:"path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z",// 图元的大小symbolSize: 15,},// 设置线条的样式lineStyle: {normal: {// color: "yellow",// 线条的宽度width: 2,// 线条的透明度// opacity: 0.6,// 线条的曲度curveness: 0.2,},},},};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

JSON数据格式

[{"fromName": "长沙","toName": "海门","coords": [[113.019455,28.200103],[121.15,31.89]]},{"fromName": "长沙","toName": "鄂尔多斯","coords": [[113.019455,28.200103],[109.781327,39.608266]]},{"fromName": "长沙","toName": "招远","coords": [[113.019455,28.200103],[120.38,37.35]]},{"fromName": "长沙","toName": "舟山","coords": [[113.019455,28.200103],[122.207216,29.985295]]},{"fromName": "长沙","toName": "齐齐哈尔","coords": [[113.019455,28.200103],[123.97,47.33]]},{"fromName": "长沙","toName": "盐城","coords": [[113.019455,28.200103],[120.13,33.38]]},{"fromName": "长沙","toName": "赤峰","coords": [[113.019455,28.200103],[118.87,42.28]]},{"fromName": "长沙","toName": "青岛","coords": [[113.019455,28.200103],[120.33,36.07]]},{"fromName": "长沙","toName": "乳山","coords": [[113.019455,28.200103],[121.52,36.89]]},{"fromName": "长沙","toName": "金昌","coords": [[113.019455,28.200103],[102.188043,38.520089]]},{"fromName": "长沙","toName": "泉州","coords": [[113.019455,28.200103],[118.58,24.93]]}
]

4. 流向+气泡组合地图 lines + effectScatter

echarts 代码

function init_echart_map_china_line_scatter(container) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById(container), window.gTheme);var data = [];var geoCoordMap = {};option = {title: {text: "流向图+气泡图 lines-effectScatter",top: "top",left: "center",textStyle: {color: "hsl(200, 86%, 48%)",fontSize: "14",},},tooltip: {trigger: "item",formatter: function (params) {return (params.seriesName +"<br>" +params.data.fromName +" -> " +params.data.toName);},},geo: {map: "china",layoutCenter: ["50%", "50%"],zoom: 1,roam: true,// 地图放大或缩小的尺寸layoutSize: "100%",selectedMode: "single",label: {emphasis: {show: false,},},// 地图背景色:蓝色itemStyle: {normal: {areaColor: "#4c60ff",borderColor: "#002097",},emphasis: {areaColor: "#293fff",},},},series: [{name: "流向图",type: "lines",symbol: ["circle", "arrow"],// symbol 大小symbolSize: 10,// 设置线条的效果effect: {show: true,period: 10,trailLength: 0,// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'// svg 图形pathsymbol:"path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z",// 图元的大小symbolSize: 15,},// 设置线条的样式lineStyle: {normal: {// color: "yellow",// 线条的宽度width: 2,// 线条的透明度// opacity: 0.6,// 线条的曲度curveness: 0.2,},},},{name: "气泡图",type: "effectScatter",coordinateSystem: "geo",data: [],symbolSize: function (val) {return val[2] / 40;},showEffectOn: "render",rippleEffect: {brushType: "stroke",},hoverAnimation: true,// label: {//   normal: {//     formatter: "{b}",//     position: "right",//     show: true,//   },// },zlevel: 1,},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}function async_echart_map_china_line_scatter(container,filename_line,filename_scatter
) {$.getJSON(filename_line).done(function (data) {$.getJSON(filename_scatter).done(function (data_scatter) {var myChart = echarts.init(document.getElementById(container));myChart.setOption({series: [{data: data,},{data: data_scatter,},],});});});
}

JSON数据格式 - 流向图 lines

[{"fromName": "赤峰","toName": "海门","coords": [[118.87,42.28],[121.15,31.89]]},{"fromName": "赤峰","toName": "鄂尔多斯","coords": [[118.87,42.28],[109.781327,39.608266]]},{"fromName": "赤峰","toName": "招远","coords": [[118.87,42.28],[120.38,37.35]]},{"fromName": "长沙","toName": "舟山","coords": [[113.019455,28.200103],[122.207216,29.985295]]},{"fromName": "赤峰","toName": "齐齐哈尔","coords": [[118.87,42.28],[123.97,47.33]]},{"fromName": "长沙","toName": "盐城","coords": [[113.019455,28.200103],[120.13,33.38]]},{"fromName": "盐城","toName": "赤峰","coords": [[120.13,33.38],[118.87,42.28]]},{"fromName": "盐城","toName": "青岛","coords": [[120.13,33.38],[120.33,36.07]]},{"fromName": "盐城","toName": "乳山","coords": [[113.019455,28.200103],[121.52,36.89]]},{"fromName": "盐城","toName": "金昌","coords": [[113.019455,28.200103],[102.188043,38.520089]]},{"fromName": "长沙","toName": "泉州","coords": [[113.019455,28.200103],[118.58,24.93]]}
]

json 数据 - 气泡图 scatter

[{"name": "长沙","value": [113.019455,28.200103,733]},{"name": "海门","value": [121.15,31.89,231]},{"name": "赤峰","value": [118.87,42.28,873]},{"name": "鄂尔多斯","value": [109.781327,39.608266,834]},{"name": "招远","value": [120.38,37.35,860]},{"name": "舟山","value": [122.207216,29.985295,378]},{"name": "齐齐哈尔","value": [123.97,47.33,631]},{"name": "盐城","value": [120.13,33.38,398]},{"name": "青岛","value": [120.33,36.07,670]},{"name": "乳山","value": [121.52,36.89,355]},{"name": "金昌","value": [102.188043,38.520089,315]},{"name": "泉州","value": [118.58,24.93,360]}
]

5. 区域地图 map

echarts 代码

function init_echart_map_china_map(container) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById(container), window.gTheme);var data = [];var geoCoordMap = {};option = {title: {text: "区域图 map",top: "top",left: "center",textStyle: {color: "hsl(200, 86%, 48%)",fontSize: "14",},},tooltip: {trigger: "item",formatter: function (params) {if (typeof params.value[2] == "undefined") {return params.name + " : " + params.value;} else {return params.name + " : " + params.value[2];}},},visualMap: {min: 0,max: 1000,// left: "right",// top: "bottom",text: ["高", "低"], // 文本，默认为数值文本calculable: true,//      color: ['#26cfe4', '#f2b600', '#ec5845'],textStyle: {color: "#fff",},},series: [{type: "map",mapType: "china",aspectScale: 0.75,zoom: 1,roam: true,label: {normal: {show: true, //显示省份标签textStyle: { color: "#c71585" }, //省份标签字体颜色},emphasis: {//对应的鼠标悬浮效果show: true,textStyle: { color: "#800080" },},},itemStyle: {normal: {borderWidth: 0.5, //区域边框宽度borderColor: "#009fe8", //区域边框颜色areaColor: "#ffffff", //区域颜色},emphasis: {borderWidth: 0.5,borderColor: "#4b0082",areaColor: "#ffdead",},},},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

JSON数据格式

[{"name": "北京", "value": 450}, {"name": "天津", "value": 138}, {"name": "河北", "value": 671}, {"name": "山西", "value": 468}, {"name": "内蒙古", "value": 278}, {"name": "宁夏", "value": 124}, {"name": "青海", "value": 644}, {"name": "陕西", "value": 515}, {"name": "甘肃", "value": 533}, {"name": "新疆", "value": 548}, {"name": "辽宁", "value": 662}, {"name": "吉林", "value": 568}, {"name": "黑龙江", "value": 244}, {"name": "山东", "value": 767}, {"name": "江苏", "value": 166}, {"name": "上海", "value": 710}, {"name": "浙江", "value": 640}, {"name": "安徽", "value": 546}, {"name": "福建", "value": 851}, {"name": "江西", "value": 528}, {"name": "河南", "value": 831}, {"name": "湖南", "value": 251}, {"name": "湖北", "value": 683}, {"name": "四川", "value": 708}, {"name": "贵州", "value": 339}, {"name": "云南", "value": 817}, {"name": "重庆", "value": 115}, {"name": "西藏", "value": 594}, {"name": "广东", "value": 436}, {"name": "广西", "value": 579}, {"name": "海南", "value": 373}]

6. 国家省市三级下钻地图 map

下钻事件代码

function make_china(container) {make_map("china", container);async_echart(container, filename_map_china_map_drill_china);// 更新面包屑导航console.log(container);button = document.getElementById("china");button.onclick = function () {make_china(container);};// 隐藏 province 按钮$("#province").hide();// 隐藏 city 按钮$("#city").hide();// end 更新面包屑导航// 自定义 click 事件处理函数myChart = echarts.init(document.getElementById(container), window.gTheme);myChart.off("click");myChart.on("click", function (params) {// params.name 为 省市 名称，如 河北，内蒙古，深圳市// 加载 省市 地图make_province(params.name, container);// 加载 省市 数据});
}// 渲染 省市 地图
function make_province(cityName, container) {// 绘制省地图make_map(cityName, container);async_echart(container, filename_map_china_map_drill_province);// 更新面包屑导航console.log(cityName, container);button = document.getElementById("province");button.innerHTML = cityName;button.onclick = function () {make_province(cityName, container);};// 显示 province 按钮$("#province").show();// 隐藏 city 按钮$("#city").hide();// end 更新面包屑导航myChart = echarts.init(document.getElementById(container), window.gTheme);myChart.off("click");// 自定义 click 事件处理函数myChart.on("click", function (params) {// params.name 为 省市 名称，如 河北，内蒙古，深圳市// 加载 省市 地图console.log(params.name, container);make_city(params.name, container);});
}function make_city(cityName, container) {// 绘制市地图make_map(cityName, container);async_data(container, filename_map_china_map_drill_city);// 更新面包屑导航console.log(cityName, container);button = document.getElementById("city");button.innerHTML = cityName;button.onclick = function () {make_city(cityName, container);};// 显示 city 按钮$("#city").show();// 无区县下钻，关闭click事件myChart = echarts.init(document.getElementById(container), window.gTheme);myChart.off("click");
}

echarts 代码

function make_map(cityName, container) {// 删除《市》，如：深圳市 深圳。因为地图城市注册的时候名字不包含市。cityName = cityName.replace("市", "");myChart = echarts.init(document.getElementById(container), window.gTheme);var option = {title: {text: "三级(国家/省/市)下钻地图 map " + cityName,top: "top",left: "center",textStyle: {color: "hsl(200, 86%, 48%)",fontSize: "14",},},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;},},dataRange: {min: 0,max: 1000,realtime: true,calculable: true,seriesIndex: 0,},geo: [{map: cityName,// 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启// roam: true,// 需要关闭鼠标平移漫游，否则地图定位漂移到div外面roam: "scale",layoutCenter: ["50%", "50%"],layoutSize: "100%",selectedMode: "single",// zoom: 1,label: {normal: {show: true, //显示城市标签// textStyle: { color: "#c71585" }, //省份标签字体颜色},emphasis: {//对应的鼠标悬浮效果show: true,// textStyle: { color: "#800080" },},},// 地图背景色:itemStyle: {normal: {borderColor: "rgba(147, 235, 248, 1)",borderWidth: 1,areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: "rgba(175,238,238, 0)", // 0% 处的颜色},{offset: 1,color: "rgba(    47,79,79, .2)", // 100% 处的颜色},],globalCoord: false, // 缺省为 false},shadowColor: "rgba(128, 217, 248, 1)",shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10,},emphasis: {// areaColor: "#389BB7",borderWidth: 0,},},},],series: [{name: "地图",type: "map",coordinateSystem: "geo",zoom: 1,roam: true,geoIndex: 0,data: [],backgroundColor: "#eee",},{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();});
}function handle_data(node) {return {name: node.name,value: node.value[2],};
}function async_data(container, filename) {$.getJSON(filename).done(function (data) {dataNoCoordinate = data.map(handle_data);dataDesc = data.sort(function (a, b) {return b.value[2] - a.value[2];}).slice(0, 5);console.log(container, dataDesc, dataNoCoordinate);var myChart = echarts.init(document.getElementById(container));myChart.setOption({series: [{ data: dataNoCoordinate },{data: dataDesc,},],});});
}

JSON数据格式 - 中国地图

[{"name": "北京","value": 1475},{"name": "天津","value": 635},{"name": "河北","value": 1291},{"name": "山西","value": 1281},{"name": "内蒙古","value": 2156},{"name": "宁夏","value": 352},{"name": "青海","value": 1370},{"name": "陕西","value": 528},{"name": "甘肃","value": 1742},{"name": "新疆","value": 1079},{"name": "辽宁","value": 780},{"name": "吉林","value": 2335},{"name": "黑龙江","value": 1565},{"name": "山东","value": 364},{"name": "江苏","value": 713},{"name": "上海","value": 1745},{"name": "浙江","value": 270},{"name": "安徽","value": 1236},{"name": "福建","value": 1876},{"name": "江西","value": 119},{"name": "河南","value": 953},{"name": "湖南","value": 704},{"name": "湖北","value": 2256},{"name": "四川","value": 322},{"name": "贵州","value": 1566},{"name": "云南","value": 992},{"name": "重庆","value": 890},{"name": "西藏","value": 120},{"name": "广东","value": 2366},{"name": "广西","value": 1686},{"name": "海南","value": 1339}
]

JSON数据格式 - 广东省地图

[{"name": "深圳市","value": 1475},{"name": "东莞市","value": 635},{"name": "惠州市","value": 1291},{"name": "河源市","value": 1281},{"name": "中山市","value": 2156},{"name": "潮州市","value": 352},{"name": "汕头市","value": 1370},{"name": "广州市","value": 528}
]

JSON数据格式 - 深圳市地图

[{"name": "罗湖区","value": [114.131459,22.548389,286]},{"name": "福田区","value": [114.055072,22.521521,183]},{"name": "南山区","value": [113.930413,22.533287,391]},{"name": "宝安区","value": [113.883802,22.554996,302]},{"name": "龙岗区","value": [114.246899,22.720974,263]},{"name": "盐田区","value": [114.236739,22.557001,58]},{"name": "坪山区","value": [114.350584,22.708881,383]},{"name": "龙华区","value": [114.045422,22.696667,203]}
]

三、源码下载

26【源码】数Echarts+JavaSpringBoot动态实时组件-点&气泡&流向&流向气泡组合&区域&三级下钻地图-企业管理文档类资源-CSDN下载

四、开发配置&代码结构说明

数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏【Java开发环境搭建】

五、更多案例

YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客

《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客

本次分享结束，欢迎讨论！QQ微信同号： 6550523

【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图相关推荐

【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
目录一.大屏整体架构 Echarts + Flask + Bootstrap 1. 效果展示动态效果鼠标右键切换主题 2. 前端布局 Bootstrap 3. HTTP 服务端使用 Flask ...
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
目录效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 需求确认 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.开发环境搭建 1.Java开发环 ...
2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前小伙伴们建议我出一些视频课程来学习Echarts,这样可以更快上 ...
3【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-物联网
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...
【1】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网企业数据
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传
目录效果展示多主题样式一. 确定需求方案 1.确定产品上线部署的屏幕分辨率 2.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1.前端html代码 - ...

【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图

一、大屏整体架构 Echarts + Java SpringBoot

1. 效果展示

动态效果

鼠标右键切换主题

2. 前端布局 Bootstrap

3. 后端Java代码

二、封装的Echarts地图可视化组件

1. 点式地图 scatter

echarts 代码

JSON数据格式

2. 点式+气泡组合地图 scatter + effectScatter

echarts 代码

JSON数据格式

3. 流向地图 lines

echarts 代码

JSON数据格式

4. 流向+气泡组合地图 lines + effectScatter

echarts 代码

JSON数据格式 - 流向图 lines

json 数据 - 气泡图 scatter

5. 区域地图 map

echarts 代码

JSON数据格式

6. 国家省市三级下钻地图 map

下钻事件代码

echarts 代码

JSON数据格式 - 中国地图

JSON数据格式 - 广东省地图

JSON数据格式 - 深圳市地图

三、源码下载

四、开发配置&代码结构说明

五、更多案例

【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图相关推荐

最新文章

热门文章