FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Fix chart can not resize when sidebar expand bug

Browse Source
This commit is contained in:
Fat Snake
2023-12-11 16:39:58 +08:00
parent b692ba7af6
commit 816351ea73
1 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/system/index.tsx
View File

@@ -221,7 +221,7 @@ const CPUInfo: React.FC = () => {
const keyDivRef = useRef<HTMLDivElement>(null) const keyDivRef = useRef<HTMLDivElement>(null)
const percentDivRef = useRef<HTMLDivElement>(null) const percentDivRef = useRef<HTMLDivElement>(null)
const cpuInfoDivRef = useRef<HTMLDivElement>(null) const cpuInfoDivRef = useRef<HTMLDivElement>(null)
const cpuInfoEChatsRef = useRef<echarts.EChartsType[]>([]) const cpuInfoEChartsRef = useRef<echarts.EChartsType[]>([])
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [refreshInterval, setRefreshInterval] = useState('5') const [refreshInterval, setRefreshInterval] = useState('5')
const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([]) const [cpuInfoEChartsOption, setCpuInfoEChartsOption] = useState<EChartsOption[]>([])
@@ -234,18 +234,16 @@ const CPUInfo: React.FC = () => {
} }
useUpdatedEffect(() => { useUpdatedEffect(() => {
const handleOnWindowResize = () => { const chartResizeObserver = new ResizeObserver(() => {
setTimeout(() => { cpuInfoEChartsRef.current.forEach((value) => value.resize())
cpuInfoEChatsRef.current.forEach((value) => value.resize()) })
}, 50)
}
window.addEventListener('resize', handleOnWindowResize) cpuInfoDivRef.current && chartResizeObserver.observe(cpuInfoDivRef.current)
return () => { return () => {
window.removeEventListener('resize', handleOnWindowResize) cpuInfoDivRef.current && chartResizeObserver.unobserve(cpuInfoDivRef.current)
} }
}, []) }, [cpuInfoDivRef.current])
useUpdatedEffect(() => { useUpdatedEffect(() => {
const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000) const intervalId = setInterval(getCpuInfo(), parseInt(refreshInterval) * 1000)
@@ -295,7 +293,7 @@ const CPUInfo: React.FC = () => {
}) })
} }
if (!cpuInfoEChatsRef.current.length) { if (!cpuInfoEChartsRef.current.length) {
keyDivRef.current && (keyDivRef.current.innerHTML = '') keyDivRef.current && (keyDivRef.current.innerHTML = '')
cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '') cpuInfoDivRef.current && (cpuInfoDivRef.current.innerHTML = '')
for (let i = 0; i < dataList.length; i++) { for (let i = 0; i < dataList.length; i++) {
@@ -305,7 +303,7 @@ const CPUInfo: React.FC = () => {
const valueElement = document.createElement('div') const valueElement = document.createElement('div')
cpuInfoDivRef.current?.appendChild(valueElement) cpuInfoDivRef.current?.appendChild(valueElement)
cpuInfoEChatsRef.current.push( cpuInfoEChartsRef.current.push(
echarts.init(valueElement, null, { renderer: 'svg' }) echarts.init(valueElement, null, { renderer: 'svg' })
) )
} }
@@ -341,7 +339,7 @@ const CPUInfo: React.FC = () => {
}) })
useEffect(() => { useEffect(() => {
cpuInfoEChatsRef.current?.forEach((value, index) => { cpuInfoEChartsRef.current?.forEach((value, index) => {
try { try {
value.setOption(cpuInfoEChartsOption[index]) value.setOption(cpuInfoEChartsOption[index])
} catch (e) { } catch (e) {
@@ -391,7 +389,7 @@ const StorageInfo: React.FC = () => {
const keyDivRef = useRef<HTMLDivElement>(null) const keyDivRef = useRef<HTMLDivElement>(null)
const percentDivRef = useRef<HTMLDivElement>(null) const percentDivRef = useRef<HTMLDivElement>(null)
const storageInfoDivRef = useRef<HTMLDivElement>(null) const storageInfoDivRef = useRef<HTMLDivElement>(null)
const storageInfoEChatsRef = useRef<echarts.EChartsType[]>([]) const storageInfoEChartsRef = useRef<echarts.EChartsType[]>([])
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [refreshInterval, setRefreshInterval] = useState('5') const [refreshInterval, setRefreshInterval] = useState('5')
const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([]) const [storageInfoEChartsOption, setStorageInfoEChartsOption] = useState<EChartsOption[]>([])
@@ -402,18 +400,16 @@ const StorageInfo: React.FC = () => {
} }
useUpdatedEffect(() => { useUpdatedEffect(() => {
const handleOnWindowResize = () => { const chartResizeObserver = new ResizeObserver(() => {
setTimeout(() => { storageInfoEChartsRef.current.forEach((value) => value.resize())
storageInfoEChatsRef.current.forEach((value) => value.resize()) })
}, 50)
}
window.addEventListener('resize', handleOnWindowResize) storageInfoDivRef.current && chartResizeObserver.observe(storageInfoDivRef.current)
return () => { return () => {
window.removeEventListener('resize', handleOnWindowResize) storageInfoDivRef.current && chartResizeObserver.unobserve(storageInfoDivRef.current)
} }
}, []) }, [storageInfoDivRef.current])
useUpdatedEffect(() => { useUpdatedEffect(() => {
const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000) const intervalId = setInterval(getStorageInfo(), parseInt(refreshInterval) * 1000)
@@ -485,13 +481,13 @@ const StorageInfo: React.FC = () => {
}) })
} }
if (!storageInfoEChatsRef.current.length) { if (!storageInfoEChartsRef.current.length) {
storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '') storageInfoDivRef.current && (storageInfoDivRef.current.innerHTML = '')
eChartsOptions.forEach(() => { eChartsOptions.forEach(() => {
const element = document.createElement('div') const element = document.createElement('div')
storageInfoDivRef.current?.appendChild(element) storageInfoDivRef.current?.appendChild(element)
storageInfoEChatsRef.current.push( storageInfoEChartsRef.current.push(
echarts.init(element, null, { renderer: 'svg' }) echarts.init(element, null, { renderer: 'svg' })
) )
}) })
@@ -529,7 +525,7 @@ const StorageInfo: React.FC = () => {
}) })
useEffect(() => { useEffect(() => {
storageInfoEChatsRef.current?.forEach((value, index) => { storageInfoEChartsRef.current?.forEach((value, index) => {
try { try {
value.setOption(storageInfoEChartsOption[index]) value.setOption(storageInfoEChartsOption[index])
} catch (e) { } catch (e) {