pull/21185/head
xuzijie1995 11 months ago
parent 9f797b889a
commit 740ecc2adf

@ -89,7 +89,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
const match = /language-(\w+)/.exec(className || '') const match = /language-(\w+)/.exec(className || '')
const language = match?.[1] const language = match?.[1]
const languageShowName = getCorrectCapitalizationLanguageName(language || '') const languageShowName = getCorrectCapitalizationLanguageName(language || '')
const isDarkMode = theme === Theme.light ? false : true const isDarkMode = theme === Theme.dark
const echartsStyle = useMemo(() => ({ const echartsStyle = useMemo(() => ({
height: '350px', height: '350px',
@ -103,21 +103,19 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
// Debounce resize operations // Debounce resize operations
const debouncedResize = useCallback(() => { const debouncedResize = useCallback(() => {
if (resizeTimerRef.current) { if (resizeTimerRef.current)
clearTimeout(resizeTimerRef.current); clearTimeout(resizeTimerRef.current)
}
resizeTimerRef.current = setTimeout(() => { resizeTimerRef.current = setTimeout(() => {
if (chartInstanceRef.current) { if (chartInstanceRef.current)
chartInstanceRef.current.resize(); chartInstanceRef.current.resize()
} resizeTimerRef.current = null
resizeTimerRef.current = null; }, 200)
}, 200); }, [])
}, []);
// Handle ECharts instance initialization // Handle ECharts instance initialization
const handleChartReady = useCallback((instance: any) => { const handleChartReady = useCallback((instance: any) => {
chartInstanceRef.current = instance; chartInstanceRef.current = instance
// Force resize to ensure timeline displays correctly // Force resize to ensure timeline displays correctly
setTimeout(() => { setTimeout(() => {
@ -148,21 +146,19 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
if (language !== 'echarts' || !chartInstanceRef.current) return if (language !== 'echarts' || !chartInstanceRef.current) return
const handleResize = () => { const handleResize = () => {
if (chartInstanceRef.current) { if (chartInstanceRef.current)
// Use debounced resize // Use debounced resize
debouncedResize(); debouncedResize()
}
} }
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
return () => { return () => {
window.removeEventListener('resize', handleResize) window.removeEventListener('resize', handleResize)
if (resizeTimerRef.current) { if (resizeTimerRef.current)
clearTimeout(resizeTimerRef.current); clearTimeout(resizeTimerRef.current)
}
} }
}, [language, debouncedResize]); }, [language, debouncedResize])
// Process chart data when content changes // Process chart data when content changes
useEffect(() => { useEffect(() => {
// Only process echarts content // Only process echarts content

Loading…
Cancel
Save