链接：https://pan.baidu.com/s/1a9TbR_SaLAuH4S8AXhUNnw
提取码：ay7s
```
<template>
<div class="DataView" style='width:800px;height:500px;'>
<div ref='DataMap' class="main">
</div>
</div>
</template>
<script>
import Vue from 'vue'
import 'echarts/map/js/china'
import echarts from 'echarts'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
export default {
name: 'DataMap',
data() {
return {
}
},
mounted() {
this.$nextTick(()=>{
this.showBar();
})
},
updated(){
},
computed: {
},
watch: {
},
methods: {
showBar(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(this.$refs.DataMap);
//各省份的地图json文件
var provinces = {
'上海': 'json/province/shanghai.json',
'山西': 'json/province/shanxi.json',
'河北': 'json/province/hebei.json',
'内蒙古': 'json/province/neimenggu.json',
'辽宁': 'json/province/liaoning.json',
'吉林': 'json/province/jilin.json',
'黑龙江': 'json/province/heilongjiang.json',
'江苏': 'json/province/jiangsu.json',
'浙江': 'json/province/zhejiang.json',
'安徽': 'json/province/anhui.json',
'福建': 'json/province/fujian.json',
'江西': 'json/province/jiangxi.json',
'山东': 'json/province/shandong.json',
'河南': 'json/province/henan.json',
'湖北': 'json/province/hubei.json',
'湖南': 'json/province/hunan.json',
'广东': 'json/province/guangdong.json',
'广西': 'json/province/guangxi.json',
'海南': 'json/province/hainan.json',
'四川': 'json/province/sichuan.json',
'贵州': 'json/province/guizhou.json',
'云南': 'json/province/yunnan.json',
'西藏': 'json/province/xizang.json',
'陕西': 'json/province/shanxi1.json',
'甘肃': 'json/province/gansu.json',
'青海': 'json/province/qinghai.json',
'宁夏': 'json/province/ningxia.json',
'新疆': 'json/province/xinjiang.json',
'北京': 'json/province/beijing.json',
'天津': 'json/province/tianjin.json',
'重庆': 'json/province/chongqing.json',
'香港': 'json/province/xianggang.json',
'澳门': 'json/province/aomen.json'
};
//各省份的数据
var allData = [{
name: '北京'
}, {
name: '天津'
}, {
name: '上海'
}, {
name: '重庆'
}, {
name: '河北'
}, {
name: '河南'
}, {
name: '云南'
}, {
name: '辽宁'
}, {
name: '黑龙江'
}, {
name: '湖南'
}, {
name: '安徽'
}, {
name: '山东'
}, {
name: '新疆'
}, {
name: '江苏'
}, {
name: '浙江'
}, {
name: '江西'
}, {
name: '湖北'
}, {
name: '广西'
}, {
name: '甘肃'
}, {
name: '山西'
}, {
name: '内蒙古'
}, {
name: '陕西'
}, {
name: '吉林'
}, {
name: '福建'
}, {
name: '贵州'
}, {
name: '广东'
}, {
name: '青海'
}, {
name: '西藏'
}, {
name: '四川'
}, {
name: '宁夏'
}, {
name: '海南'
}, {
name: '台湾'
}, {
name: '香港'
}, {
name: '澳门'
}];
//需要涟漪效果的地方
var GZData = [
[{name: '北京',value:96}],
[{name: '黑龙江',value:90}],
[{name: '内蒙古',value:66}],
[{name: '西藏',value:70}],
[{name: '陕西',value:94}],
[{name: '广西',value:79}],
[{name: '新疆',value:51}],
[{name: '青海',value:67}],
[{name: '海南',value:30},],
[{name: '云南',value:56}],
[{name: '四川',value:96},],
[{name: '福建',value:74}],
// [{name: '宁夏',value:47}],
// [{name: '西藏',value:19}],
// [{name: '黑龙江',value:33}],
// [{name: '新疆',value:28}],
// [{name: '天津',value:11}],
// [{name: '上海',value:13}],
// [{name: '重庆',value:9}],
// [{name: '辽宁',value:46}],
// [{name: '安徽',value:88}],
// [{name: '山东',value:82}],
// [{name: '江苏',value:38}],
// [{name: '甘肃',value:23}],
// [{name: '山西',value:36}],
// [{name: '内蒙古',value:29}],
// [{name: '陕西',value:45}],
// [{name: '吉林',value:44}],
// [{name: '广东',value:59}],
// [{name: '青海',value:23}],
// [{name: '台湾',value:26}],
// [{name: '香港',value:27}],
// [{name: '澳门',value:13}]
];
//涟漪特效位置
var geoCoordMap = {
'广州': [113.5107,23.2196],
'北京': [116.4551,40.2539],
'天津': [117.4219,39.4189],
'上海': [121.4648,31.2891],
'重庆': [106.557165,29.563206],
'河北': [114.508958,38.066606],
'河南': [113.673367,34.748062],
'云南': [102.721896,25.047632],
'辽宁': [123.445621,41.806698],
'黑龙江': [126.655705,45.759581],
'湖南': [112.950888,28.229114],
'安徽': [117.300842,31.887672],
'山东': [117.029895,36.677424],
'新疆': [87.616327,43.800508],
'江苏': [118.814345,32.061445],
'浙江': [120.16991,30.272236],
'江西': [115.904962,28.674132],
'湖北': [114.290138,30.595623],
'广西': [108.381781,22.815042],
'甘肃': [103.851217,36.061978],
'山西': [112.57197,37.879532],
'内蒙古': [112.57197,37.879532],
'陕西': [108.960062,34.285251],
'吉林': [126.572746,43.86785],
'福建': [119.319713,26.072564],
'贵州': [106.557165,29.563206],
'广东': [113.238778,23.161621],
'青海': [101.787147,36.621234],
'西藏': [91.154492,29.665953],
'四川': [104.082256,30.652565],
'宁夏': [106.234805,38.487468],
'海南': [109.910757,19.108187],
'台湾': [121.098613,23.778734],
'香港': [114.168545,22.36641],
'澳门': [113.549978,22.1943]
};
//不同省份的颜色
// for (var i = 0; i < allData.length; i++) {
// allData[i].value = Math.round(Math.random() * 100);
// }
loadMap('zhongguo.json', 'china');//初始化全国地图
var timeFn = null;
//单击切换到省级地图，当mapCode有值,说明可以切换到下级地图
myChart.on('click', function(params) {
// 涟漪数据清空，避免市级闪烁重复
series2[0].data=[]
clearTimeout(timeFn);
//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
timeFn = setTimeout(function() {
var name = params.name; //地区name
var mapCode = provinces[name]; //地区的json数据
if (!mapCode) {
alert('双击返回上级地图');
return;
}
loadMap(mapCode, name);
}, 250);
});
// 绑定双击事件，返回全国地图
myChart.on('dblclick', function(params) {
series2[0].data = JSON.parse(sessionStorage.getItem("series2"));
//当双击事件发生时，清除单击事件，仅响应双击事件
clearTimeout(timeFn);
//返回全国地图
loadMap('json/china.json', 'china');
});
//涟漪效果
var series2 = [];
[GZData].forEach(function (item, i) {
series2.push(
{
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: { //涟漪特效相关配置
period:'4', //动画的时间
scale:'8', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
label: { //图形上的城市文本标签
normal: {
show: false,
position: 'right',
formatter: '{b}',
textStyle:{
color:'#fff',
fontStyle: 'normal',
fontFamily: 'arial',
fontSize: 12,
}
}
},
symbolSize: 3,//点大小
data: item.map(function (dataItem) {
return {
name: dataItem[0].name,//来源或流向修改
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])//来源或流向修改
};
}),
});
});
//把涟漪数据存到本地，市级返回时调用
sessionStorage.setItem("series2",JSON.stringify(series2[0].data));
// 获取对应的json地图数据，然后向echarts注册该区域的地图，最后加载地图信息
// @params {String} mapCode:json数据的地址
// @params {String} name: 地图名称
function loadMap(mapCode, name) {
axios.get(mapCode)
.then(function (data) {
if (data) {
echarts.registerMap(name, data.data);
var option = {
tooltip: {
show: true,
formatter: function(params) {
if (params.data) return params.name + '：' + params.data['value']
},
},
visualMap: {
show:false,
type: 'continuous',
text: ['', ''],
showLabel: true,
left: '50',
min: 0,
max: 100,
inRange: {
color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
},
splitNumber: 0
},
series: [
{
name: 'MAP',
// map: 'china',
type: 'map',
mapType: name,
selectedMode: 'single',//是否允许选中多个区域
label: {
normal: {
show: false //是否显示省名
},
emphasis: {
show: true
}
},
data: allData,
itemStyle: {
normal: {
areaColor: '#07609f',
borderColor: 'white'
}
},
},
...series2
],
geo: {
map: name, //map类型使用name，避免显示双地图
type: 'scatter',
label: {
normal: {
show: false //是否显示省名
},
emphasis: {
show: false
}
},
},
};
myChart.setOption(option);
} else {
alert('无法加载该地图');
}
})
.catch(function (error) {
console.log(error);
});
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.DataView{
padding:20px 10px;
/* background: rgba(15, 45, 95, 0.2); */
}
.main{
height: 520px;
width: 100%;
}
</style>
```
链接：https://pan.baidu.com/s/1a9TbR_SaLAuH4S8AXhUNnw
提取码：ay7s
复制这段内容后打开百度网盘手机App，操作更方便哦
