ECharts 是一個由百度開源的數據可視化庫,提供了各種餅圖、折線圖、散點圖等常見的可視化圖表。同時,ECharts 也提供了地圖組件,支持使用 GeoJSON 格式來呈現各種地圖。
調用 GeoJSON 格式的地圖非常簡單,我們只需要在 option 中配置好geo
、series
等參數即可。以下代碼展示了如何使用 ECharts 調用一個簡單的中國地圖。
var myChart = echarts.init(document.getElementById('main')); var geoJson = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [ [ [73.124302,18.404324], ... [73.496955,18.415527], [73.124302,18.404324] ] ] }, properties: { name: '中國' } }] }; echarts.registerMap('china', geoJson); var option = { title: { text: '中國地圖' }, tooltip: { trigger: 'item', formatter: '{b}' }, geo: { map: 'china', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: '#fff', borderColor: '#111' }, emphasis: { areaColor: '#c1ffe1' } } }, series: [{ name: '中國', type: 'scatter', coordinateSystem: 'geo', data: [], symbolSize: function(val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: '#ddb926' } } }] }; myChart.setOption(option);
以上代碼先定義了一個包含中國地圖 GeoJSON 數據的變量geoJson
,并使用echarts.registerMap()
注冊地圖數據。然后在 option 中配置了地圖的展示方式、樣式等參數。最后使用myChart.setOption()
將配置好的 option 設置給圖表即可。
上一篇c 字符串到json對象
下一篇c 字典表轉json