場景使用：適用于定時顯示區域信息、區域警報提醒。

設置城市中心點

var center = {"南京市":[118.767413,32.041544],"無錫市":[120.301663,31.574729],"徐州市":[117.184811,34.261792],"常州市":[119.946973,31.772752],"蘇州市":[120.619585,31.299379],"南通市":[120.864608,32.016212],"連云港市":[119.178821,34.600018],"淮安市":[119.021265,33.597506],"鹽城市":[120.139998,33.377631],"揚州市":[119.421003,32.393159],"鎮江市":[119.452753,32.204402],"泰州市":[119.915176,32.484882],"宿遷市":[118.275162,33.963008]}

注冊地圖，并渲染map

$.get(uploadedDataURL, function(json) {echarts.registerMap('lockdatav', json);var option = {backgroundColor: '#020933',geo: [{map: 'lockdatav',roam: false, //是否允許縮放zoom: 1.1, //默認顯示級別itemStyle: {normal: {areaColor: '#00186E',borderColor: '#195BB9',borderWidth: 1,},emphasis: {areaColor: '#195BB9'}},}],series: [{type: 'effectScatter',coordinateSystem: 'geo',z: 5,data: [],symbolSize: 14,label: {normal: {show: true,formatter: function(params) {return '{fline|地點：'+ params.data.city +'}\n{tline|'+ (params.data.info || '發生xx集件') +'}';},position: 'top',backgroundColor: 'rgba(254,174,33,.8)',padding: [0, 0],borderRadius: 3,lineHeight: 32,color: '#f7fafb',rich: {fline: {padding: [0, 10, 10, 10],color: '#ffffff'},tline: {padding: [10, 10, 0, 10],color: '#ffffff'}}},emphasis: {show: true}},itemStyle: {color: '#feae21',}}]};myChart.setOption(option); });

設置定時器，推送option.series[0].data

var timer = setInterval(() => {var cityIndex = Math.floor(Math.random() * 13);var runidx = Math.floor(Math.random() * 3);var coordCity = Object.keys(center)[cityIndex];var coord = center[coordCity];option.series[0].data = [{city: coordCity,value: coord}];myChart.setOption(option, true); },2000);

Done!

總結

以上是生活随笔為你收集整理的Echarts实战案例代码(16)：geomap地图散点图和label轮播的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。