本文主要是介绍echarts地图的运用 免费获取乡镇json数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
没有特别的幸运，那么就加倍的努力！！！
效果图
示例1；中国地图 vue
//首先安装echarts
cnpm install echarts --save-dev
组件代码
<template><div><div id="chart_example"></div></div>
</template><script>// 首先要 cnpm install echartsimport echarts from 'echarts'import '../../../node_modules/echarts/map/js/china.js'export default {mounted() {let myChart = echarts.init(document.getElementById('chart_example'));/*** 中国地图* 必须引入china.js* https://www.cnblogs.com/ldlx-mars/p/9242250.html* map配置* https://echarts.baidu.com/option.html#series-map.map* 高亮颜色* https://www.cnblogs.com/xianwen/p/6045454.html*/let option = {series: [{type: 'map',// mapType: 'china'// mapType或者map都可以map: 'china',}]};myChart.setOption(option);this.init() //让echarts窗口自适应},methods:{init() {const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存setTimeout(() => {window.onresize = function() {self.chart = echarts.init(document.getElementById('chart_example'));self.chart.resize();}},20)}}}
</script><style scoped>#chart_example {width: 1200px;height: 700px;/* border: 1px solid blue; */}
</style>
示例2，省地图 jq
echarts地图需引入基本文件
echarts.js文件
中国地图js文件
全国json数据（可以按需引入，减少代码冗余），这一步进行了收集，特别是浙江这块数据比较齐全
下载路径：
https://github.com/15171222839/echartsMap
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#main{width:500px;height:600px;border:1px solid grey;margin:100px auto;}</style>
</head>
<body><div id="main"></div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/echarts.min.js"></script><script src="js/china-main-city-map.js"></script><script>var data1 = [{name:"杭州市",value:30,selected:true,itemStyle:{borderColor:"red"}},{name:"宁波市",value:70},{name:"台州市",value:40},{name:"舟山市", value:10},{name:"湖州市", value:100},{name:"嘉兴市", value:110},{name:"绍兴市", value:80},{name:"金华市", value:50},{name:"丽水市", value:80},{name:"温州市", value:66},{name:"衢州市", value:50}];function echartsMap(data1){$.get('json/china-main-city/330000.json', function (dataJson) {echarts.registerMap('mapName', dataJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({tooltip: {show: true,formatter:function(e){return e.data.name+"<br/>"+e.data.value+"万元";}},series: [{center: [120.257238, 29.165918],aspectScale:0.75,itemStyle:{//图形样式。normal:{label:{show:true}},//显示地图地区名areaColor: 'grey',emphasis: {//选中状态下 高亮areaColor: 'rgba(12,66,121,0.5)',color:"green"},borderColor:"white",},data:data1,roam:true,type: 'map',map: 'mapName'}]});});}echartsMap(data1); </script></body>
</html>
全国地图json数据（按地区编码分）
如：浙江省：330000
同样可以直接在线查找
http://datav.aliyun.com/static/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
**在线只能查找到省市区三级，镇乡一级没有整理，需要自己手动拼接 **
地图乡镇一级数据
第一：下载软件：
第二：导出想要地区json数据
步骤如下：如上图三步，按顺序 步骤3导出数据
第三：整理数据
这里面只是一个示例，要想彻底弄懂建议，建议参考echarts官方文档
https://echarts.baidu.com/option.html#title
拿着 不谢 请叫我“锤” 谢谢！！！
这篇关于echarts地图的运用 免费获取乡镇json数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
