Echarts是一款非常流行的數據可視化工具,可以很方便地將數據以圖表的方式呈現出來。其中,行政邊界json是經常用到的一種數據格式,常被用來展示地圖的邊界信息。以下是如何使用echarts行政邊界json的詳細步驟。
var geoCoordMap = { '廣東': [113.23, 23.16], '湖南': [113, 28.21], //... }; // echarts的中國地圖配置 var option = { tooltip: {}, visualMap: { min: 0, max: 2500, left: 'left', top: 'bottom', text: ['High', 'Low'], calculable: true }, series: [{ name: 'Map', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, data: [{ name: '廣東', value: 2000 }, { name: '湖南', value: 1500 }] }] }; // 設置中國地圖的位置和大小 var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option);
上述代碼中,我們定義了一個地理坐標的映射表geoCoordMap
,用于存儲地理位置坐標。然后我們通過option
對象來進行echarts地圖的配置,包括提示框、可視化區域、系列數據等。最后通過setOption
方法來設置地圖的位置和大小。
上一篇vue制作拼多多
下一篇vue制作直播app