免费获取echarts需要的省市县(区)的json数据

最新推荐文章于 2024-08-05 05:00:00 发布

浩星

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量8.3k

点赞数 9

分类专栏： map 文章标签： echarts地图所需要的json文件省市区的json文件省市县的json文件

本文链接：https://blog.csdn.net/qq_41619796/article/details/90141520

版权

map 专栏收录该内容

25 篇文章 23 订阅

订阅专栏

因为最近项目需要用echarts引入地图，最关键还是县一级的地图。所以今天找了好多资料，好多是要积分，而且还不是详细，只是到省市，满足不了我的需求，现在实现了一个效果，所以对资料做个整理：

先看效果：（注意县级是底了，乡镇是实现不了的）

方法一：

http://datav.aliyun.com/tools/atlas/#&lat=24.9792116201569&lng=104.86930847167969&zoom=10

在这里输入你需要的地址，比如兴义市（县级），然后就能得到json文件，如果是省市还能得到子级文件

方法二：（百度网盘，我整理的文件，包括省市的，县级太多，具体需要可以参考上面的方法获取）

https://pan.baidu.com/s/1TG73tvKnQNTtQBbejPOFaQ 验证码：a5b6

下面是实现这个效果的代码：

<!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/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="map"></div>
<script>


    var Value = [
        {name:"兴义市",value:"100"},
        // {name:"兴仁县",value:"50"},
        // {name:"普安县",value:"20"},
        // {name:"晴隆县",value:"90"},
        // {name:"贞丰县",value:"170"},
        // {name:"望谟县",value:"190"},
        // {name:"册亨县",value:"160"},
        // {name:"安龙县",value:"140"},
    ];
    // JSON
    $.getJSON('./json/xingyishi.json', function (data) {
        echarts.registerMap('xingyishi', data);
        var chart = echarts.init(document.getElementById('map'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value;
                },
                extraCssText:"height:20px;"
            },

            visualMap: {
                min: 0,
                max: 200,
                calculable: true,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                },
                text:['High','Low'],           // 文本，默认为数值文本
            },

            series: [
                {
                    name: 'USA PopEstimates',
                    type: 'map',
                    roam: true,
                    map: 'xingyishi',
                    label: {
                        show:true,
                        normal: {
                            show: true,
                            color:"#000",
                        },
                        emphasis: {
                            show: true,
                            fontSize:16,
                            color:"#fff"

                        }
                    },
                    itemStyle:{
                        emphasis:{label:{show:true}}
                    },
                    // 文本位置修正
                    textFixed: {
                        Alaska: [20, -20]
                    },
                    data:Value
                },

            ]
        };

        chart.setOption(option);
    });



</script>
</body>
</html>

到这里就结束了，欢迎来找我交流谈论更多