使用百度echarts製作視覺化大屏——加入地圖
阿新 • • 發佈:2019-01-08
var geoCoordMap = { '上海': [121.4648,31.2891], '東莞': [113.8953,22.901], '東營': [118.7073,37.5513], '中山': [113.4229,22.478], '臨汾': [111.4783,36.1615], '臨沂': [118.3118,35.2936], '丹東': [124.541,40.4242], '麗水': [119.5642,28.1854], '烏魯木齊': [87.9236,43.5883], '佛山': [112.8955,23.1097], '保定': [115.0488,39.0948], '蘭州': [103.5901,36.3043], '包頭': [110.3467,41.4899], '北京': [116.4551,40.2539], '北海': [109.314,21.6211], '南京': [118.8062,31.9208], '南寧': [108.479,23.1152], '南昌': [116.0046,28.6633], '南通': [121.1023,32.1625], '廈門': [118.1689,24.6478], '台州': [121.1353,28.6688], '合肥': [117.29,32.0581], '呼和浩特': [111.4124,40.4901], '咸陽': [108.4131,34.8706], '哈爾濱': [127.9688,45.368], '唐山': [118.4766,39.6826], '嘉興': [120.9155,30.6354], '大同': [113.7854,39.8035], '大連': [122.2229,39.4409], '天津': [117.4219,39.4189], '太原': [112.3352,37.9413], '威海': [121.9482,37.1393], '寧波': [121.5967,29.6466], '寶雞': [107.1826,34.3433], '宿遷': [118.5535,33.7775], '常州': [119.4543,31.5582], '廣州': [113.5107,23.2196], '廊坊': [116.521,39.0509], '延安': [109.1052,36.4252], '張家口': [115.1477,40.8527], '徐州': [117.5208,34.3268], '德州': [116.6858,37.2107], '惠州': [114.6204,23.1647], '成都': [103.9526,30.7617], '揚州': [119.4653,32.8162], '承德': [117.5757,41.4075], '拉薩': [91.1865,30.1465], '無錫': [120.3442,31.5527], '日照': [119.2786,35.5023], '昆明': [102.9199,25.4663], '杭州': [119.5313,29.8773], '棗莊': [117.323,34.8926], '柳州': [109.3799,24.9774], '株洲': [113.5327,27.0319], '武漢': [114.3896,30.6628], '汕頭': [117.1692,23.3405], '江門': [112.6318,22.1484], '瀋陽': [123.1238,42.1216], '滄州': [116.8286,38.2104], '河源': [114.917,23.9722], '泉州': [118.3228,25.1147], '泰安': [117.0264,36.0516], '泰州': [120.0586,32.5525], '濟南': [117.1582,36.8701], '濟寧': [116.8286,35.3375], '海口': [110.3893,19.8516], '淄博': [118.0371,36.6064], '淮安': [118.927,33.4039], '深圳': [114.5435,22.5439], '清遠': [112.9175,24.3292], '溫州': [120.498,27.8119], '渭南': [109.7864,35.0299], '湖州': [119.8608,30.7782], '湘潭': [112.5439,27.7075], '濱州': [117.8174,37.4963], '濰坊': [119.0918,36.524], '煙臺': [120.7397,37.5128], '玉溪': [101.9312,23.8898], '珠海': [113.7305,22.1155], '鹽城': [120.2234,33.5577], '盤錦': [121.9482,41.0449], '石家莊': [114.4995,38.1006], '福州': [119.4543,25.9222], '秦皇島': [119.2126,40.0232], '紹興': [120.564,29.7565], '聊城': [115.9167,36.4032], '肇慶': [112.1265,23.5822], '舟山': [122.2559,30.2234], '蘇州': [120.6519,31.3989], '萊蕪': [117.6526,36.2714], '菏澤': [115.6201,35.2057], '營口': [122.4316,40.4297], '葫蘆島': [120.1575,40.578], '衡水': [115.8838,37.7161], '衢州': [118.6853,28.8666], '西寧': [101.4038,36.8207], '西安': [109.1162,34.2004], '貴陽': [106.6992,26.7682], '連雲港': [119.1248,34.552], '邢臺': [114.8071,37.2821], '邯鄲': [114.4775,36.535], '鄭州': [113.4668,34.6234], '鄂爾多斯': [108.9734,39.2487], '重慶': [107.7539,30.1904], '金華': [120.0037,29.1028], '銅川': [109.0393,35.1947], '銀川': [106.3586,38.1775], '鎮江': [119.4763,31.9702], '長春': [125.8154,44.2584], '長沙': [113.0823,28.2568], '長治': [112.8625,36.4746], '陽泉': [113.4778,38.0951], '青島': [120.4651,36.3373], '韶關': [113.7964,24.7028]};然後根據地理位置賦值,虛擬資料,程式碼如下:var mapData=[];for(key in geoCoordMap){ var geoCoord = geoCoordMap[key]; mapData.push({name:key,value:geoCoord.concat((Math.random()*1000).toFixed(2))});}然後做圖就行了。map_chart = echarts.init(document.getElementById_x('map'));map_option = { title : {show:false}, tooltip : { trigger: 'item', formatter: function(params) { if (typeof(params.value)[2] == "undefined") { return params.name + ' : ' + params.value; } else { return params.name + ' : ' + params.value[2]; } }, textStyle: { color: '#FFF', fontSize:24 } }, legend: { show:false }, geo: { map: 'china', label: { normal: {show: false}, emphasis: {show: false} }, roam: false, itemStyle: { normal: { areaColor: 'rgba(0,153,255,0.6)', borderColor: '#09F' }, emphasis: { areaColor: 'rgba(0,153,255,0.6)', borderColor: '#09F' } }},series: [{ //普通小點 name: '戰略佈局點', type: 'scatter', coordinateSystem: 'geo', zlevel: 1, rippleEffect: { brushType: 'stroke' }, symbolSize: function (val) { return val[2] / 30; }, label: { normal: {show: false}, emphasis: {show: false} }, itemStyle: { normal: {color: 'rgba(255,255,0,0.8)'}, emphasis: {color: 'rgba(246,33,87,1)'} }, data: mapData},{ //有擴散效果的大點 name: '戰略佈局TOP5', type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, hoverAnimation: true, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, fontFamily:'微軟雅黑', fontSize: 24, color:'#FFF', formatter: '{b}', position: 'right', shadowBlur: 5, shadowColor: '#000' }, emphasis: { show: true }},symbolSize: function (val) { return val[2] / 30;},itemStyle: { normal: { color: 'rgba(255,255,255,1)' }},data: mapData.sort(function(a, b) { return b.value[2] - a.value[2]; }).slice(0, 5)},{//有地理位置的標記,同時顯示值 name: '點', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', symbolSize: function(val) { return val[2]/10; }, label: { normal: { show: true, fontFamily:'Arial, Helvetica, sans-serif', formatter:'{@[2]}', textStyle: { color: '#FFF', fontSize: 18, } }},itemStyle: { normal: { color: 'rgba(246,33,87,1)', //標誌顏色 }},zlevel: 3, data: mapData.sort(function(a, b) { return b.value[2] - a.value[2]; }).slice(0, 5)}]};map_chart.setOption(map_option, true);