Echarts3实例 map地图加载点数据

最新推荐文章于 2024-06-11 21:36:57 发布

idomyway

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量2.4w

点赞数 4

分类专栏： Echarts 文章标签： echarts map effectScatter scatter geo

本文链接：https://blog.csdn.net/idomyway/article/details/85073297

版权

Echarts 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言

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

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

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

实现效果

在这里插入图片描述

实现代码

<!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>

idomyway

关注

4
点赞
踩
37

收藏

觉得还不错? 一键收藏
6
评论
Echarts3实例 map地图加载点数据

前言&nbsp;&nbsp;&nbsp;&nbsp;Echarts map地图展示坐标点，并能更具不同的属性值进行区分，展示点数据依赖于Echarts的散点图scatter、effectScatter，底图依赖于geo。&nbsp;&nbsp;&nbsp;&nbsp;geo：地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。&nbsp;&nbsp;&nbsp;...
复制链接

扫一扫

专栏目录