<template>
	<view style="width:100%; height:450rpx">
		<l-echart ref="chartRef"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		name: "radar",
		props: {
			apiData: {
				type: Object, // 定义 props 类型
				default: null // 默认值
			}
		},
		data() {
			return {

			};
		},
		watch: {
			// 监听 message 的变化
			apiData(newVal, oldVal) {
				// console.log('父组件传递的值发生变化：', newVal);
				this.init(newVal);
			},
			deep: true
		},
		methods: {
			async init(data) {
				var color = "#189cbb";
				var scale = 1;
				var weekData = [{
						text: `电池健康度`,
						max: 100
					},
					{
						text: `BMS精度`,
						max: 100
					},
					{
						text: `异常告警`,
						max: 100
					},
					{
						text: `温度一致性`,
						max: 100
					},
					{
						text: `电压一致性`,
						max: 100
					},
					{
						text: `SOC一致性`,
						max: 100
					},
				];
				var student = [data.score, data.bmsCurrentAccuracy, data.alarmNumber, data.tempMax, data
					.voltConsistency, data.socAccuracy
				];
				let option = {
					// tooltip: {
					// 	trigger: "axis",
					// 	position: [20, -25]
					// },
					radar: [{
						indicator: weekData,
						center: ["50%", "45%"],
						radius: "54%",
						name: {
							textStyle: {
								color: 'rgba(255, 255, 255, 1)',
								fontSize: 17 * scale,
								fontWeight: "bold",
							},
						},
						splitLine: {
							lineStyle: {
								color: "rgb(40,180,255)",
								opacity: 0.5,
								width: 2 * scale,
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: "rgba(60, 253, 255, 0.6)",
								opacity: 0.2,
							},
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgb(40,180,255)',
								type: "dashed",
							},
						},
					}, ],
					series: [{
						type: "radar",
						tooltip: {
							trigger: "item",
						},
						data: [{
							value: student,
							name: "电池分项得分",
						}, ],
						label: {
							show: true,
							fontSize: 13,
							formatter: '{a|{c}}', // 使用 rich 格式化文本
							position:[0,10],
							rich: {
								a: {
									fontSize: 15,
									fontWeight: 'bold',
									color: 'rgba(60, 253, 255, 1)',
									padding: [2, 5], // 内边距
									borderRadius: 5, // 圆角
									borderColor: 'rgba(60, 253, 255, 1)', // 边框颜色
									borderWidth: 1 // 边框宽度
								}
							}
						},
						symbolSize: 10 * scale,
						itemStyle: {
							normal: {
								color: '#fff',
								borderColor: "rgba(40, 180, 255, 0.6)",
								borderWidth: 2 * scale,
							},
						},
						lineStyle: {
							normal: {
								color: "rgba(60, 253, 255, 0.6)",
								width: 2 * scale,
							},
						},
						areaStyle: {
							normal: {
								color: "rgb(40, 180, 255)",
								opacity: 0.5,
							},
						},
					}, ],
				}
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(option)
				// 监听窗口大小改变事件，并调用resize方法
				window.onresize = function() {
					myChart.resize();
				};
			}
		}
	}
</script>

<style lang="less">

</style>