PowerAnalysis/src/pages/curveDeviation/rateAnalysis/components/chart.vue

<script lang="ts" setup>
import util from "@tools/util";
import { ref, toRaw, computed, onMounted, watch } from 'vue';
import * as echarts from 'echarts'
const chartId = 'chart-' + util.newGUID(); //chartId
const chartIns = ref(null)  //chart 实例
const props = defineProps({
	xAxis: {
		type: Object,
		required: true,
		default: () => ({})
	},
	series: {
		type: Array,
		required: true
	},
	height: {
		type: String,
		required: false,
		default: '500px'
	},
	width: {
		type: String,
		required: false,
		default: '500px'
	},
	title: {
		type: String,
		required: false
	},
	subtext: {
		type: String,
		required: false
	}
})

/**定义option */
const option = computed({
	get() {
		return {
			title: {
				text: props.title || '',
				subtext: props.subtext || '',
				textStyle: {
					fontSize: util.vh(16),
					color: "#000",
				},
				top: 10,
				left: 30
			},
			angleAxis: props.xAxis || {},
			radiusAxis: {},
			polar: {
				radius: '70%',
				center: ['60%','50%']
			},
			tooltip: {},
			series: props.series || [],
			legend: {
				show: true,
				orient: 'vertical',
				left: 30,
				itemWidth: 16,
				itemHeight: 10,
				textStyle: {
					fontSize: util.vh(10)
				},
				top: 'middle',
				data: ['0-2.5','2.5-5','5-7.5','7.5-10','10-12.5','12.5-15','15-17.5','17.5-20','20-22.5','22.5-25','25-inf']
			}
		}
	},
	set(val) { }
})
watch(() => option, (newVal, oldVal) => {
	if (chartIns.value) {
		console.log(newVal)
		const echartIns = toRaw(chartIns.value)
		echartIns.setOption(newVal)
	}
}, { deep: true })

onMounted(() => {
	const echartIns =	echarts.init(document.getElementById(chartId)) 
	chartIns.value = echartIns
	console.log(JSON.stringify(option.value))
	echartIns.setOption(option.value)
	console.log(echartIns)
})
</script>
<template>
	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
</template>