Echarts 绘制地图(中国、省市、区县),保姆级教程!

https://blog.youkuaiyun.com/2301_78542842/article/details/139608529?ops_request_misc=%257B%2522request%255Fid%2522%253A%252297e00f3ce874144ed9759d16ccd5b138%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=97e00f3ce874144ed9759d16ccd5b138&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-139608529-null-null.142v100pc_search_result_base8&utm_term=echarts%E7%9C%81%E5%B8%82%E5%8C%BA%E5%8E%BF%E5%9C%B0%E5%9B%BE&spm=1018.2226.3001.4187

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.5.1.min.js"></script>
    <script src="echarts5.5.0.js"></script>
    <title>Document</title>
    <script>

            var s = 'https://geo.datav.aliyun.com/areas_v3/bound/511300_full.json'; //json 来源地址  //https://datav.aliyun.com/portal/school/atlas/area_selector
            var data = JSON.parse(s);
         console.log(data)

         $(function(){
            initEc(data);
         })

         function initEc(d){
            // 初始化统计图对象
            var myChart = echarts.init($("#chartsDOM")[0]);
            // 注册地图(数据放在axios返回对象的data中哦)
            echarts.registerMap('NC', d);
            var option = {
                visualMap: {
                    min: 555.5,
                    max: 2235,
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['gray','lightskyblue', 'yellow', 'orangered']
                    }
                    },
                    title: {
                        text: '南充市区县面积图(/平方公里)'
                    },
                    tooltip: {},
                series: [
                {
                    name: '南充市区县面积图(/平方公里)',
                    type: 'map',
                    map: 'NC',// 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
                    label: {
						show: true
                    },
                    data: [
                    { name: '阆中市', value: 1878 },
                    { name: '仪陇县', value: 1767 },
                    { name: '南部县', value: 2235 },
                    { name: '营山县', value: 1633 },
                    { name: '蓬安县', value: 1334 },
                    { name: '顺庆区', value: 555.5 },
                    { name: '西充县', value: 1106 },
                    { name: '高坪区', value: 806 },
                    { name: '嘉陵区', value: 1278 }
                    ]
                }
                ]
            };
            myChart.setOption(option);
         }
        

    </script>
</head>
<body>
    <div style="width:800px;height:600px" id="chartsDOM"></div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值