<template>
	<div style="width:100%;position: relative;">
		<div className="overview_mian_mapBox" id="mapChart" ref="mapChart"></div>
		<div style="width: 60px;height:60px;position: absolute;top:20px;right:60px;cursor: pointer;" v-if="mapCityName!='黑龙江省'"><img
			src="@/assets/images/mapPage/back.png" alt="" style="width:100%;" @click="backMap"></div>
	</div>

	<!-- 弹窗 -->
	<!-- <div class="mapPopWin" style="pointer-events: initial" v-if="popShow" :style="{ left: left - 110 + 'px', top: top - 130 + 'px' }" >
		<h3>{{ address }}</h3>
		<div class="info2">
			<p v-for="(item, index) in subData" :key="index">{{ item.name }}：<span>{{ item.value }}</span></p>
		</div>
	</div> -->

</template>
<script name="test">
import sysConfig from "@/config";
import * as echarts from 'echarts'
import axios from 'axios'
import {toRaw} from 'vue'
import heilongjiang from '@/assets/heilongjiangJSON/heilongjiang.json'
import daqing from '@/assets/heilongjiangJSON/daqing.json'
import daxinganling from '@/assets/heilongjiangJSON/daxinganling.json'
import haerbin from '@/assets/heilongjiangJSON/haerbin.json'
import hegang from '@/assets/heilongjiangJSON/hegang.json'
import heihe from '@/assets/heilongjiangJSON/heihe.json'
import jiamusi from '@/assets/heilongjiangJSON/jiamusi.json'
import jixi from '@/assets/heilongjiangJSON/jixi.json'
import mudanjiang from '@/assets/heilongjiangJSON/mudanjiang.json'
import qiqihaer from '@/assets/heilongjiangJSON/qiqihaer.json'
import qitaihe from '@/assets/heilongjiangJSON/qitaihe.json'
import shuangyashan from '@/assets/heilongjiangJSON/shuangyashan.json'
import suihua from '@/assets/heilongjiangJSON/suihua.json'
import yichun from '@/assets/heilongjiangJSON/yichun.json'
import base64Img from '@/assets/images/mapPage/base64Img.js'
import depotMapPageApi from '@/api/biz/depotMapPageApi'
import router from "@/router";

