Echarts 在vue3x中使用（包括动态数据变化）

网上的复制粘贴太多，大佬也太多，写个东西反正就是我自己记录的，你看不看得懂没关系

我真的吐了，自己记录请不要公开

我是永远的萌新，各种这样不会那也不会，看那种一半的作业看的真血压高

<template>
	<div class="my-chart-page-box">
		<div class="char-box" :id='chartName'></div>
	</div>
</template>

<script>
	// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
	import * as echarts from 'echarts/core';
	// 引入柱状图图表，图表后缀都为 Chart
	import {
		//这个是折线图
		LineChart
	} from 'echarts/charts';
	// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
	import {
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		LegendComponent,
		TransformComponent,
		DataZoomComponent
	} from 'echarts/components';
	// 标签自动布局，全局过渡动画等特性
	import {
		LabelLayout,
		UniversalTransition
	} from 'echarts/features';
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
	import {
		CanvasRenderer
	} from 'echarts/renderers';

	// 注册必须的组件
	echarts.use([
		TitleComponent,
		TooltipComponent,
		GridComponent,
		DatasetComponent,
		LegendComponent,
		TransformComponent,
		LineChart,
		LabelLayout,
		UniversalTransition,
		CanvasRenderer,
		DataZoomComponent
	]);

	import {
		reactive,
		toRefs,
		onMounted,
		onUnmounted,
		watch
	} from "vue";

	export default {
		name: 'chart',
		props: {
			chartName: String,
			chartData: Object,
		},
		setup(props) {
			const dataMap = reactive({
				chartName: props.chartName,
				chartData: props.chartData,
				option: {},
			})

			// 基础数据
			const chartPrepare = () => {
				console.log(dataMap.chartData);
				//图表的id父级传过来 防止一个页面多个图不绘制，还能防止vue3.x 还有打包之后初始化不绘制的问题  原理我也不知道  有大佬告知一下最好  
				dataMap.myChart = echarts.init(document.getElementById(dataMap.chartName));

				// 绘制图表需要的数据
				dataMap.option = {
					xAxis: {
						type: 'category',
						boundaryGap: false,
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: dataMap.chartData,
						type: 'line'
					}]
				}
			}
			// 绘制图表
			const chartOpen = () => {
				// 这个true可以看官方文档 
				dataMap.myChart.setOption(dataMap.option, true);

				// window.onresize = function() { // 自适应大小
				// 这个自适应大小我反正疯狂报错,应该是resize() 是一个需要配置的还是什么的玩意 搞不明白暂时不用了
				// 	dataMap.myChart.resize();
				// };
			}

			onMounted(() => {
				// 基础数据
				chartPrepare()
				// 绘制图表
				chartOpen()
			});

			watch(() => props.chartData,
				(count, prevCount) => {
					// 监听数据变了  就重新绘制一遍  也就是大佬们说的  "切记，数据变化后需要再次调init方法刷线图表"
					// 绘制图表
					chartOpen()
					console.log(count, prevCount);
				}, {
					deep: true
				}
			)

			onUnmounted(() => {
				//销毁
				echarts.dispose(dataMap.myChart);
				dataMap.myChart = null;
			})

			return {
				...toRefs(dataMap),
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-chart-page-box {
		width: 100%;
		height: 100%;

		>.char-box {
			width: 100%;
			height: 100%;
		}
	}
</style>

我写的不敢保证全部小白看懂，但是我会尽量让更多的人看懂，而不是我就自己记录一下，你爱看得懂就看，看不懂就拉倒

我最烦的一句话就是，你复制就好

先不说授人与鱼不如授人与渔，复制能用的都少之极少