echarts：中国地图-省市区二级联动

效果图：

中国：

↓
浙江省：

↓
南浔区

代码演示：

vue

<template><div class="line-container"><div><div id="mapChart"></div></div></div>
</template><script>
import * as echarts from "echarts";
import chinaJson from '../assets/json/data.json' // json数据引入
import zejiang from '../assets/json/zejiang.json' // 浙江省
import nanxun from '../assets/json/nanxun.json'   // 南浔区export default {name: 'mapChart',data() {return {option: {tooltip: {trigger: 'item',},label: {show:true,},series : [{type: 'map',map: 'china',zoom: 1.25,roam: true,itemStyle: {normal: {borderColor: 'rgb(147, 235, 248)',areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#09132c' // 0% 处的颜色}, {offset: 1,color: '#274d68'  // 100% 处的颜色}],globalCoord: true // 缺省为 false},},emphasis: {areaColor: 'rgb(46,229,206)',borderWidth: 0.1}},label: {normal: {show: true,textStyle: {color: '#1DE9B6'}},emphasis: {textStyle: {color: 'rgb(183,185,14)'}}},}]},mapChart: '',level: 1}},mounted() {this.getMapChart()},methods: {// echarts初始化getMapChart() {this.mapChart = echarts.init(document.getElementById('mapChart'))echarts.registerMap('china', chinaJson);this.mapChart.setOption(this.option)echarts.registerMap('province', zejiang)// echarts.registerMap('city', huzhou)echarts.registerMap('region', nanxun)// 获取地图数据const map = this.getMap()// 点击地图省份this.mapChart.on('click', (params) => {console.log(params)if(params.name === '浙江' || params.name === "南浔区"){if (this.level === 1) {this.level = 2} else if (this.level === 2) {this.level = 3}this.option.series = map[this.level]this.mapChart.clear()this.mapChart.setOption(this.option)}})// 点击所有地方触发(空白)this.mapChart.getZr().on('click', (event) => {// 该监听器正在监听一个`zrender 事件`。// console.log(event.target, this.level)// 点击空白处回到上一级if (!event.target && this.level !== 1) {if (this.level === 2) {this.option.series = [{type: 'map',map: 'china',label: {normal: {show: true,textStyle: {color: '#1DE9B6'}},emphasis: {textStyle: {color: 'rgb(183,185,14)'}}},zoom: 1.25,roam: true}]this.level = 1} else if (this.level === 3) {this.option.series = map[2]this.level = 2}this.mapChart.setOption(this.option)}});},// 获取地图数据getMap () {const map = {2: [{type: 'map',map: 'province',zoom: 1.25,label: {normal: {show: true,textStyle: {color: '#1DE9B6',fontSize: 10}},emphasis: {textStyle: {color: 'rgb(183,185,14)'}}},itemStyle: {normal: {borderColor: 'rgb(147, 235, 248)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#09132c' // 0% 处的颜色}, {offset: 1,color: '#274d68'  // 100% 处的颜色}],globalCoord: true // 缺省为 false},},emphasis: {areaColor: 'rgb(46,229,206)',borderWidth: 0.1}},// zoom: 1,roam: true}],3: [{type: 'map',map: 'region',label: {normal: {show: true,textStyle: {color: '#1DE9B6'}},emphasis: {textStyle: {color: 'rgb(183,185,14)'}}},itemStyle: {normal: {borderColor: 'rgb(147, 235, 248)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#09132c' // 0% 处的颜色}, {offset: 1,color: '#274d68'  // 100% 处的颜色}],globalCoord: true // 缺省为 false},},emphasis: {areaColor: 'rgb(46,229,206)',borderWidth: 0.1}},// zoom: 1,roam: true,}],}return map}}
}
</script><style>
#mapChart {width: 509px;height: 393px;
}
</style>

json

下载省内市内县区json合并，去掉市

echarts：中国地图-省市区二级联动相关推荐

【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
Echarts中国地图三级钻取
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言最近其实一直在用Echa ...
Echarts中国地图背景颜色渐变
摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...
VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色
echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...
【echarts 中国地图增加南海九段线】
echarts 中国地图增加南海九段线最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...
Echarts中国地图修改
前言在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图地图样式修改标题修改数值功能删除,但保留数据计算按钮功能去除地图 ...
echarts 中国地图散点图渲染
准备 echarts 中国地图的json(在最后) GitHub的demo地址,可以直接拉下来先注册地图 import * as echarts from 'echarts'; import { d ...

echarts：中国地图-省市区二级联动

效果图：

代码演示：

vue

json

echarts：中国地图-省市区二级联动相关推荐

最新文章

热门文章