export default {
	name: 'heilongjiangCityToDistrict',
	data() {
		let self = this
		return {
			mapChart: null,//地图
			interval: 3000, // 时间间隔毫秒数
			index: -1, // 播放所在下标
			timer: null,
			pointList: {
				heilongjiangCity: {
					'大庆': [124.705742, 46.357625],
					'大兴安岭': [124.201147, 52.341079],
					'哈尔滨': [127.966759, 45.648633],
					'鹤岗': [130.807059, 47.644529],
					'黑河': [126.988643, 49.282601],
					'佳木斯': [131.904856, 47.148466],
					'鸡西': [132.297639, 45.435227],
					'牡丹江': [129.895544, 44.607512],
					'齐齐哈尔': [124.557904, 47.710767],
					'七台河': [130.943937, 45.881675],
					'双鸭山': [132.723042, 46.521849],
					'绥化': [126.658429, 46.904079],
					'伊春': [129.224747, 47.830729]
				},
				daqing: {
					'萨尔图区': [125.061613, 46.707789],
					'龙凤区': [125.126676, 46.525707],
					'让胡路区': [124.778186, 46.702338],
					'红岗区': [124.882963, 46.350759],
					'大同区': [124.683351, 46.07855],
					'肇州县': [125.300039, 45.835306],
					'肇源县': [124.761625, 45.642848],
					'林甸县': [124.898566, 47.152984],
					'杜尔伯特蒙古族自治县': [124.237738, 46.55838]
				},
				daxinganling: {
					'漠河市': [122.708322, 52.939967],
					'加格达奇区': [124.138005, 50.375673],
					'呼玛县': [124.905528, 51.806434],
					'塔河县': [124.63412, 52.711298]
				},
				haerbin: {
					'道里区': [126.373347, 45.668664],
					'南岗区': [126.57275, 45.650527],
					'道外区': [126.893475, 45.847448],
					'平房区': [126.665235, 45.58458],
					'松北区': [126.434402, 45.913435],
					'香坊区': [126.781726, 45.698799],
					'呼兰区': [126.809801, 46.133447],
					'阿城区': [127.162108, 45.479923],
					'双城区': [126.182557, 45.403569],
					'依兰县': [129.715068, 46.268547],
					'方正县': [128.943056, 45.814215],
					'宾县': [127.65409, 45.778069],
					'巴彦县': [127.31892, 46.335125],
					'木兰县': [127.925557, 46.240125],
					'通河县': [128.755965, 46.24237],
					'延寿县': [128.457185, 45.488029],
					'尚志市': [128.317371, 45.077956],
					'五常市': [127.484789, 44.766503]
				},
				hegang: {
					'向阳区': [130.296455, 47.339377],
					'工农区': [130.266138, 47.317975],
					'南山区': [130.287309, 47.281452],
					'兴安区': [130.150352, 47.246092],
					'东山区': [130.418188, 47.251774],
					'兴山区': [130.32132, 47.387203],
					'萝北县': [130.57235, 47.784893],
					'绥滨县': [131.848743, 47.477805]
				},
				heihe: {
					'爱辉区': [126.733255, 50.225369],
					'逊克县': [128.612059, 49.036567],
					'孙吴县': [127.326919, 49.397597],
					'北安市': [127.106492, 48.110797],
					'五大连池市': [127.185552, 48.685818],
					'嫩江市': [125.76615, 49.604607]
				},
				jiamusi: {
					'向阳区': [130.359814, 46.818292],
					'前进区': [130.407338, 46.775985],
					'东风区': [130.446855, 46.799941],
					'郊区': [130.268488, 46.772211],
					'桦南县': [130.709063, 46.283451],
					'桦川县': [130.948398, 46.981601],
					'汤原县': [129.911645, 46.735327],
					'同江市': [133.267156, 47.828699],
					'富锦市': [132.531211, 47.164848],
					'抚远市': [134.276606, 47.966858]
				},
				jixi: {
					'鸡冠区': [130.950185, 45.288532],
					'恒山区': [130.913982, 45.158084],
					'滴道区': [130.740863, 45.364378],
					'梨树区': [130.739041, 45.084128],
					'城子河区': [131.019558, 45.377254],
					'麻山区': [130.541203, 45.204504],
					'鸡东县': [131.218803, 45.265887],
					'虎林市': [133.113612, 45.991345],
					'密山市': [132.169979, 45.463473]
				},
				mudanjiang: {
					'东安区': [129.834861, 44.385592],
					'阳明区': [129.874721, 44.660181],
					'爱民区': [129.514243, 44.708453],
					'西安区': [129.533997, 44.490417],
					'林口县': [130.032332, 45.44],
					'绥芬河市': [131.095149, 44.401989],
					'海林市': [129.218049, 44.908403],
					'宁安市': [129.210232, 44.053833],
					'穆棱市': [130.421978, 44.570685],
					'东宁市': [130.840358, 44.021379]
				},
				qiqihaer: {
					'龙沙区': [123.922001, 47.269065],
					'建华区': [124.016527, 47.401273],
					'铁锋区': [124.240846, 47.287161],
					'昂昂溪区': [123.959687, 47.136353],
					'富拉尔基区': [123.590228, 47.222379],
					'碾子山区': [122.925333, 47.578383],
					'梅里斯达斡尔族区': [123.859514, 47.563791],
					'龙江县': [123.080975, 47.24642],
					'依安县': [125.288013, 47.700556],
					'泰来县': [123.551063, 46.598159],
					'甘南县': [123.836525, 48.004787],
					'富裕县': [124.566231, 47.662945],
					'克山县': [125.699713, 48.161786],
					'克东县': [126.34414, 48.004388],
					'拜泉县': [126.01491, 47.585918],
					'讷河市': [125.069101, 48.475872]
				},
				qitaihe: {
					'新兴区': [131.162257, 45.958252],
					'桃山区': [130.992785, 45.758662],
					'茄子河区': [131.464111, 45.887993],
					'勃利县': [130.489212, 45.829924]
				},
				shuangyashan: {
					'尖山区': [131.171984, 46.645541],
					'岭东区': [131.193643, 46.487647],
					'四方台区': [131.2822, 46.673572],
					'宝山区': [131.516921, 46.525767],
					'集贤县': [131.145553, 46.815619],
					'友谊县': [131.849444, 46.783439],
					'宝清县': [132.396406, 46.404143],
					'饶河县': [133.79731, 47.130859]
				},
				suihua: {
					'北林区': [126.950889, 46.741733],
					'望奎县': [126.58614, 46.863437],
					'兰西县': [126.207342, 46.35243],
					'青冈县': [125.949701, 46.840916],
					'庆安县': [127.510024, 46.879203],
					'明水县': [125.834688, 47.195074],
					'绥棱县': [127.716712, 47.579065],
					'安达市': [125.378423, 46.529838],
					'肇东市': [125.842965, 46.004307],
					'海伦市': [126.885178, 47.438796]
				},
				yichun: {
					'伊美区': [129.271167, 47.757325],
					'乌翠区': [128.571433, 47.632725],
					'友好区': [128.66894, 48.077392],
					'嘉荫县': [130.001867, 48.764532],
					'汤旺县': [129.461378, 48.605304],
					'丰林县': [129.376317, 48.23738],
					'大箐山县': [128.925056, 46.868408],
					'南岔县': [129.381017, 47.07615],
					'金林区': [129.543594, 47.499335],
					'铁力市': [128.289584, 46.919713],

				}
			},
			mapOption: {
				tooltip: {
					triggerOn: "mousemove",//click
					trigger: 'item',
					//showDelay:1000,       //浮层显示的延迟，单位为 ms
					enterable: false,     //鼠标是否可进入提示框浮层中
					backgroundColor: 'rgba(6, 54, 125, 0.6)',
					borderColor: 'rgba(0, 244, 251, 0.3)',
					borderWidth: 1,
					padding: 0,
					textStyle: {
						textAlign: 'center'
					},
					transitionDuration: 0,
					position: function (point, params, dom, rect, size) {
						var x = 0; // x坐标位置
						var y = 0; // y坐标位置
						// 当前鼠标位置
						var pointX = point[0];
						var pointY = point[1];
						// 提示框大小
						var boxWidth = size.contentSize[0];
						var boxHeight = size.contentSize[1];

						// boxWidth > pointX 说明鼠标左边放不下提示框
						// if (boxWidth > pointX) {
						//     x = pointX + 10;
						// } else { // 左边放的下
						//     x = pointX - boxWidth - 5;
						// }
						x = pointX - boxWidth / 2

						// boxHeight > pointY 说明鼠标上边放不下提示框
						// if (boxHeight > pointY) {
						//     y = 5;
						// } else { // 上边放得下
						//     y = pointY - boxHeight;
						// }
						y = pointY - 220
						return [x, y + 180];
					},
					formatter: function (params) {
						//当鼠标悬停在地市区域上时，显示的是项目数，当你悬停到小气球上时，显示的是项目数：经度，维度，项目数。我们需要调整toolTip，让其根据不同的数据源，进行判断，从而实现数据显示的统一性
						var toolTiphtml = ''
						let haveCityArr = toRaw(self.haveCity)
						if (haveCityArr.indexOf(params.name) != -1) {
							toolTiphtml = `<div style="padding: 15px;box-shadow: 1px 1px 15px rgba(0, 244, 251, 0.51) inset; width:auto;min-width: 240px;text-align: center;">
							<h3 style="font-size: 22px; font-family: PangMenZhengDao;color: #fefefe;height: 36px;line-height: 36px;background: linear-gradient( 90deg, rgba(100, 224, 255, 0) 0%, rgba(92, 242, 255, 0.36) 34%, rgba(92, 242, 255, 0.36) 70%, rgba(97, 246, 255, 0) 100% );">${params.name}:${params.data.getvalue}</h3>
							<div width: 100%; font-size: 14px; font-family: PingFang; font-weight: 500; color: #ffffff; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; flex-direction: column; align-content: flex-start;>
								<p style="margin-bottom: 8px; padding: 4px; background: linear-gradient( 90deg, rgba(100, 224, 255, 0.1) 0%, rgba(92, 242, 255, 0.2) 34%, rgba(92, 242, 255, 0.2) 70%, rgba(97, 246, 255, 0.1) 100% );text-align:left;color:#fff;"><span style="display:inline-block;width:80px;">贷&nbsp款&nbsp额:</span>￥${params.data.loanSum}</p>
								<p style="margin-bottom: 8px; padding: 4px; background: linear-gradient( 90deg, rgba(100, 224, 255, 0.1) 0%, rgba(92, 242, 255, 0.2) 34%, rgba(92, 242, 255, 0.2) 70%, rgba(97, 246, 255, 0.1) 100% );text-align:left;color:#fff;"><span style="display:inline-block;width:80px;">质&nbsp押&nbsp量:</span>${params.data.mortgageCount}万吨</p>
								<p style="margin-bottom: 8px; padding: 4px; background: linear-gradient( 90deg, rgba(100, 224, 255, 0.1) 0%, rgba(92, 242, 255, 0.2) 34%, rgba(92, 242, 255, 0.2) 70%, rgba(97, 246, 255, 0.1) 100% );text-align:left;color:#fff;"><span style="display:inline-block;width:80px;">&nbsp利&nbsp&nbsp息&nbsp&nbsp:</span>￥${params.data.loanInterest}</p></div></div>`
						} else {
							toolTiphtml = `<div style="padding: 15px;box-shadow: 1px 1px 15px rgba(0, 244, 251, 0.51) inset; width:auto;min-width: 240px;text-align: center;">
							<h3 style="font-size: 22px; font-family: PangMenZhengDao;color: #fefefe;height: 36px;line-height: 36px;background: linear-gradient( 90deg, rgba(100, 224, 255, 0) 0%, rgba(92, 242, 255, 0.36) 34%, rgba(92, 242, 255, 0.36) 70%, rgba(97, 246, 255, 0) 100% );">${params.name}</h3>
							<div width: 100%; font-size: 14px; font-family: PingFang; font-weight: 500; color: #ffffff; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 8px; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; flex-direction: column; align-content: flex-start;>
								<p style="margin-bottom: 8px; padding: 4px; background: linear-gradient( 90deg, rgba(100, 224, 255, 0.1) 0%, rgba(92, 242, 255, 0.2) 34%, rgba(92, 242, 255, 0.2) 70%, rgba(97, 246, 255, 0.1) 100% );text-align:left;color:#fff;text-align:center;">暂无数据</p></div></div>`
						}
						return toolTiphtml
					}
				},
				geo3D: {
					show: true,
					map: 'city',
					left: '0%',
					roam: true,
					regionHeight: 5,
					itemStyle: {
						// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
						color: '#0a599f', // 地图板块的颜色
						opacity: 1, // 图形的不透明度 [ default: 1 ]
						borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
						borderColor: '#377CC5', // 图形描边的颜色。[ default: #333 ]
						areaColor: '#2D5F9F'
					},
					emphasis: {
						label: {
							show: false,
							color: '#fff000'
						}
					},
					regions: []
				},
				geo: {
					show: true,
					map: 'city',
					aspectScale: 0.75,
					zoom: 1.2, //当前视角的缩放比例
					zlevel: -1,
					label: {
						normal: {
							//默认状态
							show: false //地图是否显示地区名字
						},
						emphasis: {
							//鼠标滑过状态
							show: false
						}
					},
					roam: true, //是否可以缩放拖动
					itemStyle: {
						normal: {
							areaColor: {
								image: base64Img.echartsBgImg, //配置图片
								repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
							},
							// areaColor: '#020916',
							borderColor: '#3B5077',
							borderWidth: 1.5, //给边界border加宽，并添加阴影
							shadowColor: '#2FC1FF', //给边界border加宽，并添加阴影
							shadowBlur: 15 //给边界border加宽，并添加阴影
						},
						emphasis: {
							areaColor: 'yellow'
						}
					}
				},
				series: [
					{
						name: 'city',
						type: 'map',
						map: 'city', // 自定义扩展图表类型
						aspectScale: 0.75,
						zoom: 1.2, //当前视角的缩放比例
						zlevel: -1,
						roam: true,
						showLegendSymbol: true,
						label: {
							normal: {
								show: false,
								textStyle: {
									color: '#fff',
									fontSize: '120%'
								}
							},
							emphasis: {
								// show: false,
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(255,255,255,.5)',
								borderWidth: 2,
								areaColor: {
									image: base64Img.echartsBgImg, //配置图片
									repeat: 'repeat' //可选值repeat、no-repeat、repeat-x、repeat-y
								}
							},
							emphasis: {
								show: false,
								color: '#fff',
								areaColor: 'rgba(250,147,27,0.6)'
							}
						},
						// layoutCenter: ["50%", "50%"],
						// layoutSize: "180%",
						markPoint: {
							symbol: 'none'
						},
						data: [], //mapData,
						animationDurationUpdate: 0
					},
					// 柱状体的顶部
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						label: {
							normal: {
								show: true,
								formatter: function (params) {
									var name = params.name
									var value = params.value[2]
									var text = `{tline|${name}}`
									return text
								},
								color: '#fff',
								rich: {
									fline: {
										padding: [0, 25],
										color: '#fff',
										fontSize: 14,
										fontWeight: 400
									},
									tline: {
										padding: [0, 27],
										color: '#ABF8FF',
										fontSize: 12
									}
								}
							},
							emphasis: {
								show: true
							}
						},
						itemStyle: {
							color: '#00FFF6'
						},
						symbol: base64Img.topImg,
						symbolSize: [81, 41],
						symbolOffset: [0, -60],
						z: 99,
						data: [],
						animationDurationUpdate: 0
					},
					// 中间柱子
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						itemStyle: {
							color: '#00FFF6'
						},
						symbol: base64Img.centerImg,
						symbolSize: [32, 41],
						symbolOffset: [0, -20],
						z: 99,
						data: [],
						animationDurationUpdate: 0
					},
					{
						//底部
						tooltip: {
							show: true
						},
						type: 'effectScatter',
						coordinateSystem: 'geo',
						rippleEffect: {
							scale: 5, //光晕的大小
							brushType: 'stroke'
						},
						showEffectOn: 'render',
						itemStyle: {
							normal: {
								color: '#00FFFF'
							}
						},
						label: {
							normal: {
								color: '#fff'
							}
						},
						symbol: 'circle',
						symbolSize: [10, 5],
						data: [],
						zlevel: 20,
						//roma:true,
						animationDurationUpdate: 0
					}
				]
			},
			mapCityName: '黑龙江省',
			mapCityCode: 'heilongjiang', //表示加载哪个地图 地图code码

			popShow: false,
			left: 0,
			top: 0,
			address: '',
			mapData: [],
			haveCity: []
		}
	},
	mounted() {
		// 初始化渲染
		this.drawMapChart()
		// // 设置轮播
		//this.setIntervalMyChart(this.mapData);
		// resize 事件监听
		//window.addEventListener("resize", this.handleResize);
	},
	methods: {
		drawMapChart() {
			let that = this
			//在需要的地方调用 request()
			// const request = async (api) => {
			// 	return await axios.get(api)
			// }
			switch (this.mapCityCode) {
				case 'heilongjiang':
					echarts.registerMap('city', heilongjiang)
					break
				case 'daqing':
					echarts.registerMap('city', daqing)
					break
				case 'daxinganling':
					echarts.registerMap('city', daxinganling)
					break
				case 'haerbin':
					echarts.registerMap('city', haerbin)
					break
				case 'hegang':
					echarts.registerMap('city', hegang)
					break
				case 'heihe':
					echarts.registerMap('city', heihe)
					break
				case 'jiamusi':
					echarts.registerMap('city', jiamusi)
					break
				case 'jixi':
					echarts.registerMap('city', jixi)
					break
				case 'mudanjiang':
					echarts.registerMap('city', mudanjiang)
					break
				case 'qiqihaer':
					echarts.registerMap('city', qiqihaer)
					break
				case 'qitaihe':
					echarts.registerMap('city', qitaihe)
					break
				case 'shuangyashan':
					echarts.registerMap('city', shuangyashan)
					break
				case 'suihua':
					echarts.registerMap('city', suihua)
					break
				case 'yichun':
					echarts.registerMap('city', yichun)
					break
			}
			// 初始化
			this.mapChart = echarts.init(this.$refs.mapChart);
			//var mapChart = echarts.init(document.getElementById('mapChart'))
			//地图数据（用于鼠标悬停显示的数据源）
			//var data = []
			//创建一个散点数组，用于保存经纬度坐标以及项目数量，从而在地图上显示地市项目数量
			var cityProjData = []
			depotMapPageApi.mapZoneCount().then((data) => {
				let heilongjiangCity = toRaw(that.pointList.heilongjiangCity)
				//将城市数据整理到地图数据中
				let gethaveCity = []
				data.forEach(function (v) {
					//标注点数据
					cityProjData.push({
						name: v.name,// 地区名称
						loanInterest: v.loanInterest,
						loanSum: v.loanSum,
						mortgageCount: v.mortgageCount,
						getvalue: v.value,
						value: heilongjiangCity[v.name] //将坐标数组和项目数量组合到一个数组中
					})
					gethaveCity.push(v.name)
				})
				that.haveCity = gethaveCity
				that.mapData = cityProjData
				that.mapOption.series[0].data = cityProjData //保存散点图点
				that.mapOption.series[1].data = cityProjData //保存散点图底部
				that.mapOption.series[2].data = cityProjData //保存散点图中间柱子
				that.mapOption.series[3].data = cityProjData //保存散点图顶部背景

				setTimeout(function () {
					that.mapChart.clear(); //清楚地图数据
					that.mapChart.setOption(that.mapOption)
					// 激活高亮跟提示
					console.log(that.index)
					that.dispatchActionChart(that.mapChart, "highlight", that.index);
					that.dispatchActionChart(that.mapChart, "showTip", that.index);
					that.setIntervalMyChart(cityProjData)
				}, 50)
				// 鼠标划入
				this.mouseEvents();
				var provinces = ['daqing', 'daxinganling', 'haerbin', 'hegang', 'heihe', 'jiamusi', 'jixi', 'mudanjiang', 'qiqihaer', 'qitaihe', 'shuangyashan', 'suihua', 'yichun']
				var provincesText = ['大庆', '大兴安岭', '哈尔滨', '鹤岗', '黑河', '佳木斯', '鸡西', '牡丹江', '齐齐哈尔', '七台河', '双鸭山', '绥化', '伊春']

				this.mapChart.on('click', function (param) {
					this.index = -1
					if (provincesText.indexOf(param.name) != -1) {
						that.mapCityName = param.name || '黑龙江省'  //通过汉字找到索引在匹配拼音找对应地图JSON
						that.mapCityCode = provinces[provincesText.indexOf(param.name)] || 'heilongjiang'  //通过汉字找到索引在匹配拼音找对应地图JSON
						that.getCityMapOpt()
					} else {
						router.replace({
							path: '/biz/depotGrainInfo'
						})
						/*that.mapCityName = '黑龙江省'
						that.mapCityCode = 'heilongjiang'
						that.getCityMapOpt()*/
					}
				})
			})
		},
		backMap() {
			// 停止定时器，清除之前的高亮
			clearInterval(this.timer);
			this.dispatchActionChart(this.mapChart, "downplay", this.index);
			this.mapCityName = '黑龙江省'
			this.mapCityCode = 'heilongjiang' //表示加载哪个地图 地图code码
			this.index = -1 // 播放所在下标
			// 初始化渲染
			this.drawMapChart()
		},
		//显示各市地图
		getCityMapOpt() {
			let that = this
			switch (this.mapCityCode) {
				case 'heilongjiang':
					echarts.registerMap('city', heilongjiang)
					break
				case 'daqing':
					echarts.registerMap('city', daqing)
					break
				case 'daxinganling':
					echarts.registerMap('city', daxinganling)
					break
				case 'haerbin':
					echarts.registerMap('city', haerbin)
					break
				case 'hegang':
					echarts.registerMap('city', hegang)
					break
				case 'heihe':
					echarts.registerMap('city', heihe)
					break
				case 'jiamusi':
					echarts.registerMap('city', jiamusi)
					break
				case 'jixi':
					echarts.registerMap('city', jixi)
					break
				case 'mudanjiang':
					echarts.registerMap('city', mudanjiang)
					break
				case 'qiqihaer':
					echarts.registerMap('city', qiqihaer)
					break
				case 'qitaihe':
					echarts.registerMap('city', qitaihe)
					break
				case 'shuangyashan':
					echarts.registerMap('city', shuangyashan)
					break
				case 'suihua':
					echarts.registerMap('city', suihua)
					break
				case 'yichun':
					echarts.registerMap('city', yichun)
					break
			}
			//var mapChart = echarts.init(document.getElementById('mapChart'))
			// 初始化
			this.mapChart = echarts.init(this.$refs.mapChart);
			this.mapOption.geo.map = 'city'
			var cityProjData = []
			depotMapPageApi.mapZoneCount({'name': this.mapCityName}).then((data) => {
				that.haveCity = []
				let sucityData = []
				if (that.mapCityName != '黑龙江省') {
					sucityData = toRaw(that.pointList[that.mapCityCode])
				} else {
					sucityData = toRaw(that.pointList.heilongjiangCity)
				}
				let gethaveCity = []
				//将城市数据整理到地图数据中
				data.forEach(function (v) {
					//标注点数据
					cityProjData.push({
						name: v.name,// 地区名称
						loanInterest: v.loanInterest,
						loanSum: v.loanSum,
						mortgageCount: v.mortgageCount,
						getvalue: v.value,
						value: sucityData[v.name] //将坐标数组和项目数量组合到一个数组中
					})
					gethaveCity.push(v.name)
				})
				that.haveCity = gethaveCity
				that.mapData = cityProjData
				that.mapOption.series[0].data = cityProjData //保存散点图点
				that.mapOption.series[1].data = cityProjData //保存散点图底部
				that.mapOption.series[2].data = cityProjData //保存散点图中间柱子
				that.mapOption.series[3].data = cityProjData //保存散点图顶部背景

				setTimeout(function () {
					that.mapChart.clear(); //清楚地图数据
					that.mapChart.setOption(that.mapOption)
					that.index = -1
					// 激活高亮跟提示
					that.dispatchActionChart(that.mapChart, "highlight", that.index);
					that.dispatchActionChart(that.mapChart, "showTip", that.index);
					console.log('二级城市汇总：', that.index, cityProjData)
					that.setIntervalMyChart(cityProjData)
				}, 50)
				// 鼠标划入
				this.mouseEvents();
			})

		},
		// 鼠标划入
		mouseEvents() {
			this.mapChart.on("mouseover", (params) => {
				// 停止定时器，清除之前的高亮
				clearInterval(this.timer);
				this.dispatchActionChart(this.mapChart, "downplay", this.index);
			});

			// 鼠标划出重新定时器开始
			this.mapChart.on("mouseout", (params) => {
				clearInterval(this.timer);
				// 启动轮播
				this.setIntervalMyChart(this.mapData);
			});
		},
		// 设置轮播
		setIntervalMyChart(data) {
			const dataLength = data.length;
			// 每隔 interval 进行一次切换
			this.timer = setInterval(() => {
				// 清除高亮跟提示
				this.dispatchActionChart(this.mapChart, "downplay", this.index);
				this.dispatchActionChart(this.mapChart, "hideTip", this.index);
				// 索引增加
				this.index++;
				// 激活高亮跟提示
				this.dispatchActionChart(this.mapChart, "highlight", this.index);
				this.dispatchActionChart(this.mapChart, "showTip", this.index);
				if (this.index === dataLength - 1) {
					// 需要对最后一个进行清除，对第一个进行激活
					let tempTimer = setTimeout(() => {
						this.dispatchActionChart(this.mapChart, "downplay", dataLength - 1);
						this.dispatchActionChart(this.mapChart, "highlight", this.index);
						clearTimeout(tempTimer);
					}, this.interval);
					this.index = -1;//this.index = -1;
				}
			}, this.interval);
		},
		/**
		 * @description 控制高亮跟提示
		 * @param {String} type （highlight：高亮（反：downplay）；showTip：显示提示（反：hideTip））
		 * @param {Number} dataIndex 数据项的 index
		 * */
		dispatchActionChart(mapChart, type, dataIndex) {
			this.mapChart.dispatchAction({
				type: type,
				seriesIndex: 0,
				dataIndex: dataIndex,
			});
		},
		// resize 事件
		handleResize() {
			this.mapChart.resize();
		},

	},

}
</script>

