<!--地圖-->
<div ref="chartRef" class="chart"/>

<script setup>
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import nanhaiJson from '@/assets/map/nanhai.json'

//地圖json數據： https://datav.aliyun.com/portal/school/atlas/area_selector
const chartRef = ref()
const formRef = ref()
let myChart = null;
const stationData = ref([])

//加載數據
onMounted(() => {
	//加載南海地圖
	echarts.registerMap('nanhai', nanhaiJson)
	loadData()
})


const loadData = () => {
	xxApi.xxPage().then((data) => {
		if (data && data.total > 0) {
			stationData.value = []
//拼接地圖上需要標注的點			
data.records.forEach((item) => {
				stationData.value.push(
					{
						name: item.name,
						value: [item.longitude, item.latitude]
					}
				)
			})
		}
		loadChart()
	})

}

//加載圖表
const loadChart = () => {
	// 如果實例已經存在，則先銷毀再重新創(chuàng)建
	if (myChart != null && myChart.dispose) {
		myChart.dispose();
	}
	myChart = echarts.init(chartRef.value)
	myChart.showLoading({text: 'loading'})

	let option = {
		geo: {
			map: 'nanhai',
			zoom: 1.2,//縮放比例
			roam: true, // 是否允許縮放和平移
			itemStyle: {
				areaColor: 'lightskyblue',
				borderColor: '#404a59'
			},
			label: {
				show: true
			},
		},
		//氣象站點列表
		series: [{
			type: 'scatter',
			coordinateSystem: 'geo',
			data: stationData.value,
			symbolSize: 10,
			label: {
				show: true,
				formatter: function (params) {
					return params.name; // 顯示點的name
				},
				position: 'top', // 或其他位置
				color: '#FF4500' // 設置標簽字體顏色為紅色
			},
			itemStyle: {
				normal: {
					color: '#FFA500' // 設置為橘黃色
				}
			},
		}]
	}

	myChart.hideLoading()
	myChart.setOption(option)
	// 自適應屏幕
	window.addEventListener('resize', function () {
		myChart.resize()
	})
}

</script>

<style scoped>
.chart {
	height: 550px;
}

.detail-chart {
	height: 100%;
	overflow: auto;
}

</style>