From 57f051f7c45b2001b2cdafdf6a9749faf81648bb Mon Sep 17 00:00:00 2001
From: chuan_wuhao <443547225@qq.com>
Date: Thu, 1 Dec 2022 17:06:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E7=BB=84=E4=BB=B6?=
=?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
dist/production-dist/index.html | 2 +-
src/components/RayChart/index.tsx | 29 ++++++++++++++++++++---------
src/views/echart/index.tsx | 2 +-
3 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/dist/production-dist/index.html b/dist/production-dist/index.html
index 9f1f1623..69a7163a 100644
--- a/dist/production-dist/index.html
+++ b/dist/production-dist/index.html
@@ -5,7 +5,7 @@
ray template
-
+
diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx
index 3a59236c..b7b31836 100644
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RayChart/index.tsx
@@ -140,7 +140,8 @@ const RayChart = defineComponent({
const settingStore = useSetting()
const { themeValue } = storeToRefs(settingStore)
const rayChartRef = ref() // `echart` 容器实例
- const echartInstance = ref() // `echart` 实例
+ const echartInstanceRef = ref() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
+ let echartInstance: EChartsInstance // `echart` 实例
const cssVarsRef = computed(() => {
const cssVars = {
@@ -215,9 +216,10 @@ const RayChart = defineComponent({
const element = rayChartRef.value as HTMLElement
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) => {
@@ -237,15 +239,15 @@ const RayChart = defineComponent({
* 销毁 `chart` 实例, 释放资源
*/
const destroyChart = () => {
- if (echartInstance.value) {
- echartInstance.value.clear()
- echartInstance.value.dispose()
+ if (echartInstance) {
+ echartInstance.clear()
+ echartInstance.dispose()
}
}
watch(
- () => [themeValue.value, props.showAria],
- ([theme]) => {
+ () => themeValue.value,
+ (theme) => {
if (props.autoChangeTheme) {
destroyChart()
@@ -254,6 +256,15 @@ const RayChart = defineComponent({
},
)
+ watch(
+ () => props.showAria,
+ () => {
+ destroyChart()
+
+ renderThemeChart()
+ },
+ )
+
onBeforeMount(async () => {
await registerChartCore()
})
@@ -275,7 +286,7 @@ const RayChart = defineComponent({
return {
rayChartRef,
cssVarsRef,
- echartInstance,
+ echartInstance: echartInstanceRef,
}
},
render() {
diff --git a/src/views/echart/index.tsx b/src/views/echart/index.tsx
index 4e641a8f..b08e4f57 100644
--- a/src/views/echart/index.tsx
+++ b/src/views/echart/index.tsx
@@ -11,7 +11,7 @@ const Echart = defineComponent({
const baseOptions = {
legend: {
- data: ['日期'],
+ // data: ['日期'],
},
tooltip: {},
xAxis: {