echart 地图 某个地区_一站式解决echarts实现区域地图

近期项目中有个大屏展示的需求，需要显示行政区的地图。苦苦寻找的过程中发现此方面资料很少且大部分在CSDN上付费下载，着实麻烦，特此总结，供大家参考。

直接上图

关键知识点

geo数据

geo是echarts渲染数据的格式，geo是数据基础，有基础数据就很容易实现上图效果了。

visualMap

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素(视觉通道)，地图的渲染依赖于此配置。

// 基于准备好的dom，初始化echarts实例

$.get("../geo/市含县/320800_full.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: "金湖县", value: 80 },

{ name: "盱眙县", value: 50 },

{ name: "涟水县", value: 80 },

{ name: "洪泽区", value: 70 },

{ name: "淮阴区", value: 80 },

{ name: "淮安区", value: 40 },

{ name: "清江浦区", value: 50 }

]

}

]

});

});

复制代码

如何拿到geo数据

不得不感谢阿里提供的便利点击。你可以获得2种json数据，xxx.json和xxx_full.json。区别在于xxx.json只有当前行政区的轮廓数据，xxx_full.json包含子行政区的数据。

批量下载

手动下载着实麻烦，特提供下载工具。

点此传送门获取所有行政区域的数据。或执行npm run create 重新下载最新数据。