<style lang="less" scoped>
#mapChart {
	width: 100%;
	height: 100%;
	flex: 1;
}

.mapPopWin {
	position: absolute;
	left: 0;
	top: 0;
	padding: 15px;
	// background: url("@/assets/activeIcon.png") no-repeat;
	// background-size: 100% 100%;
	border: 1px solid rgba(0, 244, 251, 0.3);
	box-shadow: 1px 1px 15px rgba(0, 244, 251, 0.51) inset;
	background: rgba(6, 54, 125, 0.6);
	width: 240px;
	// height: 141PX;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-direction: column;
	align-content: flex-start;
	z-index: 10000;
	border-radius: 4px;
	text-align: center;

	.close {
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		width: 20px;
		height: 20px;
	}

	h3 {
		width: 100%;
		font-size: 22px;
		font-family: PangMenZhengDao;
		font-weight: 400;
		color: #fefefe;
		height: 36px;
		line-height: 36px;
		background: linear-gradient(90deg,
		rgba(100, 224, 255, 0) 0%,
		rgba(92, 242, 255, 0.36) 34%,
		rgba(92, 242, 255, 0.36) 70%,
		rgba(97, 246, 255, 0) 100%);
	}

	.info2 {
		width: 100%;
		font-size: 14px;
		font-family: PingFang;
		font-weight: 500;
		color: #ffffff;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 8px;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: column;
		align-content: flex-start;

		p {
			margin: 0px;
			padding: 4px;
			background: linear-gradient(90deg,
			rgba(100, 224, 255, 0.1) 0%,
			rgba(92, 242, 255, 0.2) 34%,
			rgba(92, 242, 255, 0.2) 70%,
			rgba(97, 246, 255, 0.1) 100%);
		}
	}
}
</style>
