echarts地圖城市散點圖
阿新 • • 發佈：2018-11-26
給每個城市自定義座標，根據每個城市的value值所在範圍給每個座標點設定不同的顏色，滑鼠懸停顯示tip，tip值為城市名稱以及value。
效果圖：
demo：點選檢視
程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>#charts{width:600px;height:600px;}</style> </head> <body> <div id="charts"></div> </body> <script src="../../../public/js/echarts.min.js"></script> <script src="china.js"></script> <script> var mycharts = echarts.init(document.getElementById('charts')) //自定義城市座標選單 var geoCoordMap = { "海門":[121.15,31.89], "鄂爾多斯":[109.781327,39.608266], "招遠":[120.38,37.35], "舟山":[122.207216,29.985295], "齊齊哈爾":[123.97,47.33], "鹽城":[120.13,33.38], "赤峰":[118.87,42.28], "青島":[120.33,36.07], "乳山":[121.52,36.89], "金昌":[102.188043,38.520089], }; //拼接物件陣列 var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name];//獲取座標 if (geoCoord) {//如果有座標 res.push({//建立物件陣列， name: data[i].name, value: geoCoord.concat(data[i].value) //用連線陣列的形式將value值加入 }); //res.push(geoCoord.concat(data[i].value)); //res.push(geoCoord.concat(data[i].name)); } } return res; }; option = { backgroundColor: '#404a59',//整個畫布背景 //標題元件 title: { text: '全國主要城市空氣質量', subtext: 'data from PM25.in', sublink: 'http://www.pm25.in', left: 'center', textStyle: { color: '#fff' } }, //提示框元件 tooltip: { trigger: 'item', "confine": true, "formatter": (p)=>{//自定義提示資訊 let dataCon = p.data; txtCon =dataCon.name+'<br>值:'+dataCon.value[2]; return txtCon; } }, //左下lengend visualMap: { min: 0,//最小 max: 300,//最大 splitNumber: 5,//共分5層 color: ['#ff6300','#eac736','#50a3ba'],//顏色從高到低依次漸變 textStyle: { color: '#fff' } }, //地圖區域樣式 geo: { map: 'china', label: { emphasis: { show: false } }, itemStyle: { //未啟用樣式 normal: { areaColor: '#323c48', borderColor: '#111' }, //啟用樣式 emphasis: { areaColor: '#2a333d' } } }, //資料 series: [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'geo', data: convertData([ {name: "海門", value: 9}, {name: "鄂爾多斯", value: 12}, {name: "招遠", value: 12}, {name: "舟山", value: 12}, {name: "齊齊哈爾", value: 14,}, {name: "鹽城", value: 15}, {name: "赤峰", value: 100}, {name: "青島", value: 18}, {name: "乳山", value: 300}, {name: "金昌", value: 19}, ]), symbolSize: 12, //直接在點上顯示標籤 label: { show:false, // normal: { // show: true // }, // emphasis: { // show: true // }, formatter:'{b}', offset:[15,-15],//文字的相對偏移 }, //標籤的樣式 itemStyle: { emphasis: { borderColor: '#fff', borderWidth: 1 } } } ] } mycharts.setOption(option); </script> </html>