Echarts3实例 map地图加载点数据

╰半橙微兮° 2021-09-17 09:22 677阅读 0赞

### 前言 ###

Echarts map地图展示坐标点，并能更具不同的属性值进行区分，展示点数据依赖于Echarts的散点图`scatter`、`effectScatter`，底图依赖于`geo`。

`geo`：地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。  
    `scatter`：散点（气泡）图。直角坐标系上的散点图可以用来展现数据的 x，y 之间的关系，如果数据项有多个维度，其它维度的值可以通过不同大小的 symbol 展现成气泡图，也可以用颜色来表现。这些可以配合 visualMap 组件完成。

`effectScatter`：带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                height: 100%;
            }
            *{
                margin: 0px;
                height: 0px;
            }
            #map{
                width: 800px;
                height: 600px;
                border: 1px solid red;
            }
        </style>
        <script src="js/echarts.min.js"></script>
        <script src="js/jquery-3.1.1.js"></script>
    </head>
    <body>
    <div id="map"></div>
    <script>
    
        var geoCoordMap = { //这里放你打点的坐标信息，虚拟信息
            '莱芜市':[117.678856,36.223361],
            '威海市':[122.121804,37.524054],
            '滨州市':[117.982412,37.392056],
            '临沂市':[118.364156,35.119965],
            '淄博市':[118.069799,36.82475],
            '日照市':[119.532384,35.425496],
            '烟台市':[121.454902,37.480081],
            '菏泽市':[115.48038,35.248354],
            '青岛市':[120.397057,36.07041],
            '东营市':[118.681509,37.447084],
            '潍坊市':[119.164438,36.71744],
            '济南市':[117.122338,36.661876],
            '聊城市':[115.986305,36.465225],
            '泰安市':[117.090143,36.212179],
            '枣庄市':[117.329308,34.824652],
            '济宁市':[116.588817,35.433025]
        };
        var locValue = [
            {name:"莱芜市",value:"100"},
            {name:"威海市",value:"50"},
            {name:"滨州市",value:"20"},
            {name:"临沂市",value:"90"},
            {name:"淄博市",value:"170"},
            {name:"日照市",value:"190"},
            {name:"德州市",value:"160"},
            {name:"烟台市",value:"140"},
            {name:"菏泽市",value:"130"},
            {name:"青岛市",value:"110"},
            {name:"东营市",value:"105"},
            {name:"潍坊市",value:"142"},
            {name:"济南市",value:"80"},
            {name:"聊城市",value:"184"},
            {name:"泰安市",value:"155"},
            {name:"枣庄市",value:"130"},
            {name:"济宁市",value:"140"}
        ];
        var convertData = function (geoCoordMap,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;
        };
    
        // JSON
        $.getJSON('./json/shandong.json', function (data) {
            echarts.registerMap('shandong', data);
            var chart = echarts.init(document.getElementById('map'));
            var option = {
                backgroundColor: '#404a59',
                title: {
                    text: '点展示',
                    x:'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + ' : ' + params.value[2];
                    },
                    extraCssText:"height:20px;"
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x:'right',
                    data:['pm2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    min: 0,
                    max: 200,
                    calculable: true,
                    inRange: {
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                geo: {
                    map: 'shandong',
                    roam:true,
                    aspectScale:1,
                    label: {
                        emphasis: {
                            show: true,
                            color:"#fff"
    
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#323c48',
                            borderColor: '#111'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: [
                    {
                        name: 'pm2.5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap,locValue).slice(0,4),
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    },
                    {
                        name: 'pm2.5',
                            type: 'scatter',
                        coordinateSystem: 'geo',
                            data: convertData(geoCoordMap,locValue).slice(4,8),
                        symbolSize: 12,
                        label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                    borderWidth: 1
                            }
                        }
                    },
                    { //没有visualMap的情况，同颜色大小标识不同的等级
                        name: 'pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap,locValue).slice(8,12),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ddb926'
                            }
                        }
                    },
                    {
                        name: 'pm2.5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(geoCoordMap,locValue).slice(12,18),
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        showEffectOn: 'emphasis',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#f4e925',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        zlevel: 1
                    },
                ]
            };
    
            chart.setOption(option);
        });
    
    
    
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/b5a85a9abe574ac1b220330b806bfee5.png