PowerAnalysis/src/pages/dataAnalysis/rateAnalysis/components/scatterSingleChart.vue

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

/**定义option */
const option = computed({
	get() {
		return {
			tooltip: {
				position: 'top',
				formatter: function (params) {
					return (
						params.value[2] +
						' commits in ' +
						params.value[0] +
						' of ' +
						params.value[1]
					);
				}
			},
			title: {
				text: props.title || '',
				subtext: props.subtext || '',
				top: 6,
				left: '5%',
			},
			grid: {
				top: 40,
				left: 2,
				bottom: 10,
				right: 20,
				containLabel: true
			},
			xAxis: props.xAxis || [],
			//  {
			// 	type: 'category',
			// 	data: props.xAxis || [],
			// 	boundaryGap: false,
			// 	splitLine: {
			// 		show: true
			// 	},
			// 	axisLine: {
			// 		show: false
			// 	}
			// },
			yAxis: props.yAxis || [],
			// {
			// 	type: 'category',
			// 	data: props.yAxis,
			// 	axisLine: {
			// 		show: false
			// 	}
			// },
			series: props.series || [] 
			// [
			// 	{
			// 		name: 'Punch Card',
			// 		type: 'scatter',
			// 		symbolSize: function (val) {
			// 			return val[2] * 2;
			// 		},
			// 		data: props.data,
			// 		animationDelay: function (idx) {
			// 			return idx * 5;
			// 		}
			// 	}
			// ]
		}
	},
	set(val) { }
})
watch(() => option, (newVal, oldVal) => {
	if (chartIns.value) {
		console.log(newVal)
		const echartIns = toRaw(chartIns.value)
		echartIns.setOption(toRaw(newVal.value))
	}
}, { deep: true })

onMounted(() => {
	nextTick(() => {
		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>