Angbike个人博客 > JavaScript/JQuery > 使用echarts结合地图经纬度坐标信息实现重庆热点echarts图

使用echarts结合地图经纬度坐标信息实现重庆热点echarts图

HTML代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>重庆热点地图</title>
    <style type="text/css">
        .area-echarts{
            width: 100%;
        }
    </style>
</head>
<body>
    
    <div class="area-echarts" id="areaEcharts"></div>
    
</body>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts3.8.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

</html>

注意:此demo使用echarts版本需要3.8

JS代码:

/**
 * echarts 重庆热点地图
 * @param {Object} window
 * @param {Object} $
 */
(function(window, $){

    var myChart; // 初始化echarts图表
    var mapDataURL = "./chongqing.json"; // 定义json数据路径
    var arrayMax;
    var arrayMin = 9;
    var maxSize4Pin = 100;
    var minSize4Pin = 20;
    var districtData = []; // 区县显示数据

    // 区县中心点经纬度
    var geoCoordMap = {
        '渝中区': [106.568892,29.55275],
        '大渡口区': [106.4905, 29.4214],
        '江北区': [106.574271,29.606703],
        '沙坪坝区': [106.456878,29.541145],
        '九龙坡区': [106.510676,29.502272],
        '南岸区': [106.644428,29.500297],
        '北碚区': [106.395612,29.805108],
        '渝北区': [106.631187,29.718143],
        '巴南区': [106.540257,29.402408],
        '万州区': [108.408661,30.807667],
        '涪陵区': [107.389298,29.703113],
        '永川区': [105.927376,29.356117],
        '璧山区': [106.227305,29.592024],
        '大足区': [105.721733,29.707032],
        '綦江区': [106.651362,29.028067],
        '江津区': [106.259281,29.290069],
        '合川区': [106.27613,29.972084],
        '黔江区': [108.770678,29.53361],
        '长寿区': [107.081283,29.857996],
        '南川区': [107.099266,29.157891],
        '铜梁区': [106.056404,29.844811],
        '潼南区': [105.840556,30.191013],
        '荣昌区': [105.594623,29.405002],
        '开州区': [108.393135,31.160711],
        '梁平区': [107.769581,30.65423],
        '武隆区': [107.760025,29.325601],

        '城口县': [108.664214,31.947633],
        '丰都县': [107.730895,29.8635],
        '垫江县': [107.33339,30.327717],
        '忠县': [108.039002,30.29956],
        '云阳县': [108.697324,30.930613],
        '奉节县': [109.463987,31.018498],
        '巫山县': [109.879153,31.074834],
        '巫溪县': [109.570062,31.398604],

        '石柱土家族自治县': [108.114069,29.999285],
        '酉阳土家族苗族自治县': [108.767747,28.841244],
        '秀山土家族苗族自治县': [109.007094,28.447997],
        '彭水苗族土家族自治县': [108.165538,29.293902]
    }

    echartsHot = {

        init: function(){

            // 区县显示数据
            districtData = [
                { name: '渝中区', value: 200 },
                { name: '大渡口区', value: 190 },
                { name: '江北区', value: 185 },
                { name: '沙坪坝区', value: 180 },
                { name: '九龙坡区', value: 175 },
                { name: '南岸区', value: 160 },
                { name: '北碚区', value: 5 },
                { name: '渝北区', value: 5 },
                { name: '巴南区', value: 10 },
                { name: '万州区', value: 15 },
                { name: '涪陵区', value: 20 },
                { name: '永川区', value: 25 },
                { name: '璧山区', value: 30 },
                { name: '大足区', value: 35 },
                { name: '綦江区', value: 40 },
                { name: '江津区', value: 45 },
                { name: '合川区', value: 50 },
                { name: '黔江区', value: 55 },
                { name: '长寿区', value: 60 },
                { name: '南川区', value: 65 },
                { name: '铜梁区', value: 70 },
                { name: '潼南区', value: 75 },
                { name: '荣昌区', value: 80 },
                { name: '开州区', value: 85 },
                { name: '梁平区', value: 90 },
                { name: '武隆区', value: 95 },

                { name: '城口县', value: 100 },
                { name: '丰都县', value: 105 },
                { name: '垫江县', value: 110 },
                { name: '忠县', value: 115 },
                { name: '云阳县', value: 120 },
                { name: '奉节县', value: 125 },
                { name: '巫山县', value: 130 },
                { name: '巫溪县', value: 135 },

                { name: '石柱土家族自治县', value: 140 },
                { name: '秀山土家族苗族自治县', value: 145 },
                { name: '酉阳土家族苗族自治县', value: 150 },
                { name: '彭水苗族土家族自治县', value: 155 }
            ];

            // 图表高度
            var winHeight = $(window).height();
            $("#areaEcharts").css("height",winHeight - 100);

            // 取数据最大值
            var valArr = [];
            for(var i = 0; i < districtData.length; i++){
                valArr.push(districtData[i].value);
            }
            arrayMax = Math.max.apply(null, valArr) + 200;
            arrayMin = Math.min.apply(null, valArr);

            // 初始化图表到dom
            myChart = echarts.init(document.getElementById('areaEcharts'));

            // 显示加载动画效果
            myChart.showLoading();

        },

        // 获取json中地图经纬度数据
        getJsonData: function(){
            $.getJSON(mapDataURL, function(geoJson){

                // 注册可用地图
                echarts.registerMap('chongqing', geoJson);

                // 隐藏加载动画效果
                myChart.hideLoading();

                // 图表初始化
                echartsHot.echartsInit();

            })
        },

        // 处理地图中心点经纬度及点数据集合
        mapPointDataInitialization: function(){
            var dataResult = [];
            // 合并区县经纬度信息及描点数据信息到数组
            for (var i = 0; i < districtData.length; i++) {
                var geoCoord = geoCoordMap[districtData[i].name];
                if (geoCoord) {
                    dataResult.push({
                        name: districtData[i].name,
                        value: geoCoord.concat(districtData[i].value)
                    });
                }
            }
            return dataResult;
        },

        // echarts图表初始化
        echartsInit: function(){

            // 合并经纬度及地图需要的显示数据
            var echartsData = echartsHot.mapPointDataInitialization(districtData);

            var options = {

                tooltip: {
                    trigger: 'item',
                    formatter: function(data){
                        if(typeof (data.value)[2] == "undefined"){
                            return '<font size="4">' + data.name + ' : ' + data.value + '</font>';
                        }else{
                            return '<font size="4">' + data.name + ' : ' + data.value[2] + '</font>';
                        }
                    }
                },
                geo: {
                    show: true,
                    map: 'chongqing',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#fcf9f2',
                            borderColor: '#ff1717'
                        },
                        emphasis: {
                            areaColor: '#ffa35c'
                        }
                    }
                },
                series: [
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: echartsData,
                        symbolSize: '5',
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: true,
                                color: '#333333'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#333333',
                                opacity: '0.5'
                            }
                        }
                    },
                    {
                        type: 'map',
                        map: 'chongqing',
                        geoIndex: 0,
                        aspectScale: 0.75,
                        showLegendSymbol: false,
                        roam: true,
                        animation: true,
                        data: districtData
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function (val) {
                            var a = (maxSize4Pin - minSize4Pin) / (arrayMax - arrayMin);
                            var b = minSize4Pin - a * arrayMin;
                            b = maxSize4Pin - a * arrayMax;
                            return a * val[2] + b;
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#FFFFFF',
                                    fontSize: 10
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#333333'
                            }
                        },
                        zlevel: 6,
                        data: echartsData,
                    }
                ]
            };
            myChart.setOption(options);
        },


    }

    $(function(){

        echartsHot.init();
        echartsHot.getJsonData(); //获取Json文本中重庆地图区划数据

    })

})(window, $)

效果截图:
1.gif

下载地址:https://pan.baidu.com/s/1OmQ-O2cENx0qwFwzisjBRw
提取密码:6bj2
解压密码:www.angbike.com

博客评论已关闭