lemon_echarts_map_statistics

功能描述

echarts中国地图数据显示，是在echarts基础上扩展的地图热点数据显示功能

依赖的插件

ECharts

快速使用

    <div id="map_1" style="height: 600px;width: 1000px;"></div>
    
    <script type="text/javascript" src="./script/echarts.min.js"></script>
    <script type="text/javascript" src="./script/china.js"></script>
    <script type="text/javascript">
    var data2 = [
                        {name: '商丘', value: 9},
                        {name: '鄂尔多斯', value: 12},
                        {name: '招远', value: 12},
                        {name: '舟山', value: 12},
                        {name: '日照', value: 21},
                        {name: '胶南', value: 22},
                        {name: '大庆', value: 279}
    ];
    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;
    };
    //地图容器
    var map_1 = echarts.init(document.getElementById('map_1'));
    //地图容器
    //34个省、市、自治区的名字拼音映射数组
    
    
    //网络零售当期分布
    var map_1_option = {
    
        tooltip : {
            trigger: 'item'
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: '#d1d1d1',
                    borderColor: '#111',
                },
                emphasis: {
                    areaColor: '#d1d1d1'
                }
            }
        },
        series : [
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        color: '#f75749',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
        };
    
    var data = [
        {
            "name":"北京市", "log":"116.46", "lat":"39.92",
            "children":[
                {"name":"北京", "log":"116.46", "lat":"39.92"},
                {"name":"昌平", "log":"116.2", "lat":"40.22"}
            ]
        },
        {
            "name":"上海市", "log":"121.48", "lat":"31.22", 
            "children":[
                {"name":"上海", "log":"121.48", "lat":"31.22"},
                {"name":"嘉定", "log":"121.24", "lat":"31.4"},
                {"name":"宝山", "log":"121.48", "lat":"31.41"},
                {"name":"崇明", "log":"121.4", "lat":"31.73"}
            ]
        },
        {
            "name":"天津市", "log":"117.2", "lat":"39.13", 
            "children":[
                {"name":"天津", "log":"117.2", "lat":"39.13"},
                {"name":"宁河", "log":"117.83", "lat":"39.33"},
                {"name":"宝坻", "log":"117.3", "lat":"39.75"},
                {"name":"武清", "log":"117.05", "lat":"39.4"}
            ]
        }
    ];
    
    var geoCoordMap = {
        
    };
    
    for (infoIndex = 0; infoIndex < data.length; infoIndex++) { 
        var info = data[infoIndex];
     	var city = info.children;
        for(var i =0;i<city.length;i++){
            var citydetail = new Array();
            var name = city[i].name;
            geoCoordMap[name]= citydetail;
            var lat = parseFloat(city[i].lat);
            var log = parseFloat(city[i].log);
            citydetail.push(log);
            citydetail.push(lat);
        }
    }
    
     map_1_option.series[0].data = convertData(data2.sort(function (a, b) {
                return b.value - a.value;
            })),
    map_1.setOption(map_1_option);
    </script>

特别说明

1、参数不限制， 例如：var data = [{name:'城市名称',lon:'经度',lat:'纬度'}];
2、回调可用log查看自定义参数，不限制
3、使用本插件注意会与同ECharts插件冲突，请开发者谨慎选择，本插件为1.0版本，后续会陆续更新。
是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24