echarts地图中城市与省份之间的切换

Posted 十盏

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts地图中城市与省份之间的切换相关的知识,希望对你有一定的参考价值。

在使用echarts地图中,可能会用到显示各省份的数据和显示各城市的数据。综合了这两种的配置项,只需传四个参数即可完成对这两种模式的切换。

下面就是配置项代码:

//地图配置
//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代表的含义[经度,纬度,人数]
            }
        ]
    }
}

 例如,当显示省份数据时,如下如:

 当显示城市时,如下:

 

以上是关于echarts地图中城市与省份之间的切换的主要内容,如果未能解决你的问题,请参考以下文章

echarts3的中国地图省份名称位置都不在省份中间,位置怎么调整?

Echarts 地图 省份的颜色自定义如何设置?

Echarts 地图 省份的颜色自定义如何设置?

Echarts 地图 省份的颜色自定义如何设置?

echarts map能把某个省份去除不显示吗

Vue环境下用ECharts绘制中国地图,并实现拖动缩放与各省份自动轮播高亮显示