blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

可视化组件响应式尺寸变化

Browse Source
This commit is contained in:
chuan_wuhao 2022-12-01 17:16:00 +08:00
parent 57f051f7c4
commit 8d4760104f
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/production-dist/index.html vendored
View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/ray.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ray template</title>
<script type="module" crossorigin src="/assets/index.9839d7cd.js"></script>
<script type="module" crossorigin src="/assets/index.dfa30cb8.js"></script>
<link rel="stylesheet" href="/assets/index.4a9527dd.css">
</head>
<body>

13
src/components/RayChart/index.tsx
View File

@ -21,6 +21,7 @@ import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers' // `echarts` 渲染器
import { useSetting } from '@/store'
import { cloneDeep } from 'lodash-es'
import { on, off } from '@/utils/element'
import type { PropType } from 'vue'
@ -245,6 +246,12 @@ const RayChart = defineComponent({
}
}
const resizeChart = () => {
if (echartInstance) {
echartInstance.resize()
}
}
watch(
() => themeValue.value,
(theme) => {
@ -276,11 +283,16 @@ const RayChart = defineComponent({
} else {
props.theme ? renderChart('dark') : renderChart('')
}
if (props.autoResize) {
on(window, 'resize', resizeChart)
}
})
})
onBeforeUnmount(() => {
destroyChart()
off(window, 'resize', resizeChart)
})
return {
@ -313,5 +325,4 @@ export default RayChart
* 该组件会在卸载组件时, 自动释放资源
*
* 注意: 尽量别一次性倒入全部 `chart` 会造成打包体积异常大
*
*/