echarts是一個基于javascript的可視化庫,可以方便的生成各種圖表。其中地圖作為一種常見的可視化形式,也可以通過echarts來展示。echarts支持使用json文件作為地圖數(shù)據(jù),下面我們來介紹如何生成這樣的json文件。
// 示例代碼 var geoCoordMap = { "北京市": [116.46, 39.92], "天津市": [117.2, 39.13], "上海市": [121.48, 31.22], // 省略其他省市數(shù)據(jù)... }; // 構(gòu)造geoJSON數(shù)據(jù) var convertData = function(data) { var res = []; for (var i = 0; i< data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; // echarts配置項 option = { // ...省略其他配置項,在此以series為例 series: [{ name: '地圖', type: 'map', map: 'china', roam: false, zoom: 1.2, label: { normal: { show: true // 顯示省份標(biāo)簽 }, emphasis: { show: false } }, data: convertData(data) // 使用構(gòu)造的geoJSON數(shù)據(jù) }] };
以上代碼展示了通過構(gòu)造geoJSON數(shù)據(jù)來生成echarts中所需的json文件的過程。首先定義了一個geoCoordMap對象,保存了省市名稱及其對應(yīng)的經(jīng)緯度坐標(biāo)。然后通過convertData函數(shù),將待展示的省市數(shù)據(jù)與geoCoordMap合并,并返回一個符合echarts要求的geoJSON格式的數(shù)據(jù)。最后在echarts的配置項中,將該數(shù)據(jù)傳遞給series中的map類型,即可完成地圖展示。