鏈接：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(){
? ? ? // 基于準(zhǔn)備好的dom偏螺，初始化echarts實(shí)例
? ? ? var myChart? = echarts.init(this.$refs.DataMap);
? ? ? //各省份的地圖json文件
? ? ? ? var provinces = {
? ? ? ? ? ? '上海': 'json/province/shanghai.json',
? ? ? ? ? ? '山西': 'json/province/shanxi.json',
? ? ? ? ? ? '河北': 'json/province/hebei.json',
? ? ? ? ? ? '內(nèi)蒙古': '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'
? ? ? ? };
? ? ? ? //各省份的數(shù)據(jù)
? ? ? ? var allData = [{
? ? ? ? ? ? name: '北京'
? ? ? ? }, {
? ? ? ? ? ? name: '天津'
? ? ? ? }, {
? ? ? ? ? ? name: '上海'
? ? ? ? }, {
? ? ? ? ? ? name: '重慶'
? ? ? ? }, {
? ? ? ? ? ? name: '河北'
? ? ? ? }, {
? ? ? ? ? ? name: '河南'
? ? ? ? }, {
? ? ? ? ? ? name: '云南'
? ? ? ? }, {
? ? ? ? ? ? name: '遼寧'
? ? ? ? }, {
? ? ? ? ? ? name: '黑龍江'
? ? ? ? }, {
? ? ? ? ? ? name: '湖南'
? ? ? ? }, {
? ? ? ? ? ? name: '安徽'
? ? ? ? }, {
? ? ? ? ? ? name: '山東'
? ? ? ? }, {
? ? ? ? ? ? name: '新疆'
? ? ? ? }, {
? ? ? ? ? ? name: '江蘇'
? ? ? ? }, {
? ? ? ? ? ? name: '浙江'
? ? ? ? }, {
? ? ? ? ? ? name: '江西'
? ? ? ? }, {
? ? ? ? ? ? name: '湖北'
? ? ? ? }, {
? ? ? ? ? ? name: '廣西'
? ? ? ? }, {
? ? ? ? ? ? name: '甘肅'
? ? ? ? }, {
? ? ? ? ? ? name: '山西'
? ? ? ? }, {
? ? ? ? ? ? name: '內(nèi)蒙古'
? ? ? ? }, {
? ? ? ? ? ? name: '陜西'
? ? ? ? }, {
? ? ? ? ? ? name: '吉林'
? ? ? ? }, {
? ? ? ? ? ? name: '福建'
? ? ? ? }, {
? ? ? ? ? ? name: '貴州'
? ? ? ? }, {
? ? ? ? ? ? name: '廣東'
? ? ? ? }, {
? ? ? ? ? ? name: '青海'
? ? ? ? }, {
? ? ? ? ? ? name: '西藏'
? ? ? ? }, {
? ? ? ? ? ? name: '四川'
? ? ? ? }, {
? ? ? ? ? ? name: '寧夏'
? ? ? ? }, {
? ? ? ? ? ? name: '海南'
? ? ? ? }, {
? ? ? ? ? ? name: '臺(tái)灣'
? ? ? ? }, {
? ? ? ? ? ? name: '香港'
? ? ? ? }, {
? ? ? ? ? ? name: '澳門'
? ? ? ? }];
? ? ? ? //需要漣漪效果的地方
? ? ? ? var GZData = [
? ? ? ? ? ? [{name: '北京',value:96}],
? ? ? ? ? ? [{name: '黑龍江',value:90}],
? ? ? ? ? ? [{name: '內(nèi)蒙古',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: '內(nèi)蒙古',value:29}],
? ? ? ? //??[{name: '陜西',value:45}],
? ? ? ? //??[{name: '吉林',value:44}],
? ? ? ? //??[{name: '廣東',value:59}],
? ? ? ? //??[{name: '青海',value:23}],
? ? ? ? //??[{name: '臺(tái)灣',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],
? ? ? ? ? ? '內(nèi)蒙古': [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],
? ? ? ? ? ? '臺(tái)灣': [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;
? ? ? ? //單擊切換到省級(jí)地圖五芝，當(dāng)mapCode有值,說明可以切換到下級(jí)地圖
? ? ? ? myChart.on('click', function(params) {
? ? ? ? ? ? // 漣漪數(shù)據(jù)清空，避免市級(jí)閃爍重復(fù)
? ? ? ? ? ? series2[0].data=[]
? ? ? ? ? ? clearTimeout(timeFn);
? ? ? ? ? ? //由于單擊事件和雙擊事件沖突，故單擊的響應(yīng)事件延遲250毫秒執(zhí)行
? ? ? ? ? ? timeFn = setTimeout(function() {
? ? ? ? ? ? ? ? var name = params.name; //地區(qū)name
? ? ? ? ? ? ? ? var mapCode = provinces[name]; //地區(qū)的json數(shù)據(jù)
? ? ? ? ? ? ? ? if (!mapCode) {
? ? ? ? ? ? ? ? ? ? alert('雙擊返回上級(jí)地圖');
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? loadMap(mapCode, name);
? ? ? ? ? ? }, 250);
? ? ? ? });
? ? ? ? // 綁定雙擊事件代兵，返回全國地圖
? ? ? ? myChart.on('dblclick', function(params) {?
? ? ? ? ? ? series2[0].data = JSON.parse(sessionStorage.getItem("series2"));
? ? ? ? ? ? //當(dāng)雙擊事件發(fā)生時(shí)，清除單擊事件，僅響應(yīng)雙擊事件
? ? ? ? ? ? clearTimeout(timeFn);
? ? ? ? ? ? //返回全國地圖
? ? ? ? ? ? loadMap('json/china.json', 'china');
? ? ? ? });
? ? ? ? //漣漪效果
? ? ? ? var series2 = [];
? ? ? ? ? ? [GZData].forEach(function (item, i) {
? ? ? ? ? ? ? ? series2.push(
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? type: 'effectScatter',
? ? ? ? ? ? ? ? ? ? coordinateSystem: 'geo',
? ? ? ? ? ? ? ? ? ? rippleEffect: { //漣漪特效相關(guān)配置
? ? ? ? ? ? ? ? ? ? ? ? period:'4', //動(dòng)畫的時(shí)間
? ? ? ? ? ? ? ? ? ? ? ? scale:'8', //動(dòng)畫中波紋的最大縮放比例
? ? ? ? ? ? ? ? ? ? ? ? brushType: 'stroke'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? label: { //圖形上的城市文本標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: '',
? ? ? ? ? ? ? ? ? ? ? ? ? ? textStyle:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:'#fff',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontStyle: 'normal',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontFamily: 'arial',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 12,
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? symbolSize: 3,//點(diǎn)大小
? ? ? ? ? ? ? ? ? ? data: item.map(function (dataItem) {? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? ? ? name: dataItem[0].name,//來源或流向修改
? ? ? ? ? ? ? ? ? ? ? ? ? ? value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])//來源或流向修改
? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? });
? ? ? ? ? ? });
? ? ? ? ? ? //把漣漪數(shù)據(jù)存到本地销部，市級(jí)返回時(shí)調(diào)用
? ? ? ? ? ? sessionStorage.setItem("series2",JSON.stringify(series2[0].data));? ?
? ? ? ? //? 獲取對(duì)應(yīng)的json地圖數(shù)據(jù)摸航，然后向echarts注冊(cè)該區(qū)域的地圖，最后加載地圖信息
? ? ? ? // @params {String} mapCode:json數(shù)據(jù)的地址
? ? ? ? // @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',//是否允許選中多個(gè)區(qū)域
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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
復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機(jī)App酱虎，操作更方便哦
