ECharts是一款非常強大的數據可視化工具,其中所包含的geo組件用來繪制地圖,可以根據json格式的數據來繪制不同區域的地圖。以下是一個簡單的例子:
// 引入echarts和geojson數據 import * as echarts from 'echarts'; import geoJson from './china.json'; // 初始化echarts實例 const myChart = echarts.init(document.getElementById('myChart')); // 設置地圖樣式 echarts.registerMap('china', geoJson); // 繪制地圖 myChart.setOption({ series: [ { type: 'map', map: 'china', data: [ { name: '北京', value: Math.round(Math.random() * 1000) }, { name: '天津', value: Math.round(Math.random() * 1000) }, { name: '上海', value: Math.round(Math.random() * 1000) }, // 更多省份... ] } ] });
這個例子中我們引入了echarts和geojson數據,將地圖渲染到一個id為myChart的dom元素中,并使用registerMap將geojson數據轉換為echarts能夠識別的地圖樣式。然后我們使用setOption方法,設置我們將要繪制的地圖的類型‘map’,地圖樣式‘china’,以及需要展示的數據。在數據中,我們可以通過name來綁定地圖上的區域,并通過value來呈現相應的數值。