在使用ECharts創建可視化地圖時,通常我們使用JSON格式的數據來顯示地理信息、數據和標記。但是,使用JSON地圖不僅需要準備大量的數據,而且極易出錯。 因此,在本文中,我們將介紹如何使用JavaScript代碼和GeoJSON格式的數據創建地圖,而無需使用復雜的JSON。
var myChart = echarts.init(document.getElementById('map')); var geoJSON = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "name": "New York" }, "geometry": { "type": "Point", "coordinates": [-74.0059, 40.7128] } }, { "type": "Feature", "properties": { "name": "Los Angeles" }, "geometry": { "type": "Point", "coordinates": [-118.2437, 34.0522] } }] }; echarts.registerMap('geoJSON', geoJSON); option = { title: { text: 'GeoJSON Map' }, tooltip: {}, series: [{ type: 'map', mapType: 'geoJSON', data: [{ name: 'New York', value: 1 }, { name: 'Los Angeles', value: 1 }], label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderWidth: 1, borderColor: 'black' }, emphasis: { areaColor: '#f2d5ad' } } }] }; myChart.setOption(option);
首先,我們需要GeoJSON的數據格式來表示地理信息。 在這個例子中,我們將使用兩個點來表示紐約和洛杉磯的位置。 然后,我們使用echarts.registerMap()函數來注冊自定義地圖。 最后,我們創建一個series對象來定義地圖的樣式和標記。
通過使用GeoJSON格式的數據和ECharts的JavaScript代碼,我們可以輕松地創建可視化地圖而無需使用繁瑣的JSON格式。
上一篇vue ele時間
下一篇vue切換input讀寫