From 3c9d1879e059d33a785c02b10f4d57fd2024b8d3 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 28 四月 2025 15:57:36 +0800
Subject: [PATCH] 渲染echarts图优化
---
src/app/globals.css | 25 ++++++++++++
src/app/chat/page.tsx | 64 +++++++++++++++++++++++++-------
2 files changed, 75 insertions(+), 14 deletions(-)
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index 7c8d06c..7f6ac0c 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -50,17 +50,18 @@
const hasRenderedRef = useRef<boolean>(false);
const chartInstanceRef = useRef<any>(null);
- // 鍒濆鍖朌OM瀹瑰櫒
+ // 鍒濆鍖朌OM瀹瑰櫒 - 鎻愬墠璁剧疆鍥哄畾楂樺害
useEffect(() => {
- // 纭繚瀹瑰櫒鍑嗗濂戒簡
+ // 纭繚瀹瑰櫒鍑嗗濂戒簡骞朵笖鏈夌‘瀹氱殑楂樺害
if (chartContainerRef.current) {
- // 璁剧疆涓�涓垵濮嬮珮搴﹀拰瀹藉害锛岄伩鍏�"invalid dom"閿欒
+ // 璁剧疆涓�涓浐瀹氱殑楂樺害锛岄伩鍏嶆覆鏌撳悗鍙樺寲
const container = chartContainerRef.current;
container.style.width = '100%';
- container.style.height = '400px';
+ container.style.height = '400px'; // 鍥哄畾楂樺害400px
+ container.style.minHeight = '400px'; // 闃叉楂樺害鍙樺皬
// 娣诲姞涓存椂鍐呭锛岀‘淇滵OM娓叉煋瀹屾垚
- container.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;"><span>姝ｅ湪鍑嗗鍥捐〃...</span></div>';
+ container.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f7f9;"><span>姝ｅ湪鍑嗗鍥捐〃...</span></div>';
}
}, []);
@@ -115,6 +116,18 @@
const chartOption = safeFunc();
if (chartOption) {
+ // 绂佺敤鍔ㄧ敾锛岄伩鍏嶆覆鏌撴椂鐨勫竷灞�鍙樺寲
+ chartOption.animation = false;
+
+ // 淇敼tooltip閰嶇疆锛岀‘淇濇樉绀哄湪閫傚綋浣嶇疆
+ if (chartOption.tooltip) {
+ chartOption.tooltip = {
+ ...chartOption.tooltip,
+ confine: false, // 涓嶉檺鍒跺湪鍥捐〃鍖哄煙鍐�
+ extraCssText: 'z-index:9999; pointer-events:auto; margin-top:60px;',
+ };
+ }
+
chartInstance.setOption(chartOption);
setError(null);
} else {
@@ -184,6 +197,16 @@
// 濡傛灉涓诲浘琛ㄥ凡缁忓垵濮嬪寲锛屽鐢ㄥ叾閰嶇疆
if (chartInstanceRef.current) {
const option = chartInstanceRef.current.getOption();
+
+ // 璋冩暣妯℃�佺獥鍙ｄ腑tooltip鐨勯厤缃�
+ if (option && option.tooltip) {
+ option.tooltip = {
+ ...option.tooltip,
+ confine: false,
+ extraCssText: 'z-index:10000; margin-top: 0; max-width: 80vw;',
+ };
+ }
+
modalChartInstance.setOption(option);
} else {
// 濡傛灉涓诲浘琛ㄦ病鏈夊垵濮嬪寲锛屽皾璇曚粠浠ｇ爜鍒濆鍖�
@@ -204,6 +227,15 @@
const chartOption = safeFunc();
if (chartOption) {
+ // 璋冩暣妯℃�佺獥鍙ｇ殑tooltip閰嶇疆
+ if (chartOption.tooltip) {
+ chartOption.tooltip = {
+ ...chartOption.tooltip,
+ confine: false,
+ extraCssText: 'z-index:10000; max-width: 80vw;',
+ };
+ }
+
modalChartInstance.setOption(chartOption);
} else {
throw new Error("鏃犳硶鑾峰彇妯℃�佸浘琛ㄩ厤缃�");
@@ -258,13 +290,13 @@
</div>
)}
- {/* 鍥捐〃瀹瑰櫒 */}
+ {/* 鍥捐〃瀹瑰櫒 - 鍥哄畾楂樺害 */}
<div
ref={chartContainerRef}
className="w-full bg-white border border-gray-200 rounded-lg overflow-hidden chart-container"
style={{
- height: '300px',
- minHeight: '300px',
+ height: '400px',
+ minHeight: '400px',
visibility: 'visible',
position: 'relative'
}}
@@ -333,22 +365,26 @@
// 妫�鏌ユ秷鎭槸鍚﹀畬鏁� - 閫氳繃鐖剁粍浠朵紶閫掔殑isMessageComplete鐘舵��
const isComplete = useContext(MessageCompletionContext);
- // 鍦ㄦ秷鎭湭瀹屾垚鏃舵樉绀哄姞杞藉姩鐢�
+ // 鍦ㄦ秷鎭湭瀹屾垚鏃舵樉绀哄姞杞藉姩鐢� - 鍥哄畾楂樺害鍖归厤鍥捐〃
if (language === 'javascript' && !isComplete) {
return (
- <div className="w-full bg-gray-50 rounded-md my-4 p-6 text-center">
- <div className="flex flex-col items-center justify-center">
+ <div className="w-full bg-gray-50 rounded-md my-4 p-6 text-center" style={{height: '400px'}}>
+ <div className="flex flex-col items-center justify-center h-full">
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-400 mb-4"></div>
- <p className="text-gray-500">浠ｇ爜鍔犺浇涓�...</p>
+ <p className="text-gray-500">鍔犺浇涓�...</p>
<p className="text-xs text-gray-400 mt-2">绛夊緟娑堟伅瀹屾垚鍚庡皢娓叉煋鍥捐〃</p>
</div>
</div>
);
}
- // 娑堟伅瀹屾垚鍚庯紝濡傛灉鏄浘琛ㄤ唬鐮佸垯娓叉煋涓哄浘琛�
+ // 娑堟伅瀹屾垚鍚庯紝濡傛灉鏄浘琛ㄤ唬鐮佸垯娓叉煋涓哄浘琛� - 鍦ㄥ閮ㄥ寘瑁呬竴灞傚浐瀹氶珮搴﹀鍣�
if (isEchartsCode() && isComplete) {
- return <EchartsRenderer code={value} />;
+ return (
+ <div style={{height: '400px', minHeight: '400px', position: 'relative'}}>
+ <EchartsRenderer code={value} />
+ </div>
+ );
}
// 鏅�欽avaScript浠ｇ爜鎴栧叾浠栬瑷�鐨勪唬鐮佸潡锛岀洿鎺ユ樉绀轰唬鐮�
diff --git a/src/app/globals.css b/src/app/globals.css
index 611ff50..546c47c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -870,3 +870,28 @@
body:has(.echart-wrapper:has(+ .fullscreen-controls)) {
overflow: hidden;
}
+
+/* 褰诲簳鍥哄畾鍥捐〃瀹瑰櫒鐨勯珮搴� */
+[data-echarts-container="true"] {
+ height: 400px !important;
+ min-height: 400px !important;
+ width: 100%;
+ position: relative;
+}
+
+/* 纭繚tooltip鏄剧ず鍦ㄩ�傚綋浣嶇疆 */
+.echarts-tooltip-wrap,
+div[class*="echarts-tooltip"],
+div[class*="tooltip"] {
+ z-index: 9999 !important;
+ top: auto !important; /* 闃叉鍥哄畾鍦ㄩ《閮� */
+ transform: translateY(0) !important; /* 闃叉鍚戜笂鍋忕Щ */
+ max-width: 80vw !important; /* 闄愬埗鏈�澶у搴� */
+ pointer-events: auto !important;
+}
+
+/* 纭繚鐑姏鍥総ooltip鍦ㄩ珮椋庨櫓鍖哄煙鏄剧ず鏃朵笉浼氳瀵艰埅鏍忛伄鎸� */
+body .ec-tooltip,
+body .echarts-tooltip {
+ margin-top: 60px !important; /* 纭繚涓嶄細鏄剧ず鍦ㄥ鑸爮涔嬩笂 */
+}
--
Gitblit v1.9.3