echarts地图的运用免费获取乡镇json数据

本文主要是介绍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>