From bd419a22f4ca2906f337c89a404905f74eb3ed7b Mon Sep 17 00:00:00 2001 From: archer <545436317@qq.com> Date: Mon, 4 Sep 2023 19:25:28 +0800 Subject: [PATCH] adapt echarts --- client/pnpm-lock.yaml | 22 ++++++ client/src/components/ChatBox/index.tsx | 2 +- .../Markdown/img/EChartsCodeBlock.tsx | 68 +++++++++++++++---- .../Markdown/img/EChartsRenderer.tsx | 35 ---------- client/src/types/echarts-gl.d.ts | 4 -- 5 files changed, 76 insertions(+), 55 deletions(-) delete mode 100644 client/src/components/Markdown/img/EChartsRenderer.tsx delete mode 100644 client/src/types/echarts-gl.d.ts diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index 3030193f9..d1da0dc24 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -53,6 +53,9 @@ dependencies: echarts: specifier: ^5.4.1 version: registry.npmmirror.com/echarts@5.4.1 + echarts-gl: + specifier: ^2.0.9 + version: registry.npmmirror.com/echarts-gl@2.0.9(echarts@5.4.1) formidable: specifier: ^2.1.1 version: registry.npmmirror.com/formidable@2.1.1 @@ -6338,6 +6341,12 @@ packages: version: 5.0.4 dev: false + registry.npmmirror.com/claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz} + name: claygl + version: 1.3.0 + dev: false + registry.npmmirror.com/client-only@0.0.1: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz} name: client-only @@ -7271,6 +7280,19 @@ packages: safe-buffer: registry.npmmirror.com/safe-buffer@5.2.1 dev: false + registry.npmmirror.com/echarts-gl@2.0.9(echarts@5.4.1): + resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz} + id: registry.npmmirror.com/echarts-gl/2.0.9 + name: echarts-gl + version: 2.0.9 + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: registry.npmmirror.com/claygl@1.3.0 + echarts: registry.npmmirror.com/echarts@5.4.1 + zrender: registry.npmmirror.com/zrender@5.4.1 + dev: false + registry.npmmirror.com/echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz} name: echarts diff --git a/client/src/components/ChatBox/index.tsx b/client/src/components/ChatBox/index.tsx index 57c84527e..ac87df3cf 100644 --- a/client/src/components/ChatBox/index.tsx +++ b/client/src/components/ChatBox/index.tsx @@ -519,7 +519,7 @@ const ChatBox = ( return ( - + {showEmpty && } {!!welcomeText && ( diff --git a/client/src/components/Markdown/img/EChartsCodeBlock.tsx b/client/src/components/Markdown/img/EChartsCodeBlock.tsx index 032749153..a698d6aa9 100644 --- a/client/src/components/Markdown/img/EChartsCodeBlock.tsx +++ b/client/src/components/Markdown/img/EChartsCodeBlock.tsx @@ -1,26 +1,64 @@ -// EChartsCodeBlock.tsx - -import React, { useMemo } from 'react'; -import EChartsRenderer from './EChartsRenderer'; +import React, { useEffect, useRef, useState } from 'react'; import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import { Box, Skeleton } from '@chakra-ui/react'; +const EChartsCodeBlock = ({ code }: { code: string }) => { + const chartRef = useRef(null); + const eChart = useRef(); + const [option, setOption] = useState(); + const [width, setWidth] = useState(400); -interface EChartsCodeBlockProps { - code: string; -} + useEffect(() => { + const clientWidth = document.getElementById('chat-container')?.clientWidth || 500; + setWidth(clientWidth * 0.9); + setTimeout(() => { + eChart.current?.resize(); + }, 100); + }, []); -const EChartsCodeBlock: React.FC = ({ code }) => { - const getOption = useMemo(() => { + useEffect(() => { + let option; try { - const optionFunction = new Function("echarts",'"use strict";' + code + '; return getChartOption;'); - return optionFunction(echarts); // 添加 echarts 参数 - } catch (error) { - console.error('Error parsing ECharts code:', '\n', error, '\n', 'Code:', code); - return null; + option = JSON.parse(code.trim()); + option = { + ...option, + toolbox: { + show: true, + feature: { + saveAsImage: {} + } + } + }; + setOption(option); + } catch (error) {} + + if (!option) return; + + (async () => { + // @ts-ignore + await import('echarts-gl'); + })(); + + if (chartRef.current) { + eChart.current = echarts.init(chartRef.current); + eChart.current.setOption(option); + eChart.current?.resize(); } + + return () => { + if (eChart.current) { + eChart.current.dispose(); + } + }; }, [code]); - return getOption ? : null; + return ( + + + {!option && } + + ); }; export default EChartsCodeBlock; diff --git a/client/src/components/Markdown/img/EChartsRenderer.tsx b/client/src/components/Markdown/img/EChartsRenderer.tsx deleted file mode 100644 index ff7a5c443..000000000 --- a/client/src/components/Markdown/img/EChartsRenderer.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useRef, useEffect } from 'react'; -import { ECharts } from 'echarts'; - -interface EChartsRendererProps { - getOption: () => any; -} - - -const EChartsRenderer: React.FC = ({ getOption }) => { - const chartRef = useRef(null); - - useEffect(() => { - let chartInstance: ECharts | null = null; - - (async () => { - const echarts = await import('echarts'); - await import('echarts-gl'); - if (chartRef.current) { - chartInstance = echarts.init(chartRef.current, { renderer: 'svg', ssr: true }); - const option = getOption(); - chartInstance.setOption(option); - } - })(); - - return () => { - if (chartInstance) { - chartInstance.dispose(); - } - }; - }, [getOption]); - - return
; -}; - -export default EChartsRenderer; diff --git a/client/src/types/echarts-gl.d.ts b/client/src/types/echarts-gl.d.ts deleted file mode 100644 index 2ec17990f..000000000 --- a/client/src/types/echarts-gl.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module 'echarts-gl' { - export default echarts-gl - } -