<template>
	<view style="width:55%; height:60%">
		<l-echart ref="chartRef"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		name: "circular",
		props: {
			apiData: {
				type: Object, // 定义 props 类型
				default: null // 默认值
			}
		},
		data() {
			return {}
		},
		watch: {
			// 监听 message 的变化
			apiData(val) {
				// console.log('父组件传递的值发生变化：', val);
				this.init(val);
			}
		},
		methods: {
			async init(data) {
				var option = {
					xAxis: {
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					yAxis: {
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					series: [
						// 内圆
						{
							type: "pie",
							radius: ["0", "55%"],
							center: ["50%", "50%"],
							z: 4,
							hoverAnimation: false,
							data: [{
								name: "",
								value: 90,
								itemStyle: {
									normal: {
										// borderColor:'#28B4FF',
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
												offset: 0,
												color: "rgba(0,0,0,0.1)",
											},
											{
												offset: 0.5,
												color: "rgba(0,0,0,0.1)",
											},
											{
												offset: 0.65,
												color: "rgba(0,0,0,0.1)",
											},
											{
												offset: 1,
												color: "#28B4FF",
											},
										]),
									},
								},
								label: {
									normal: {
										rich: {
											a: {
												color: "#994D01",
												align: "center",
												fontSize: 30,
												padding: [0, 0, 56, 0],
												fontWeight: "bold",
											},
											b: {
												color: "#AF6E2F",
												align: "center",
												fontSize: 16,
												fontWeight: "bold",
											},
										},
										// formatter: function(params) {
										// 	return (
										// 		"{a|" + params.value + "}\n\n" + "{b|" +
										// 		"全部领取" + "}"
										// 	);
										// },
										position: "center",
										show: true,
									},
								},
								labelLine: {
									show: false,
								},
							}, ],
						},
						//进度图
						{
							type: "gauge",
							radius: 70,
							detail: {
								formatter: "{value}分",
								show: true,
								offsetCenter: [0, 0],
								fontSize: 25,
								color:'rgb(49, 190, 255)',
							},
							data: [{
								value: data.score,
							}],
							axisLine: {
								show: true,
								lineStyle: {
									width: 20,
									color: [
										[1, 'rgb(12,54,77)']
									]
								}
							},
							progress: {
								show: true,
								width: 20,
								itemStyle: {
									color: {
										// type: 'linear',
										colorStops: [{
												offset: 0,
												color: '#28B4FF' // 0% 处的颜色
											},
											{
												offset: 1,
												color: '#55ffff' // 100% 处的颜色
											}
										],
										global: false // 缺省为 false
									}
								}
							},
							splitLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								show: false
							},
							pointer: {
								show: false
							}
						},
					],
				};
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(option)
				// 监听窗口大小改变事件，并调用resize方法
				window.onresize = function() {
					myChart.resize();
				};
			}
		}
	}
</script>

<style lang="less">

</style>