There was a need for a large screen display in a recent project to show a map of the borough. In the process of searching hard, I found that most of the information in this aspect is very little and most of them are downloaded by CSDN, which is really troublesome. Here is a summary for your reference.

Directly above

Key knowledge points

Geo data

Geo is echarts render data format, GEO is the data base, with basic data is easy to achieve the above effect.

visualMap

The visualMap is a visual mapping component that is used for “visual coding”, that is, mapping data to visual elements (visual channels), and the rendering of the map depends on this configuration.

<script type="text/javascript"> // Based on the prepared DOM, initialize echarts instance $.get(".. Json ", function(huaianJson) {echarts. RegisterMap ("huaian", huaianJson); var chart = echarts.init(document.getElementById("echartMap")); chart.setOption({ backgroundColor: "#404a59", visualMap: { type: "continuous", min: 0, max: 100, text: ["High", "Low"], realtime: false, calculable: true, color: ["#3ADEF1", "#0089FC", "#0057FE"], show: false }, series: [ { type: "map", mapType: "huaian", roam: false, label: { normal: { show: true, color: "#fff" }, emphasis: { show: True}}, itemStyle: {emphasis: {label: {show: true}}, data: [{name: "Xuyi ", value: 80}, {name:" xuyi ", value: 50}, {name: "lianshui county ", value: 80}, {name:" hongze district ", value: 70}, {name: "huaiyin district ", value: 80}, {name:" Huaiyin District ", value: 80}, {name: "Huaiyin District ", value: 80}, {name:" Huaiyin District ", value: 80}, {name: "Huaiyin District ", value: 80} : 40}, {name: "qingjiapeng ", value: 50}]}]}); }); </script>Copy the code

How to get geo data

Have to thank Ali for the convenient clicks. You can get two kinds of JSON data, xxx.json and xxx_full.json. The difference is that xxx_full.json only contains the current administrative contour data, while xxx_full.json contains the data of the subadministrative.

Batch download

Manual download is really troublesome, especially to provide download tools. Click here toportalObtain data for all administrative areas. Or run NPM run create to download the latest data again.