在使用echarts地圖中,可能會用到顯示各省份的數據和顯示各城市的數據。綜合了這兩種的配置項,只需傳四個參數便可完成對這兩種模式的切換。echarts
下面就是配置項代碼:spa
//地圖配置 //mapData:圖表所需數據;mapType:地圖模式或散點圖模式(即按省份顯示數據或按城市顯示數據) //minValue:視覺映射組件最小值;maxValue:視覺映射最大值 function _setMap(mapData, mapType, minValue, maxValue) { var option = {}; return option = { tooltip: { trigger: 'item', formatter: function (params) { return params.name;//自行定義formatter格式 } }, visualMap: { min: minValue || 0,//視覺映射組件的最小值 max: maxValue || 200,//視覺映射組件的最大值 calculable: true, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }, textStyle: { color: '#666' }, left: 'left', top: 'bottom', text: ['高', '低'], // 文本,默認爲數值文本 }, geo: { map: 'china', label: { emphasis: { show: false //城市模式下,鼠標移上去不顯示省份名稱 } }, itemStyle: { normal: { areaColor: '#eeeeee', borderColor: '#111' }, emphasis: { areaColor: '#00a695', } } }, series: [ { type: mapType, //mapType可選"scatter"或"map",即選擇散點圖模式或地圖模式(顯示省份數據爲地圖模式,顯示城市爲散點模式) mapType: 'china', coordinateSystem: 'geo', symbolSize: 14, label: { normal: { formatter: '{b}', //城市模式下在地圖上顯示該城市名稱 textStyle: { color: '#000' }, show: true }, emphasis: { show: true } }, data: mapData //當爲地圖模式即顯示省份數據時,數據格式爲: [{name: '山東',value: 183 }, {name: '雲南',value: 286 }] //當爲散點模式即顯示城市數據時,數據格式爲: [{name:"廈門",value:[118.1,24.46,183]},{name:"武漢",value:[114.31,30.52,199]}] //散點模式value表明的含義[經度,緯度,人數] } ] } }
例如,當顯示省份數據時,以下如:3d
當顯示城市時,以下:code