npm install echarts --save

"echarts": "^5.4.2",

import * as echarts from "echarts";

<template>
	<div class="wrap">
	</div>
</template>


<style lang="scss" scoped>
.wrap {
	width: 800px;
	height: 600px;
	overflow: hidden;
}
</style>

<template>
	<div :id="id" :class="className" ref="chartRef" :style="{ width, height }" />
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, defineProps, watch, onMounted, onUnmounted } from 'vue';
const myChart = ref();
const timerTooltip = ref();
const resizeEle = ref();
const drawTiming = ref();
const chartRef = ref();

const props = defineProps({
	options: {
		type: Object,
		default: () => ({}),
		required: true,
	},
	trendsTooltip: {
		type: Boolean,
		default: false,
	},
	id: {
		type: String,
		default: 'chart',
		required: true,
	},
	className: {
		type: String,
		default: 'chart',
	},
	width: {
		type: String,
		default: '100%',
	},
	height: {
		type: String,
		default: '300px',
	},
});

const resize = () => {
	clearTimeout(drawTiming.value);
	drawTiming.value = setTimeout(() => {
		let { clientWidth: width, clientHeight: height } = chartRef.value.parentElement;
		myChart.value.resize({ width, height });
	}, 200);
};

const initChart = () => {
	// 初始化echart
	myChart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));

	// 设置true清空echart缓存
	myChart.value.setOption(props.options, true);
};

// 页面挂载，开始绘制图表
onMounted(() => {
	nextTick(() => {
		initChart();
		resizeEle.value = new ResizeObserver((entries) => {
			for (let entry of entries) {
				const { width, height } = entry.contentRect;
				myChart.value.resize({ width, height });
			}
		});

		// 传入需要监听的DOM元素
		resizeEle.value.observe(chartRef.value);
		window.addEventListener('resize', resize);
	});
});

// 页面卸载，销毁事件和实例
onUnmounted(() => {
	// 取消对所有节点的监听
	resizeEle.value.disconnect(chartRef.value);
	window.removeEventListener('resize', resize);

	myChart.value.dispose();
	myChart.value = null;
	clearTimeout(drawTiming.value);
	drawTiming.value = null;
});

// 监听图表数据时候变化，重新渲染图表
watch(
	() => props.options,
	() => {
		nextTick(() => {
			initChart();
		});
		// }
	},
	{ deep: true }
);
</script>

<template>
	<Echarts :options="options" :trendsTooltip="trendsTooltip" :id="'chart' + Math.random()" width="100%" height="100%" />
</template>

<script setup lang="ts">
import Echarts from './ECharts.vue';
import { ref, defineProps, watch } from 'vue';

const options = ref();

const props = defineProps({
	cdata: {
		type: Array,
		default: () => [],
	},
	trendsTooltip: {
		type: Boolean,
		default: false,
	},
	width: {
		type: String,
		default: '100%',
	},
	height: {
		type: String,
		default: '300px',
	},
});

watch(
	() => props.cdata,
	(newVal, oldValue) => {
		if (newVal.length === 0) return;
		options.value = {
			tooltip: {
				trigger: 'item',
				confine: true,
			},
			grid: {
				top: 10,
				bottom: 10,
				left: 10,
				right: 10,
				containLabel: true,
			},
			legend: false,
			series: [
				{
					type: 'pie',
					radius: '50%',
					data: newVal,
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
			],
		};
	},
	{ deep: true, immediate: true }
);
</script>

<template>
	<div class="wrap">
        <Example
			id="leftMiddleChart"
			:cdata="[
			{ value: 1048, name: '未开工' },
			{ value: 735, name: '进行中' },
			{ value: 580, name: '已完工' },
			]"
			:trendsTooltip="true"
		/>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// 引入组件
const Example= defineAsyncComponent(() => import('./Example.vue'));

</script>

<style lang="scss" scoped>
.wrap {
	width: 800px;
	height: 600px;
	overflow: hidden;
}
</style>