前言

公司需要一个中国地图点击可进入省市区县级，但是在我使用echarts绘制中国地图省市地区时发现官网只支持到省的json文件，地区文件需要自己去找，前两天我找到了下载了一份全新的json文件，下载时间市2020年10月27日

一、echarts

官网：https://echarts.apache.org/zh/index.html

全国省市区县级地图JSON文件：https://download.csdn.net/download/weixin_43898407/13071019

自己下载：datav地图选择器http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
使用datav地图选择器的json文件太卡顿了，所以我全都下载下来了

二、使用步骤

1.vue安装、引入echarts

代码如下：

//下载echarts
npm install echarts --save//main.js中全局引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.使用echarts

我直接就只复制了下钻的最后一级的代码，全国和全省的都是一样的，点击城市发送对应的行政代码，行政代码和json的名称是一样的，获取json文件加载地图就行。

<template><div id="County" :style="{width: '100%', height: '470px'}"></div>
</template>
<script>
export default {mounted () {//我这里直接获取static文件夹中的json文件，this.code是点击全省发送过来的城市对应的行政代码//也可以写'https://geo.datav.aliyun.com/areas_v2/bound'+this.code+'_full.json'axios.get('static/county/'+this.code+'_full.json').then(response => {echarts.registerMap('county',response.data)var chart = echarts.init(document.getElementById("County"));chart.setOption({ backgroundColor: '#142942', //地图背景颜色title: {},legend: {},tooltip : {appendToBody: true ,triggerOn: 'click',   //触发方式enterable: true, // trigger:'item',confine: true,alwaysShowContent:false,formatter:function(params){//点击进入下级城市的点击事件可以写在这个div里return `<div class='pop-up'><div class='pop-up-title'><p style="margin:0;">地区：`+params.name+`</p><p style="margin:0;">人数：`+params.value+`</p></div>&nbsp;&nbsp;&nbsp;&nbsp;</div>` },}, visualMap: {type: 'piecewise',orient:'horizontal', realtime: false,left: '5%',bootom:'bootom',textStyle: {color: "rgba(232, 218, 218, 1)"},pieces: [{min: 10, max: 25,label:'点亮数11—25'},{min:1, max:10,label:'点亮数1—10'},{max:1,label:'未点亮区域'}],color: ['#5adf5a', '#c4ffc4','#4a5b71' ],},geo: { // 这个是重点配置区map:'county', // 需要对应echarts.registerMap('county',response.data)roam: true,zoom: 1.2,label: {normal: {show: true, // 是否显示对应地名，textStyle: {color: '#b7cfee'}},emphasis: {show: true,textStyle: {color: '#cc3041'}}},itemStyle: {normal: {//地图背景色    },}},series: [{type: 'scatter',coordinateSystem: 'geo' // 对应上方配置},{type: 'map',zoom: 1.25,mapType: 'county',geoIndex: 0,roam: false,showLegendSymbol: true,data: [//这里写获取到的后台数据，或者你自己需要加载的数据]}]});return chart}, response => {console.log('失败');});}
}
</script>

总结

我只写了点击加载对应城市的代码，其他都是一样的，照葫芦画瓢或者封装到组件中使用也可以，里面的配置可以根据官网自己调整，有的需要动态改变，所以我删了，
json文件省和城市都是对应的区划代码，我是2020年10月27下载的，应该算最新的了。

vue使用echarts来绘制中国地图下钻省市区县级地图相关推荐

用pyecharts画地图（世界地图、中国省级地图、市级地图、某省市级地图、某市县级地图）
用pyecharts画地图(世界地图.中国省级地图.市级地图.某省市级地图.某市县级地图) 世界地图中国省级地图中国市级地图某省市级地图某市县级地图世界地图代码如下: from pyech ...
Echarts Chinajs绘制中国地图全国geojson
Echarts绘制中国地图地图geojson下载 https://gitee.com/wr_st/chinageojson <style scoped> .chart_map {widt ...
Echarts省市区县级地图JSON文件下载
最近项目中部分统计页面需要使用地图资源,考虑到已经引用Echarts组件,所以参考echarts的地图进行制作. 然而echarts目前只有地图的相关demo,并没有提供相对应的完整的区域JSON文件 ...
【Echarts】绘制中国地图及各省份地图
示例: 地图文件下载地址:mirrors / fuhang-lm / echarts · GitCode 这里以北京市地图为例,如果是其他省份或者全国,下载对应的js文件并引入系统,需要替换一下两处, ...
echart地图下钻上钻地图分级省市区
最近研究了一下地图上钻下钻的功能,基本实现了左键下钻,右键上钻效果如下有需要的可以参考参考实现的代码如下还需要一个地图数据信息请访问https://download.csdn.net/downlo ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
vue 引入json地图_vue中引入地图的js文件，显示echarts is not loaded
<script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ function () { ...
Python 绘制中国地图并标上国家名
直接使用cartopy库绘制中国以及周边国家的地图时,中国国界线有问题(藏南地区没有画到中国国界线内等)也没有九段线.下面的程序可以将国家标准国界线和九段线都添加到地图上,并标出国家名称 import ...
利用Python绘制中国新型冠状病毒疫情图（国家和省）
大数据课程设计上来就要求绘制一个地图可以反应出来中国各个省份每日疫情的人数,包括确诊,疑似,死亡,治愈.如下图所示: 这里用到了Python中的pyecharts库,点此了解详细信息 1.先来将需要的 ...

vue使用echarts来绘制中国地图下钻省市区县级地图

文章目录

前言

一、echarts

二、使用步骤

1.vue安装、引入echarts

2.使用echarts

总结

vue使用echarts来绘制中国地图下钻省市区县级地图相关推荐

最新文章

热门文章