AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-06-30 15:15:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(echarts): Resolve chart flickering and animation loop in Markdown (#20161)

Browse Source
This commit is contained in:
sayThQ199 2025-05-25 18:05:41 +08:00 committed by GitHub
parent 9b1dc1de7a
commit cbfc32b11f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/app/components/base/markdown.tsx
View File

@ -134,6 +134,24 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
const languageShowName = getCorrectCapitalizationLanguageName(language || '')
const isDarkMode = theme === Theme.dark
const echartsStyle = useMemo(() => ({
height: '350px',
width: '100%',
}), [])
const echartsOpts = useMemo(() => ({
renderer: 'canvas',
width: 'auto',
}) as any, [])
const echartsOnEvents = useMemo(() => ({
finished: () => {
const instance = echartsRef.current?.getEchartsInstance?.()
if (instance)
instance.resize()
},
}), [echartsRef]) // echartsRef is stable, so this effectively runs once.
// Handle container resize for echarts
useEffect(() => {
if (language !== 'echarts' || !echartsRef.current) return
@ -329,24 +347,11 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
<ReactEcharts
ref={echartsRef}
option={finalChartOption}
style={{
height: '350px',
width: '100%',
}}
style={echartsStyle}
theme={isDarkMode ? 'dark' : undefined}
opts={{
renderer: 'canvas',
width: 'auto',
}}
opts={echartsOpts}
notMerge={true}
onEvents={{
// Force resize when chart is finished rendering
finished: () => {
const instance = echartsRef.current?.getEchartsInstance?.()
if (instance)
instance.resize()
},
}}
onEvents={echartsOnEvents}
/>
</ErrorBoundary>
</div>
@ -374,15 +379,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
<ReactEcharts
ref={echartsRef}
option={errorOption}
style={{
height: '350px',
width: '100%',
}}
style={echartsStyle}
theme={isDarkMode ? 'dark' : undefined}
opts={{
renderer: 'canvas',
width: 'auto',
}}
opts={echartsOpts}
notMerge={true}
/>
</ErrorBoundary>
@ -423,7 +422,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
</SyntaxHighlighter>
)
}
}, [children, language, isSVG, finalChartOption, props, theme, match])
}, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents])
if (inline || !match)
return <code {...props} className={className}>{children}</code>