首页 前端知识 echarts 地图 map

echarts 地图 map

2024-11-05 23:11:34 前端知识 前端哥 554 897 我要收藏

近年来 数据可视化的需求变得越来越多
而地图在某些时候可能会更加直观 接下来就带大家
写一个简单的地图 最后会有gitee链接附上

一 html结构

<div style="position: relative">
    <div id="mapNew"></div>
</div>

二 css样式

#mapNew {
            width: 454px;
            height: 389px;
            background-color: pink;
        }

三 js重点部分
首先我们地图是通过echarts来展示的 我这里说的是数据展示这一块
在echarts渲染地图有一个mapType需要指定
当然你可以指定“china”“上海”啊这些echart预置的
我这里主要说说自定义的
代码部分:

       $.get("/sichuan.json", function (res) {
          echarts.registerMap('sichuan', res);// 注册四川地图 注册后 可以在mapType哪里使用
           let data =
            [
                {
                    "name": "蒲江库290吨",
                    "coord": [
                        "103.512570",
                        "30.202500"
                    ]
                },
                {
                    "name": "青白江库1073.5吨",
                    "coord": [
                        "104.257508",
                        "30.884415"
                    ]
                },
                {
                    "name": "大邑库30吨",
                    "coord": [
                        "103.527527",
                        "30.593149"
                    ]
                },
                {
                    "name": "自贡库43吨",
                    "coord": [
                        "104.779307",
                        "29.339240"
                    ]
                },
                {
                    "name": "广元库125吨",
                    "coord": [
                        "105.850419",
                        "32.441611"
                    ]
                },
                {
                    "name": "资阳库0吨",
                    "coord": [
                        "104.634437",
                        "30.134956"
                    ]
                }
            ]
         let series = [
            {
                type: 'map',
                mapType: 'sichuan', // 地图类型,这里使用中国地图
                animationDurationUpdate: 0,
                aspectScale: 0.7,
                center: data[2].coord,
                zoom: 1.2,
                top: 10,
                data: [
                    // 地图数据,例如:广东省的数据
                    {name: '成都市', value: 100}
                    // ... 其他省份数据
                ],
                tooltip: {
                    show: false
                },
                markPoint: {
                    symbol: 'circle', // 标记点形状 circle 圆形
                    symbolSize: 10, // 标记点大小
                    tooltip: {
                        show: false
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                color: '#F08D7E',
                                fontSize: 13,
                                fontWeight: 600,
                                fontFamily: "PingFang SC",
                                formatter: function (params) {
                                    return params.data.name
                                },
                            },
                            color: '#ffffff',
                            borderColor: '#F08D7E',
                            borderWidth: 2
                        },
                    },
                    data: data
                },

            }
            // 线的样式

        ]
      let option = {
            geo: [
                {
                    map: 'sichuan',
                    aspectScale: 0.7,
                    zoom: 1.2,
                    top: 10,
                    center: data[2].coord,
                    animationDurationUpdate: 0,
                    roam: true,
                    label: {
                        show: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        }
                    },
                    z: 5,//!*********重点*********可以看成是css的z-index,数字越大图层越高,我这里设置了5个,然后页面有点卡,根据实际需要来添加,3个其实就能看出效果了
                    itemStyle: {
                        areaColor: '#6899FF',//!****重点****每个图层的背景色,根据需要来调,由亮变暗,下面的几个颜色也一样
                        borderColor: '#ffffff',
                        borderWidth: 1,
                        shadowColor: '#6496fd',
                        shadowOffsetX: 0,
                        shadowOffsetY: 4,
                        shadowBlur: 10,
                        // 鼠标放上去后,样式改变
                        emphasis: {
                            // 图形的描边颜色
                            borderColor: '#fff',
                            borderWidth: '1',
                            // 阴影色
                            areaColor: '#548afa',
                            label: {
                                show: false,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 10,
                                },
                            }
                        },
                    },

                    tooltip: {
                        show: false
                    },
                },
                {
                    map: 'sichuan',
                    aspectScale: 0.7,
                    center: data[2].coord,
                    zoom: 1.2,
                    top: 10,
                    animationDurationUpdate: 0,
                    roam: true,
                    z: 4,//变小,也就是被压在下面
                    itemStyle: {
                        areaColor: '#6899FF',//记得改颜色
                        borderColor: '#ffffff',
                        borderWidth: 1,
                        shadowColor: '#6496fd',
                        shadowOffsetX: 0,
                        shadowOffsetY: 4,
                        shadowBlur: 10,
                    },
                },
                {
                    map: 'sichuan',
                    aspectScale: 0.7,
                    animationDurationUpdate: 0,
                    zoom: 1.2,
                    top: 10,
                    center: data[2].coord,
                    roam: true,
                    z: 4,//变小,也就是被压在下面
                    itemStyle: {
                        areaColor: '#6899FF',//记得改颜色
                        borderColor: '#ffffff',
                        borderWidth: 1,
                        shadowColor: '#6496fd',
                        shadowOffsetX: 0,
                        shadowOffsetY: 4,
                        shadowBlur: 10,
                    },
                },
            ],
           series: series
      }
 myChartMap = echarts.init(document.getElementById('mapNew'));//获取id
        myChartMap.setOption(option);
        myChartMap.on('georoam', (params) => {
            let option = myChartMap.getOption();//获得option对象
            let markPoint = myChartMap.getOption().series[0];
            let len = option.geo.length;
            if (params.zoom != null) { //捕捉到缩放时
                for (var i = 0; i < len; i++) {
                    option.geo[i].center = option.geo[0].center;
                    option.geo[i].zoom = option.geo[0].zoom;
                }
                markPoint.center = option.geo[0].center;
                markPoint.zoom = option.geo[0].zoom;
            } else {//捕捉到拖曳时
                for (var i = 0; i < len; i++) {
                    option.geo[i].center = option.geo[0].center;
                }
                markPoint.center = option.geo[0].center;
            }
            myChartMap.setOption(option);//设置option
            myChartMap.setOption({
                series: [markPoint]
            });
        })

最后也是附上效果图

以及源码地址:https://gitee.com/lymyself5926/echarts-map

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20088.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!