<!-- 地图 -->
<template>
	<div
		id="myCharts"
		:style="{ width: '100%', height: '100%' }"
		:mapData="mapData"
	></div>
	<!-- <div id="myCharts" :style="{ width: '100%', height: '100%' }"></div> -->
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/dark"); // echarts theme
import resize from "../echart/mixins/resize";
var mapJson = require("../../../assets/json/changxing.json");
echarts.registerMap("area", mapJson);
//虚拟数据
// var outdata = []; //地图区域挂载数据
// var maxData = parseInt(mapData[0].value); //热力最大值
// var minData = parseInt(mapData[0].value); //热力最小值
// mapData.forEach(function (item, index) {
//   var num = parseInt(item.value);
//   num >= maxData && (maxData = num);
//   num <= minData && (minData = num);
//   console.log(maxData,minData);
//   console.log(item);
//   // outdata.push({
//   //   name: item.name,
//   //   value: item.value[2],
//   //   index: index,
//   // });
//   console.log(outdata);
// });
export default {
	props: {
		mapData: {
			type: Array,
			default: () => [
				// {
				//   value: [119.65187548916717, 31.13976205648452, '长兴合作社', '1200平方', '浙江省长兴县画溪街道', '开发', '17705145963'],
				// },
				// {
				//   value: [119.72370048880646,31.00829465740821, '长兴合作社222', '1200平方', '浙江省长兴县画溪街道', '开发', '17705145963'],
				// },
			],
		},
	},
	watch: {
		mapData: {
			handler(newV, oldV) {
				if (newV) {
					this.mapData = newV;
					this.initChart();
				} else {
					this.mapData = newV;
					this.initChart();
				}
			},
			deep: true,
		},
	},
	mixins: [resize],
	data() {
		return {};
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart();
		});
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, "dark");
			this.chart.setOption({
				backgroundColor: "rgba(128, 128, 128, 0)", //rgba设置透明度0.1
				// 地图各区块提示框
				tooltip: {
					padding: 0,
					borderColor: "",
					show: true,
					alwaysShowContent: true,
					formatter: function (params) {
						var str = `<div style = "background:url( ${require("../../../assets/img/tooltip.png")});background-size:100% 100%;width:260px";><div style="padding:20px;font-size:18px">主体名称：${
							params.value[2]
						}<br>种植面积：${params.value[3]}<br>地址：${
							params.value[4]
						}<br>联系人：${params.value[5]}<br>电话：${
							params.value[6]
						}</div></div>`;
						return str;
					},
				},
				// 地图背景
				grid: {
					left: "0%",
					right: "0%",
					top: "0%",
					bottom: "0%",
					show: true,
					borderColor: "rgba(0,0,0,0)",
					backgroundColor: "rgb(2, 17, 39,0)",
				},
				// 地图的阴影底图
				geo: {
					map: "area",
					left: 0,
					right: 0,
					bottom: 0,
					top: 0,
					aspectScale: 0.9,
					layoutCenter: ["50%", "52.5%"], //地图位置
					layoutSize: "100%",
					itemStyle: {
						normal: {
							shadowColor: "rgba(0,228,242,0.5)",
							shadowBlur: 5,
							color: "#082A52",
						},
						emphasis: {
							areaColor: "#082A52",
						},
					},
					z: 2,
				},
				series: [
					// {
					// 	type: "scatter",
					// 	coordinateSystem: "geo",
					// 	data: [
					// 		{
					// 			symbol:
					// 				"image://https://zhenongfu.oss-cn-hangzhou.aliyuncs.com/bigdata/production/%E5%86%9C%E8%B5%84%E5%BA%97.png",
					// 			symbolSize: [24, 24],
					// 			value: [119.922334, 30.863209],
					// 			name: "长兴许长蔬菜专业合作社",
					// 			datas: { address: "浙江省湖州市长兴县和平镇长城村" },
					// 		},
					// 	],
					// },
					{
						type: "map",
						map: "area",
						silent: true, //禁用地图的hover事件
						aspectScale: 0.9,
						layoutCenter: ["50%", "50%"], //地图位置
						layoutSize: "100%", //地图大小
						label: {
							normal: {
								show: true,
								fontFamily: "SourceHanSansCN",
								fontSize: "20",
								color: "#FFFFFF",
								fontWeight: "bold",
							},
							emphasis: {
								show: true,
								fontFamily: "SourceHanSansCN",
								fontSize: "20",
								color: "#FFFFFF",
							},
						},
						// tooltip:{} tooltip可结合formatter、div、css实现样式
						itemStyle: {
							normal: {
								borderColor: "#2CD7FF",
								borderWidth: 0.8,
								areaColor: {
									type: "linear-gradient",
									x: 0,
									y: 300,
									x2: 0,
									y2: 0,
									colorStops: [
										{
											offset: 0,
											color: "#0095FF", // 0% 处的颜色
										},
										{
											offset: 1,
											color: "#0095FF",
										},
									],
									global: true, // 缺省为 false
								},
							},
							emphasis: {
								shadowColor: "rgba(0, 0, 0, 1)",
								shadowBlur: 10,
								shadowOffsetX: 5,
								shadowOffsetY: 5,
								areaColor: {
									type: "linear-gradient",
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: "#F5B615", // 0% 处的颜色
										},
										{
											offset: 1,
											color: "#E27B0d",
										},
									],
								},
							},
						},
						zlevel: 1,
						data: "",
					},
					//散点
					{
						type: "effectScatter",
						coordinateSystem: "geo",
						label: {
							show: true,
							formatter: function (params) {
								return params.value[2];
							},
							position: "bottom",
							color: "#fff",
						},
						rippleEffect: {
							brushType: "stroke",
						},
						showEffectOn: "render",
						itemStyle: {
							normal: {
								color: {
									type: "radial",
									x: 0.5,
									y: 0.5,
									r: 0.5,
									colorStops: [
										{
											offset: 0,
											color: "rgb(252,196,1)",
										},
										{
											offset: 0.8,
											color: "rgb(252,196,1)",
										},
										{
											offset: 1,
											color: "rgb(252,196,1)",
										},
									],
									global: false, // 缺省为 false
								},
							},
						},
						// label: {
						//     normal: {
						//         show: true,
						//         color: '#fff',
						//         fontWeight: 'bold',
						//         position: [-20, -18],
						//         formatter: function (para) {
						//             //return '{cnNum|' + para.data.value[2] + '}'
						//             return '{cnNum|' + para.name + '}';
						//             //return ''
						//         },
						//         rich: {
						//             cnNum: {
						//                 fontSize: 13,
						//                 color: '#D4EEFF',
						//             },
						//         },
						//     },
						// },
						symbol: "circle",
						symbolSize: function (val) {
							// return (val[2] / maxData) * 4;
							return 10;
						},
						data: this.mapData,
						zlevel: 1,
					},
				],
			});
		},
	},
};
</script>

<style scoped></style>
