PowerAnalysis_blue/src/views/curveDeviation/rateAnalysis/components/chart.vue

<script setup>
import util from "@tools/util";
import chartTheme from './../chartTheme.json'
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
	},
	isRadar: {  //是否显示雷达图
		type: Boolean,
		required: false,
		default: false
	}
})

/**定义option */
const option = computed({
	get() {
		return {
			title: {
				text: props.title || '',
				subtext: props.subtext || '',
				top: 10,
				left: 30,
			},
			angleAxis: props.xAxis || {},
			radiusAxis: {},
			radar: props.isRadar?  [  //雷达图设定区域
				{
					indicator: props.xAxis.data || [],
					center: ['60%','50%'],
					radius: '70%',
					splitLine: {
						show: false,
					},
					splitArea: {
						show: false
					}
				},
			]: {},
			polar: {
				radius: '70%',
				center: ['60%','50%']
			},
			tooltip: {
				formatter: (params) => {
					return params.componentSubType==='radar'? `${params.name}` : `${params.seriesName}m<br/>${params.value>1? '频次：'+ params.value: ''}`
				},
				confine: true
			},
			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) {
		const echartIns = toRaw(chartIns.value)
		echartIns.setOption(newVal.value)
	}
}, { deep: true })

onMounted(() => {
	echarts.registerTheme('chartTheme', chartTheme)
	const echartIns =	echarts.init(document.getElementById(chartId),'chartTheme') 
	chartIns.value = echartIns
	echartIns.setOption(option.value)
	window.addEventListener('resize', () => {
		echartIns.resize()
	})
})
</script>
<template>
	<div :id="chartId" :style="{ height: props.height, width: props.width }"></div>
</template>