Echarts是一款強大的JavaScript數據可視化庫。其中的地圖可視化模塊就可以用來展示地理位置信息以及區域分布數據。在Echarts中,使用JSON來描述地圖數據,在地圖可視化的過程中,JSON文件的格式尤為關鍵。
var geoCoordMap = { '北京': [116.407395, 39.904211], '上海': [121.473695, 31.230416], '廣州': [113.280637, 23.125178], // 更多省市信息... }; // 數據格式為: // { // '北京': 233, // '上海': 321, // '廣州': 223, // // 更多省市信息... // } var data = [ { name: '北京', value: 233 }, { name: '上海', value: 321 }, { name: '廣州', value: 223 }, // 更多省市信息... ]; var option = { series: [ { type: 'map', map: 'china', label: { show: true }, // 樣式 itemStyle: { areaColor: '#ccc', borderColor: '#fff' }, // 數據 data: data }, { type: 'scatter', coordinateSystem: 'geo', data: [ { name: '北京', value: geoCoordMap['北京'] }, { name: '上海', value: geoCoordMap['上海'] }, { name: '廣州', value: geoCoordMap['廣州'] }, // 更多省市信息... ], symbolSize: 10, // 標注點樣式 itemStyle: { color: '#ff0' }, // 標注點標簽 label: { show: true, formatter: '' } } ] }; // 按照Echarts的規范,需要設置容器和實例化對象 var container = document.getElementById('container'); var chart = echarts.init(container); chart.setOption(option);
以上代碼為使用Echarts展示中國地圖,并在地圖上標注城市分布點??梢钥吹皆谠撌纠?,JSON數據中,省市名稱對應的經緯度信息通過指定一個對象,賦值到geoCoordMap
變量中;數據則以name
和value
的形式放到data
變量中,最終傳遞到了series
數組中。這些信息都需要根據具體需求進行調整和完善,以達到更好的呈現效果。
上一篇python 類函數傳參
下一篇python 類對象聚合