itachi0713的博客

原创 vue解决ai流式输出echarts图表、图片闪烁问题

本文提出了一种在Vue生态下实现AI流式输出ECharts图表的解决方案，旨在解决使用v-html渲染Markdown时因内容变化导致图片、表格等重复渲染而出现的闪烁问题。通过抛弃v-html，改为手动增加DOM节点，并结合marked库将Markdown转换为HTML，实现了增量渲染。具体实现逻辑包括：将新内容转换为HTML并与旧内容比对，从第一个不同节点开始更新，避免重复渲染。此外，文章还介绍了如何通过marked库生成ECharts图表的唯一ID，并在渲染时动态初始化ECharts实例，确保图表的正确