封装雷达图组件myRadarChart

 

<template>
	<view>
		<view style="height: 500rpx;">
			<l-echart ref="chart" @finished="init"></l-echart>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	export default {
		props: {
			chartData: {
				type: Array,
				default: () => [],
			
            },
		},
		data() {
			return {
				option: {
					radar: {
						radius: ["0%", "50%"],
						indicator: [],
						splitArea: {
							show: false,
						},
						splitLine: {
							// show: false,
							lineStyle: {
								color: "#E9E9E9",
								width: 1,
							},
						},
						axisLine: {
							lineStyle: {
								color: "#E9E9E9",
								width: 1,
							},
						},
						axisLabel: {
							show: true,
						},
						name: {
							formatter: function(value, indicator) {
								let score = indicator.score;
								return "{a|" + value + "}{b|\n" + score + "分}";
							},
							rich: {
								a: {
									color: "#303133",
									fontSize: 12,
									fontWeight: 500,
									align: "center",
								},
								b: {
									lineHeight: 25,
									fontSize: 12,
									fontWeight: 500,
									color: "#34BEEA",
									align: "center",
								},
							},
						},
					},
					series: [{
						name: "",
						type: "radar",
						data: [{
							value: [1, 2, 3, 4, 5],
							name: "",
						}, ],
						itemStyle: {
							color: "#34BEEA",
						},
						areaStyle: {
							color: "rgba(52, 190, 234, 0.16)",
						},
						// label: {
						//   show: true,
						// },
					}, ]
				}
			}
		},
		mounted() {},
        watch: {
                chartData: {
                        handler(newValue, oldValue) {
                        this.init()
                },
                deep: true,
            },
        },
		methods: {
			async init() {
                // console.log(this.chartData,'111');
				const chart = await this.$refs.chart.init(echarts);
				// chart.setOption(this.option)

				let seriesData = [],
					indicator = [];
				if (this.chartData) {
					seriesData = this.chartData.map((v) => {
						return v.loScore;
					});
					indicator = this.chartData.map((v, index) => {
						if (index == 0) {
							return {
								name: v.loName,
								max: v.maxScore,
								score: v.loScore,
							};
						}
						return {
							name: v.loName,
							max: v.maxScore,
							score: v.loScore,
							axisLabel: {
								show: false,
							},
						};
					});
				}

				this.option.radar.indicator = indicator;
				this.option.series[0].data[0].value = seriesData;
				chart.setOption(this.option)
			},
		}
	}
</script>

传值 传chartData数组