blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-26 19:47:00 +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" /> <link rel="icon" type="image/svg+xml" href="/ray.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ray template</title> <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"> <link rel="stylesheet" href="/assets/index.4a9527dd.css">
</head> </head>
<body> <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 { CanvasRenderer, SVGRenderer } from 'echarts/renderers' // `echarts` 渲染器
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { on, off } from '@/utils/element'
import type { PropType } from 'vue' import type { PropType } from 'vue'
@ -245,6 +246,12 @@ const RayChart = defineComponent({
} }
} }
const resizeChart = () => {
if (echartInstance) {
echartInstance.resize()
}
}
watch( watch(
() => themeValue.value, () => themeValue.value,
(theme) => { (theme) => {
@ -276,11 +283,16 @@ const RayChart = defineComponent({
} else { } else {
props.theme ? renderChart('dark') : renderChart('') props.theme ? renderChart('dark') : renderChart('')
} }
if (props.autoResize) {
on(window, 'resize', resizeChart)
}
}) })
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
destroyChart() destroyChart()
off(window, 'resize', resizeChart)
}) })
return { return {
@ -313,5 +325,4 @@ export default RayChart
* 该组件会在卸载组件时, 自动释放资源 * 该组件会在卸载组件时, 自动释放资源
* *
* 注意: 尽量别一次性倒入全部 `chart` 会造成打包体积异常大 * 注意: 尽量别一次性倒入全部 `chart` 会造成打包体积异常大
*
*/ */