blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-05-01 23:36:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

可视化组件相关问题修复

Browse Source
This commit is contained in:
chuan_wuhao 2022-12-01 17:06:53 +08:00
parent c1aeb6ec6f
commit 57f051f7c4
3 changed files with 22 additions and 11 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.f7ae9ef9.js"></script> <script type="module" crossorigin src="/assets/index.9839d7cd.js"></script>
<link rel="stylesheet" href="/assets/index.4a9527dd.css"> <link rel="stylesheet" href="/assets/index.4a9527dd.css">
</head> </head>
<body> <body>

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

@ -140,7 +140,8 @@ const RayChart = defineComponent({
const settingStore = useSetting() const settingStore = useSetting()
const { themeValue } = storeToRefs(settingStore) const { themeValue } = storeToRefs(settingStore)
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例 const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
const echartInstance = ref<EChartsInstance>() // `echart` 实例 const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
let echartInstance: EChartsInstance // `echart` 实例
const cssVarsRef = computed(() => { const cssVarsRef = computed(() => {
const cssVars = { const cssVars = {
@ -215,9 +216,10 @@ const RayChart = defineComponent({
const element = rayChartRef.value as HTMLElement const element = rayChartRef.value as HTMLElement
const options = useMergeOptions() const options = useMergeOptions()
echartInstance.value = echarts.init(element, theme) echartInstance = echarts.init(element, theme)
echartInstanceRef.value = echartInstance
options && echartInstance.value.setOption(options) options && echartInstance.setOption(options)
} }
const renderThemeChart = (bool?: boolean) => { const renderThemeChart = (bool?: boolean) => {
@ -237,15 +239,15 @@ const RayChart = defineComponent({
* 销毁 `chart` 实例, 释放资源 * 销毁 `chart` 实例, 释放资源
*/ */
const destroyChart = () => { const destroyChart = () => {
if (echartInstance.value) { if (echartInstance) {
echartInstance.value.clear() echartInstance.clear()
echartInstance.value.dispose() echartInstance.dispose()
} }
} }
watch( watch(
() => [themeValue.value, props.showAria], () => themeValue.value,
([theme]) => { (theme) => {
if (props.autoChangeTheme) { if (props.autoChangeTheme) {
destroyChart() destroyChart()
@ -254,6 +256,15 @@ const RayChart = defineComponent({
}, },
) )
watch(
() => props.showAria,
() => {
destroyChart()
renderThemeChart()
},
)
onBeforeMount(async () => { onBeforeMount(async () => {
await registerChartCore() await registerChartCore()
}) })
@ -275,7 +286,7 @@ const RayChart = defineComponent({
return { return {
rayChartRef, rayChartRef,
cssVarsRef, cssVarsRef,
echartInstance, echartInstance: echartInstanceRef,
} }
}, },
render() { render() {

2
src/views/echart/index.tsx
View File

@ -11,7 +11,7 @@ const Echart = defineComponent({
const baseOptions = { const baseOptions = {
legend: { legend: {
data: ['日期'], // data: ['日期'],
}, },
tooltip: {}, tooltip: {},
xAxis: { xAxis: {