vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）

vue-echarts-v3和echarts的地图下钻配置项其实是一样的，本身就vue-echarts-v3而言，它只是echarts在vue的使用中，打包成了一个组件。

浙江省地图下钻需要geoJson数据包，浙江省及浙江省下的省市，geoJson的数据，可以通过这个链接（阿里云DATAV.GeoAtlas）获取geo数据包，很好用~（超推荐！！！！）

复制input中的.json数据地址，新窗口打开，然后就可以整个复制下来，新建一个.json文件存放复制下来的内容，然后引到项目里，我是为了保险起见，把浙江省的市级的geoJson数据包也分别引入了，先给大家看一下我的目录。

接下来可以进行开发：

引入vue-echarts-v3

npm install --save  vue-echarts-v3

我看其他文章有说要在webpack里配置，我没有配置也引用成功了，这里就不放了，如果出现错误的话，自行百度引用下哈~，不过私信我也可以，互相学习的嘛~~

接下来，就是在(src->views->echarts->ZJMap.vue)代码里引入这个，就等于引入了IEcharts的所有组件，不需要在引入title，legend，tooltip等组件。

<script>import IEcharts from "vue-echarts-v3/src/full.js";
</script>

引入刚才复制的geoJson包，我这边是以浙江省为例，看名字可以看出来是浙江省及下级市的geoJson数据，后面的33000/330100等是省市代码。

<script>import zhejiangMap from "../../../static/json/map/330000.json";import hangzhouMap from "../../../static/json/map/330100.json";import ningboMap from "../../../static/json/map/330200.json";import wenzhouMap from "../../../static/json/map/330300.json";import jiaxingMap from "../../../static/json/map/330400.json";import huzhouMap from "../../../static/json/map/330500.json";import shaoxingMap from "../../../static/json/map/330600.json";import jinhuaMap from "../../../static/json/map/330700.json";import quzhouMap from "../../../static/json/map/330800.json";import zhoushanMap from "../../../static/json/map/330900.json";import taizhouMap from "../../../static/json/map/331000.json";import lishuiMap from "../../../static/json/map/331100.json";
</script>

现在需要通过省市代码查询省市数据的js文件(src->js->city-ZJ-map.js)。

const cityZJMap = {"浙江": '330000',"杭州市": "330100","宁波市": "330200","温州市": "330300","嘉兴市": "330400","湖州市": "330500","绍兴市": "330600","金华市": "330700","衢州市": "330800","舟山市": "330900","台州市": "331000","丽水市": "331100"
}export default cityZJMap

Html的代码：注意:option="mapZJOption"，这个option是配置项，在script中设置。

<template><div class="echarts"><a class="to-Back" v-show="isShowBack" @click="onBack()">返回上级</a><IEcharts :option="mapZJOption" :resizable="true" @click="onClick" /></div>
</template>

接下来是script的逻辑代码

this.mapZJOption = {visualMap: {show: true,min: 0,max: 2000,type: "piecewise",orient: "horizontal",padding: 0,x: "center",y: "bottom",pieces: [{min: 30,label: "C类>30家",color: "#ee5918"},{max: 30,min: 20,label: "20<C<30",color: "#51a4f7"},{max: 20,min: 10,label: "10<C<20",color: "#7e47ff"},{max: 10,min: 0,label: "0<C<10",color: "#5cddce"}]},tooltip: {trigger: "item",formatter: function(params) {if (params.data != undefined) {return ("<p>总数量：" +params.data.enterPriseCount +"家</p>" +"<p>AA数量：" +params.data.aaenterPriseCount +"家</p>" +"<p>A数量：" +params.data.aenterPriseCount +"家</p>" +"<p>B数量：" +params.data.benterPriseCount +"家</p>" +"<p>C数量：" +params.data.value +"家</p>");}}},series: [{type: "map",map: name,data: this.initMapData(this.ZJCityInformationList),itemStyle: {borderColor: "rgb(62,215,213)",borderWidth: 1},label: {show: true,textStyle: {color: "#fff", //地图初始化区域字体颜色fontSize: 12,opacity: 1,backgroundColor: "rgba(0,0,0,0)"}}}]

onClick(event, instance, echarts) {  //这个是地图的点击事件，判断是否有下级地图数据//   console.log(arguments);let cityId = cityMap[event.name];if (cityId) {this.isShowBack = true;//代表有下级地图this.ZJId = Number(cityId);this.ZJName = event.name;this.mapJson = this.getMapData(this.ZJId);} else {console.log("没有下一级");}},

具体的源码获取，请扫码关注公众号“DataShow Charts”，回复“浙江地图”

vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
vue + echarts 实现乡镇地图
vue +echarts 实现乡镇地图一.导入地图数据(我这里用的是json) 在这里插入代码片 ``<template><div class="content" ...
vue+echarts+json绘制地图“绝对干货”
vue+echarts+json绘制地图"绝对干货" 不多说,直接干该样式实现及其简单跟着我做就好了 vue没安装的回去看基础吧 echarts没安装的 npm instal ...
vue+echarts实现中国地图省市区下钻以及添加标注
最近项目中有需要地图下钻和添加标注的需求,就先做了一个demo,在博客上查了一些资料,结合实际情况,发现除了一些状况,发篇文章,采集一下各位大佬的意见. 效果呈现目前还没有问题,下面是省内地图,然后 ...
5分钟使用Echarts轻松实现地图下钻
在数据可视化中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市.这个逐级进入的过程就是我们今天说的地图下钻. 地图下钻看起来很屌.很高大上,但是仔细琢磨一下,技术实 ...
vue+echarts GL3d中国地图
相关实例 made a pie 添加链接描述 2.添加链接描述 3.添加链接描述一.下载安装所需包 npm install echarts@4.9.0 --save //之所以下载4点几版本是因为5 ...

vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）

vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）相关推荐

最新文章

热门文章