效果图展示-包含水波涟漪、发射线功能效果图
点击地市、区县下钻功能
vue项目中main.js
import echarts from 'echarts'
import anhui from '../static/commonJs/anHui.json'
window.anhuiData = anhui
echarts.registerMap('anhui',anhui)
Vue.prototype.$echarts = echarts;
页面代码
<template>
<div class="orioc-chart-wraper">
<div class="chart" :id="id" ref="chartEle"></div>
<div class="fanhui" @click="returnMenu" v-if="mapLevel === 2">
返回至省级地图
</div>
<div class="fanhui" @click="returnMenu" v-if="mapLevel === 3">
返回至市级地图
</div>
</div>
</template>
<script>
import eventBus from '@/components/event/event-bus'
import cityMapData from './anhuiMap'
export default {
name: 'index',
props: {
LableData: Array
},
data() {
return {
mapJson: cityMapData.mapJson, // 获取市、区县数据
id: 'anhiMap',
option: null,
echartsObj: null,
beginMap: 'anhui',
defaultmapName: '安徽省', // 默认地图名
mapLevel: 1, // 地图所在层级水平 1为省级 2为市级 3为区县级
oldName: '', // 变更地图之前地图名
oldSeriesName: '安徽省', // 变更地图之前地图名
nowName: '', // 当前城市名
nowEName: '', // 当前城市名-拼音
nowCityJson: '', // 当前城市json
nowSeriesName: '安徽省', // 当前地图名
colors: [
'#41E0E9',
'#1259E5',
'#FF6C70',
'#FF2482',
'#FFA506',
'#FD8308'
],
geoCoordMap: [],
centerPoint: {
name: '', // 合肥
value: [117.383042, 31.66119]
}
}
},
mounted() {
var that = this
this.geoCoordMap = [
{
name: '淮南市',
value: [116.77, 32.286],
status: 1
},
{
name: '安庆市',
value: [116.47, 30.626],
status: 2
},
{
name: '池州市',
value: [117.47, 30.486],
status: 3
},
{
name: '六安市',
value: [116.51, 31.73],
status: 3
},
{
name: '蚌埠市',
value: [117.18, 32.99],
status: 3
},
{
name: '宣城市',
value: [118.75, 30.93],
status: 3
},
{
name: '宿州市',
value: [117.52, 33.71],
status: 3
}
]
this.$nextTick(() => {
that.echartsObj = that.$echarts.init(document.getElementById(that.id))
that.setOption(that.beginMap, that.defaultmapName)
})
eventBus.$on('onResize', target => {
that.echartsObj && that.echartsObj.resize()
})
},
methods: {
setOption(nowMapData, mapName) {
const that = this
this.option = {
title: {
text: ''
},
geo: {
// 如果在vue里effectScatter没生效，一定要看一下有没有引入geo插件
map: nowMapData,
aspectScale: 1.2, // 长宽比
zoom: 1.1,
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启
show: true, // 是否展示立体感地图，默认展示
itemStyle: {
normal: {
shadowColor: '#013370',
shadowOffsetX: 0,
shadowOffsetY: 25
},
emphasis: {
areaColor: '#00E2ED',
borderWidth: 0
}
}
},
series: that.setSeries(nowMapData, mapName)
}
this.echartsObj.off('click') // 防止echarts点击事件多次执行问题！
this.echartsObj.setOption(this.option, true)
this.echartsObj.on('click', function(params) {
that.changeCityMap(params)
})
},
setSeries(nowMapData, mapName) {
const series = [
{
name: mapName,
type: 'map',
zoom: '1.1',
aspectScale: 1.2, // 长宽比
roam: false,
map: nowMapData, // 自定义扩展图表类型
hoverAnimation: true,
label: {
normal: {
show: true,
textStyle: {
color: '#00A0E9'
}
},
emphasis: {
textStyle: {
color: '#FFCC32'
}
}
},
itemStyle: {
normal: {
borderColor: '#01587B',
borderWidth: 1.5,
areaColor: '#012350'
},
emphasis: {
areaColor: '#0D71FF',
borderWidth: 0
}
}
},
{
// 中心涟漪 合肥
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
// data: [this.centerPoint],
data: (this.mapLevel === 1) ? [this.centerPoint] : [], // 当地图为安徽省地图时才展示中心涟漪，地市不展示
symbolSize: function(val) {
return 20
},
showEffectOn: 'render',
// show: (nowMapData === 'anhui') ? true : false,
hoverAnimation: true,
itemStyle: {
normal: {
color: '#FFCC32',
shadowBlur: 8,
shadowColor: '#3D83D6'
}
},
zlevel: 1
},
{
// 涟漪
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
// data: this.geoCoordMap,
data: (this.mapLevel === 1) ? this.geoCoordMap : [], // 当地图为安徽省地图时才展示涟漪，地市不展示
symbolSize: function(val) {
return 20
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'fill' // fill stroke
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#00E4EF',
shadowBlur: 8,
shadowColor: '#004A70'
}
},
zlevel: 1
},
{
// 发射线
name: '',
type: 'lines',
zlevel: 2,
effect: {
show: true, // 发射线移动点是否展示
// show: (nowMapData === 'anhui') ? true : false,
period: 6,
trailLength: 0.02,
symbol: 'circle', // arrow,
color: '#00FAFA', // 轨迹图标的颜色
symbolSize: 8,
loop: false
},
lineStyle: {
normal: {
color: '#00FAFA', // 轨迹线的颜色
width: 2,
opacity: 0.6,
curveness: 0.2
}
},
// data: this.convertData()
data: (this.mapLevel === 1) ? this.convertData() : [] // 当地图为安徽省地图时才展示发射线，地市不展示
}
]
return series
},
// 各点间的线 以合肥为中心 向其他城市传输
convertData(status) {
const that = this
var res = []
var fromCoord = that.centerPoint.value
for (var i = 0; i < that.geoCoordMap.length; i++) {
var dataItem = that.geoCoordMap[i]
var toCoord = dataItem.value
if (status) {
if (dataItem.status === status) {
if (fromCoord && toCoord) {
res.push({
toName: dataItem.name,
coords: [fromCoord, toCoord]
})
}
}
} else {
if (fromCoord && toCoord) {
res.push({
toName: dataItem.name,
coords: [fromCoord, toCoord]
})
}
}
}
return res
},
// 点击地图，获取下级地图
changeCityMap(params) {
var that = this
if (that.mapLevel === 3) { // 地图层级为区县时，不可再下钻
console.log('地图层级为区县时，不可再下钻!')
return
}
console.log('进入改变地图方法', params)
var chooseName = []
// 由 省地图 —> 市地图
if (that.mapLevel === 1) {
chooseName = that.mapJson.filter((item) => {
return params.name === item.name // oldSeriesName为市级图表名
})
}
// 由 市地图 —> 区县地图
if (that.mapLevel === 2) {
for (var i = 0; i < that.mapJson.length; i++) {
if (that.mapJson[i].name === that.oldName) {
var childMap = that.mapJson[i].children
chooseName = childMap.filter((item) => {
return params.name === item.name // oldSeriesName为市级图表名
})
}
}
}
that.oldName = params.name // 变更前城市名
that.oldSeriesName = params.seriesName // 变更之前地图名 - 方便区县级返回时，可以取到市级图表的名
if (chooseName && chooseName.length > 0) {
this.getChangeData(chooseName)
}
},
// 获取改变的地图数据
getChangeData(chooseName) {
var that = this
that.mapLevel = chooseName[0].level // 当前地图层级
that.nowName = chooseName[0].name // 当前城市名
that.nowEName = chooseName[0].eName // 当前城市名-拼音
that.nowCityJson = chooseName[0].json// 当前城市json
that.nowSeriesName = chooseName[0].name// 当前地图名
this.$echarts.registerMap(that.nowEName, that.nowCityJson)
this.$nextTick(() => {
that.echartsObj = that.$echarts.init(document.getElementById(that.id))
that.setOption(that.nowEName, that.nowName)
})
},
// 返回上一级地图
returnMenu() {
var that = this
// 由市级地图 —> 返回省级地图
if (that.mapLevel == 2) {
this.nowSeriesName = '安徽省'// 当前地图名
this.mapLevel = 1 // 当前地图层级
this.$nextTick(() => {
that.echartsObj = that.$echarts.init(document.getElementById(that.id))
that.$echarts.registerMap('anhui', window.anhuiData)
that.setOption('anhui', '安徽省')
})
}
// 由区县地图 —> 返回市级地图
if (this.mapLevel == 3) {
var chooseName = this.mapJson.filter((item) => {
return this.oldSeriesName === item.name // oldSeriesName此处区县地图之前的城市名称
})
if (chooseName && chooseName.length > 0) {
this.mapLevel = 2 // 当前地图层级
this.oldName = that.oldSeriesName // 区县地图之前的城市名称， 为旧的地图名oldSeriesName 名称
this.oldSeriesName = that.nowSeriesName // 旧的地图名，为未变更前的nowSeriesName名称
this.getChangeData(chooseName)
}
}
}
},
destroyed() {
eventBus.$off('onResize')
}
}
</script>
<style scoped>
.chart {
height: calc(100% - 70px);
padding-top: 50px;
transform: rotateX(25deg);
}
.fanhui{
position: absolute;
bottom: 10px;
right: 300px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
</style>
anHuiMap.js
只有引入具体的市、区县地图，才可点击下钻
// 市级地图
import heFei from '../../../../static/commonJs/anhuiMap/anHuiCityMap/heFei.json'
import anQing from '../../../../static/commonJs/anhuiMap/anHuiCityMap/anQing.json'
import bengBu from '../../../../static/commonJs/anhuiMap/anHuiCityMap/bengBu.json'
import chiZhou from '../../../../static/commonJs/anhuiMap/anHuiCityMap/chiZhou.json'
import huaiNan from '../../../../static/commonJs/anhuiMap/anHuiCityMap/huaiNan.json'
import luAn from '../../../../static/commonJs/anhuiMap/anHuiCityMap/luAn.json'
import suZhou from '../../../../static/commonJs/anhuiMap/anHuiCityMap/suZhou.json'
import xuanCheng from '../../../../static/commonJs/anhuiMap/anHuiCityMap/xuanCheng.json'
// 池州市区县地图
import dongZhi from '../../../../static/commonJs/anhuiMap/chiZhouMap/dongZhi.json' // 东至县
import guiChi from '../../../../static/commonJs/anhuiMap/chiZhouMap/guiChi.json' // 贵池区
import qingYang from '../../../../static/commonJs/anhuiMap/chiZhouMap/qingYang.json' // 青阳县
import shiTai from '../../../../static/commonJs/anhuiMap/chiZhouMap/shiTai.json' // 石台县
// 安庆市区县地图
import daGuan from '../../../../static/commonJs/anhuiMap/anQingMap/daGuan.json' // 大观区
import taiHu from '../../../../static/commonJs/anhuiMap/anQingMap/taiHu.json' // 太湖县
import yiXiu from '../../../../static/commonJs/anhuiMap/anQingMap/yiXiu.json' // 宜秀区
import suSong from '../../../../static/commonJs/anhuiMap/anQingMap/suSong.json' // 宿松县
import yueXi from '../../../../static/commonJs/anhuiMap/anQingMap/yueXi.json' // 岳西县
import huaiNing from '../../../../static/commonJs/anhuiMap/anQingMap/huaiNing.json' // 怀宁县
import wangJiang from '../../../../static/commonJs/anhuiMap/anQingMap/wangJiang.json' // 望江县
import tongCheng from '../../../../static/commonJs/anhuiMap/anQingMap/tongCheng.json' // 桐城市
import qianShan from '../../../../static/commonJs/anhuiMap/anQingMap/qianShan.json' // 潜山市
import yingJiang from '../../../../static/commonJs/anhuiMap/anQingMap/yingJiang.json' // 迎江区
// 六安市区县地图
import yeJi from '../../../../static/commonJs/anhuiMap/luAnMap/yeJi.json' // 叶集区
import shuCheng from '../../../../static/commonJs/anhuiMap/luAnMap/shuCheng.json' // 舒城县
import yuAn from '../../../../static/commonJs/anhuiMap/luAnMap/yuAn.json' // 裕安区
import jinAn from '../../../../static/commonJs/anhuiMap/luAnMap/jinAn.json' // 金安区
import jinZhai from '../../../../static/commonJs/anhuiMap/luAnMap/jinZhai.json' // 金寨县
import huoShan from '../../../../static/commonJs/anhuiMap/luAnMap/huoShan.json' // 霍山县
import huoQiu from '../../../../static/commonJs/anhuiMap/luAnMap/huoQiu.json' // 霍邱县
// 蚌埠市区县地图
import wuHe from '../../../../static/commonJs/anhuiMap/bengBuMap/wuHe.json' // 五河县
import guZhen from '../../../../static/commonJs/anhuiMap/bengBuMap/guZhen.json' // 固镇县
import huaiYuan from '../../../../static/commonJs/anhuiMap/bengBuMap/huaiYuan.json' // 怀远县
import huaiShang from '../../../../static/commonJs/anhuiMap/bengBuMap/huaiShang.json' // 淮上区
import yuHui from '../../../../static/commonJs/anhuiMap/bengBuMap/yuHui.json' // 禹会区
import bengShan from '../../../../static/commonJs/anhuiMap/bengBuMap/bengShan.json' // 蚌山区
import longZiHu from '../../../../static/commonJs/anhuiMap/bengBuMap/longZiHu.json' // 龙子湖区
// 宣城市区县地图
import guangDe from '../../../../static/commonJs/anhuiMap/xuanChengMap/guangDe.json' // 广德市
import jiXi from '../../../../static/commonJs/anhuiMap/xuanChengMap/jiXi.json' // 绩溪县
import jingXian from '../../../../static/commonJs/anhuiMap/xuanChengMap/jingXian.json' // 泾县
import jingDe from '../../../../static/commonJs/anhuiMap/xuanChengMap/jingDe.json' // 旌德县
import langXi from '../../../../static/commonJs/anhuiMap/xuanChengMap/langXi.json' // 郎溪县
import ningGuo from '../../../../static/commonJs/anhuiMap/xuanChengMap/ningGuo.json' // 宁国市
import xuanZhou from '../../../../static/commonJs/anhuiMap/xuanChengMap/xuanZhou.json' // 宣州区
// 宿州市区县地图
import yongQiao from '../../../../static/commonJs/anhuiMap/suzhouMap/yongQiao.json' // 埇桥区
import siXian from '../../../../static/commonJs/anhuiMap/suzhouMap/siXian.json' // 泗县
import lingBi from '../../../../static/commonJs/anhuiMap/suzhouMap/lingBi.json' // 灵璧县
import dangShan from '../../../../static/commonJs/anhuiMap/suzhouMap/dangShan.json' // 砀山县
import xiaoXian from '../../../../static/commonJs/anhuiMap/suzhouMap/xiaoXian.json' // 萧县
// 淮南市区县地图
import baGongShang from '../../../../static/commonJs/anhuiMap/huaiNanMap/baGongShang.json' // 八公山区
import fengTai from '../../../../static/commonJs/anhuiMap/huaiNanMap/fengTai.json' // 凤台县
import daTong from '../../../../static/commonJs/anhuiMap/huaiNanMap/daTong.json' // 大通区
import shouXian from '../../../../static/commonJs/anhuiMap/huaiNanMap/shouXian.json' // 寿县
import panJi from '../../../../static/commonJs/anhuiMap/huaiNanMap/panJi.json' // 潘集区
import tianJiaAn from '../../../../static/commonJs/anhuiMap/huaiNanMap/tianJiaAn.json' // 田家庵区
import xieJaJi from '../../../../static/commonJs/anhuiMap/huaiNanMap/xieJaJi.json' // 谢家集区
var anHuiMapList = {
"合肥市": heFei,
"池州市": chiZhou,
"安庆市": anQing,
"淮南市": huaiNan,
"六安市": luAn,
"蚌埠市": bengBu,
"宣城市": xuanCheng,
"宿州市": suZhou,
};
var mapJson = [
{
name: '合肥市',
eName: 'heFei',
level: 2 ,
json: heFei,
children:[],
},
{
name: '池州市',
eName: 'chiZhou',
level: 2 ,
json: chiZhou,
children:[
{
name: '东至县',
eName: 'dongZhi',
level: 3 ,
json: dongZhi
},
{
name: '贵池区',
eName: 'guiChi',
level: 3 ,
json: guiChi
},
{
name: '青阳县',
eName: 'qingYang',
level: 3 ,
json: qingYang
},
{
name: '石台县',
eName: 'shiTai',
level: 3 ,
json: shiTai
}
]
},
{
name: '安庆市',
eName: 'anQing',
level: 2 ,
json: anQing,
children:[
{
name: '大观区',
eName: 'daGuan',
level: 3 ,
json: daGuan
},
{
name: '太湖县',
eName: 'taiHu',
level: 3 ,
json: taiHu,
},
{
name: '宜秀区',
eName: 'yiXiu',
level: 3 ,
json: yiXiu,
},
{
name: '宿松县',
eName: 'suSong',
level: 3 ,
json: suSong,
},
{
name: '岳西县',
eName: 'yueXi',
level: 3 ,
json: yueXi,
},
{
name: '怀宁县',
eName: 'huaiNing',
level: 3 ,
json: huaiNing,
},
{
name: '望江县',
eName: 'wangJiang',
level: 3 ,
json: wangJiang,
},
{
name: '桐城市',
eName: 'tongCheng',
level: 3 ,
json: tongCheng,
},
{
name: '潜山市',
eName: 'qianShan',
level: 3 ,
json: qianShan,
},
{
name: '迎江区',
eName: 'yingJiang',
level: 3 ,
json: yingJiang,
},
],
},
{
name: '淮南市',
eName: 'huaiNan',
level: 2 ,
json: huaiNan,
children:[
{
name: '八公山区',
eName: 'baGongShang',
level: 3 ,
json: baGongShang
},
{
name: '凤台县',
eName: 'fengTai',
level: 3 ,
json: fengTai,
},
{
name: '大通区',
eName: 'daTong',
level: 3 ,
json: daTong,
},
{
name: '寿县',
eName: 'shouXian',
level: 3 ,
json: shouXian,
},
{
name: '潘集区',
eName: 'panJi',
level: 3 ,
json: panJi,
},
{
name: '田家庵区',
eName: 'tianJiaAn',
level: 3 ,
json: tianJiaAn,
},{
name: '谢家集区',
eName: 'xieJaJi',
level: 3 ,
json: xieJaJi,
},
],
},
{
name: '六安市',
eName: 'luAn',
level: 2 ,
json: luAn,
children:[
{
name: '叶集区',
eName: 'yeJi',
level: 3 ,
json: yeJi
},
{
name: '舒城县',
eName: 'shuCheng',
level: 3 ,
json: shuCheng,
},
{
name: '裕安区',
eName: 'yuAn',
level: 3 ,
json: yuAn,
},
{
name: '金安区',
eName: 'jinAn',
level: 3 ,
json: jinAn,
},
{
name: '金寨县',
eName: 'jinZhai',
level: 3 ,
json: jinZhai,
},
{
name: '霍山县',
eName: 'huoShan',
level: 3 ,
json: huoShan,
},{
name: '霍邱县',
eName: 'huoQiu',
level: 3 ,
json: huoQiu,
},
],
},
{
name: '蚌埠市',
eName: 'bengBu',
level: 2 ,
json: bengBu,
children:[
{
name: '五河县',
eName: 'wuHe',
level: 3 ,
json: wuHe
},
{
name: '固镇县',
eName: 'guZhen',
level: 3 ,
json: guZhen,
},
{
name: '怀远县',
eName: 'huaiYuan',
level: 3 ,
json: huaiYuan,
},
{
name: '淮上区',
eName: 'huaiShang',
level: 3 ,
json: huaiShang,
},
{
name: '禹会区',
eName: 'yuHui',
level: 3 ,
json: yuHui,
},
{
name: '蚌山区',
eName: 'bengShan',
level: 3 ,
json: bengShan,
},
{
name: '龙子湖区',
eName: 'longZiHu',
level: 3 ,
json: longZiHu,
},
],
},
{
name: '宣城市',
eName: 'xuanCheng',
level: 2 ,
json: xuanCheng,
children:[
{
name: '广德市',
eName: 'guangDe',
level: 3 ,
json: guangDe
},
{
name: '绩溪县',
eName: 'jiXi',
level: 3 ,
json: jiXi,
},
{
name: '泾县',
eName: 'jingXian',
level: 3 ,
json: jingXian,
},
{
name: '旌德县',
eName: 'jingDe',
level: 3 ,
json: jingDe,
},
{
name: '郎溪县',
eName: 'langXi',
level: 3 ,
json: langXi,
},
{
name: '宁国市',
eName: 'ningGuo',
level: 3 ,
json: ningGuo,
},{
name: '宣州区',
eName: 'xuanZhou',
level: 3 ,
json: xuanZhou,
},
]
},
{
name: '宿州市',
eName: 'suZhou',
level: 2 ,
json: suZhou,
children:[
{
name: '埇桥区',
eName: 'yongQiao',
level: 3 ,
json: yongQiao
},
{
name: '泗县',
eName: 'siXian',
level: 3 ,
json: siXian,
},
{
name: '灵璧县',
eName: 'lingBi',
level: 3 ,
json: lingBi,
},
{
name: '砀山县',
eName: 'dangShan',
level: 3 ,
json: dangShan,
},
{
name: '萧县',
eName: 'xiaoXian',
level: 3 ,
json: xiaoXian,
}
],
},
];
export default{
anHuiMapList: anHuiMapList,
mapJson: mapJson,
}
参考文档
获取省市区json
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=24.9792116201569&lng=104.86930847167969&zoom=10
echart图例
https://www.makeapie.com/explore.html