Free access to json data of provinces, cities and counties required by echarts

Because the recent project needs to use echarts to introduce maps, the most critical is the county level map. So today, I found a lot of data, many of which are for points, but they are not detailed. They just went to the provinces and cities, which can not meet my needs. Now they have achieved an effect, so I need to sort out the data:

First look at the effect: (pay attention to the fact that the county level is the bottom, and the township cannot be realized)

Method 1:

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

Enter the address you need here, such as Xingyi City (county level), and then you can get the json file. If it is a province, you can also get the sub file

Method 2: (there are too many documents in Baidu online disk, including provincial and municipal documents and county-level documents. Please refer to the above methods for specific needs)

https://pan.baidu.com/s/1TG73tvKnQNTtQBbejPOFaQ Verification Code: a5b6

Here is the code to achieve this effect:

<!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:"Xingyi",value:"100"},
        // {name: "Xingren county", value:"50"},
        // {name: "Pu'an County", value:"20"},
        // {name: "Qinglong County", value:"90"},
        // {name: "Zhenfeng county", value:"170"},
        // {name: "Wangmo county", value:"190"},
        // {name: "Ceheng county", value:"160"},
        // {name: "Anlong county", 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'],           // Text, default to numeric text
            },

            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}}
                    },
                    // Text position correction
                    textFixed: {
                        Alaska: [20, -20]
                    },
                    data:Value
                },

            ]
        };

        chart.setOption(option);
    });



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

It's over here. Welcome to talk to me about more

Tags: JSON JQuery

Posted on Tue, 12 Nov 2019 13:07:37 -0500 by cooldude832