echarts地圖中城市與省份之間的切換

在使用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

相關文章
相關標籤/搜索