1. 程式人生 > >使用百度echarts製作視覺化大屏——加入地圖

使用百度echarts製作視覺化大屏——加入地圖

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);