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

您所在的位置：网站首页 › vue中使用echars › vue3+ts+vite项目使用echarts打包后图表不显示

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

#vue3+ts+vite项目使用echarts打包后图表不显示| 来源: 网络整理| 查看: 265

前言：

项目还是那个项目，就是在项目中使用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) } 测试

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

【本文地址】

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

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

今日新闻

推荐新闻