echarts 基础实现我国地图板块

最新推荐文章于 2024-07-10 14:03:37 发布

旧梦星轨

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量866

点赞数 27

分类专栏： Echarts 文章标签： echarts 前端 javascript 数据可视化

本文链接：https://blog.csdn.net/qq_60961397/article/details/133656145

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

在这里插入图片描述
获取地理坐标

https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

直接上案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"
        integrity="sha512-EmNxF3E6bM0Xg1zvmkeYD3HDBeGxtsG92IxFt1myNZhXdCav9MzvuH/zNMBU1DmIPN6njrhX1VTbqdJxQ2wHDg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <!-- 导入地图坐标数据 -->
    <script src="./data.js"></script>  
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        function randomNum(min, max = 0) {
            min > max ? [min, max] = [max, min] : "";
            return parseInt((max - min + 1) * Math.random() + min);
        }
        const mapinit = () => {
            let datalist = [];
            datajson().features.forEach((item, index) => {
                datalist.push({
                    name: item.properties.name,
                    value: Math.round(randomNum(index * 0.5) * 5756)
                })
            })
            let myChart = echarts.init(document.getElementsByClassName('box')[0], null, { renderer: 'svg' });  //切换echarts 渲染模式
            echarts.registerMap("ChinaMap", datajson());   //注册地图数据
            myChart.setOption({
                title: {
                    text: '地图信息展示'
                },
                tooltip: { formatter: '{b}人口数：{c}' },
                visualMap: {
                    left: "left",
                    top: "center",
                    min: 0,
                    max: 80000,  //最大值范围
                    calculable: true, //控制区间
                    text: ["高", "低"],
                    // type:'piecewise',
                    inRange: {
                        color: [
                            "#2cd34e",
                            "#4caf50",
                            "#009688",
                            "#00bcd4",
                            "#2196f3",
                            "#3f51b5",
                            "#ffeb3b",
                            "#F44336",
                        ]
                    }
                },
                series: [{
                    type: 'map',
                    map: 'ChinaMap',
                    roam: true,
                    scaleLimit: {  //控制地图的缩小或放大倍率
                        min: 0.5,
                        max: 1.5
                    },
                    data: datalist
                }]
            })
        }
        mapinit();
    </script>
</body>

</html>

在这里插入图片描述

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————