vue3 ts vite项目使用echarts打包后图表不显示

前言：

        项目还是那个项目，就是在项目中使用echarts的时候，在项目中正常显示，但是打包之后放在服务器上之后，图表初次加载没问题，但是第二次加载一片空白！！！

推测：

        1、图表盛放的容器没了或是渲染图表之前，图表id为获取到，

        2、渲染问题

一番排查之后，使用重复的id进行渲染，是有可能导致图表二次渲染失败的。

为了避免这个问题，要么使用大量不重复id，要么销毁实例，再次渲染的时候重新创建

对比之后，第一种方法会产生大量闲置id，果断使用第二种

代码如下，dispose为销毁实例方法

const myLintChart = ref()
// 图表
const linetypeChart = (datax: string[], datay: any[]) => {
	if (myLintChart.value !== undefined) {
		myLintChart.value.dispose()
	}
	// 基于准备好的dom，初始化echarts实例
	myLintChart.value = echarts.init(
		document.getElementById('chartId') as HTMLElement
	)
	// 绘制图表
	const option = {
		title: {
			text: '折线图'
		},
		tooltip: { trigger: 'axis' },
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: datax
		},
		yAxis: {
			type: 'value'
		},
		series: datay
	}
	myLintChart.value.setOption(option)
}

测试

测试之后，再次打包，打包之后的图表正常显示！