From 5ee5c0fd58ae7345c7ca6095e4df3f83ee063dc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Wed, 15 Feb 2023 09:20:48 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=86=85=E5=AD=98?= =?UTF-8?q?=E6=B3=84=E6=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useChartDataFetch.hook.ts | 3 ++- .../components/Charts/Maps/MapBase/index.vue | 4 ++-- .../components/Charts/Mores/Heatmap/index.vue | 4 ++-- .../components/Charts/Mores/Radar/index.vue | 4 ++-- .../components/Charts/Mores/TreeMap/index.vue | 4 ++-- .../Informations/Mores/WordCloud/index.vue | 4 ++-- src/packages/public/chart.ts | 13 +++++++++++++ 7 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 0138d1b7..ed82edf5 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' +import { setOption } from '@/packages/public/chart' // 获取类型 type ChartEditStoreType = typeof useChartEditStore @@ -34,7 +35,7 @@ export const useChartDataFetch = ( const echartsUpdateHandle = (dataset: any) => { if (chartFrame === ChartFrameEnum.ECHARTS) { if (vChartRef.value) { - vChartRef.value.setOption({ dataset: dataset }) + setOption(vChartRef.value, { dataset: dataset }) } } } diff --git a/src/packages/components/Charts/Maps/MapBase/index.vue b/src/packages/components/Charts/Maps/MapBase/index.vue index f927e64a..7a66753d 100644 --- a/src/packages/components/Charts/Maps/MapBase/index.vue +++ b/src/packages/components/Charts/Maps/MapBase/index.vue @@ -11,7 +11,7 @@ import { use, registerMap } from 'echarts/core' import { EffectScatterChart, MapChart } from 'echarts/charts' import { CanvasRenderer } from 'echarts/renderers' import { useChartDataFetch } from '@/hooks' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' @@ -76,7 +76,7 @@ registerMapInitAsync() // 手动触发渲染 const vEchartsSetOption = () => { option.value = props.chartConfig.option - vChartRef.value?.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } // 更新数据处理 diff --git a/src/packages/components/Charts/Mores/Heatmap/index.vue b/src/packages/components/Charts/Mores/Heatmap/index.vue index 45cb810c..3dcd91aa 100644 --- a/src/packages/components/Charts/Mores/Heatmap/index.vue +++ b/src/packages/components/Charts/Mores/Heatmap/index.vue @@ -10,7 +10,7 @@ import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { HeatmapChart } from 'echarts/charts' import { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -68,7 +68,7 @@ const dataSetHandle = (dataset: typeof dataJson) => { props.chartConfig.option.series[0].data = seriesData } if (vChartRef.value && isPreview()) { - vChartRef.value.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } } diff --git a/src/packages/components/Charts/Mores/Radar/index.vue b/src/packages/components/Charts/Mores/Radar/index.vue index 2e523267..8dad3571 100644 --- a/src/packages/components/Charts/Mores/Radar/index.vue +++ b/src/packages/components/Charts/Mores/Radar/index.vue @@ -10,7 +10,7 @@ import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { RadarChart } from 'echarts/charts' import { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -50,7 +50,7 @@ const dataSetHandle = (dataset: typeof dataJson) => { props.chartConfig.option.radar.indicator = dataset.radarIndicator } if (vChartRef.value && isPreview()) { - vChartRef.value.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } } diff --git a/src/packages/components/Charts/Mores/TreeMap/index.vue b/src/packages/components/Charts/Mores/TreeMap/index.vue index 7964f174..37eb4fb1 100644 --- a/src/packages/components/Charts/Mores/TreeMap/index.vue +++ b/src/packages/components/Charts/Mores/TreeMap/index.vue @@ -10,7 +10,7 @@ import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { TreemapChart } from 'echarts/charts' import { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { CreateComponentType } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -42,7 +42,7 @@ const option = computed(() => { const dataSetHandle = (dataset: typeof dataJson) => { if (dataset) { props.chartConfig.option.series[0].data = dataset - vChartRef.value?.setOption(props.chartConfig.option) + setOption(vChartRef.value, props.chartConfig.option) } } diff --git a/src/packages/components/Informations/Mores/WordCloud/index.vue b/src/packages/components/Informations/Mores/WordCloud/index.vue index 4c9626e3..a5c8a592 100644 --- a/src/packages/components/Informations/Mores/WordCloud/index.vue +++ b/src/packages/components/Informations/Mores/WordCloud/index.vue @@ -16,7 +16,7 @@ import 'echarts-wordcloud' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import config, { includes } from './config' -import { mergeTheme } from '@/packages/public/chart' +import { mergeTheme, setOption } from '@/packages/public/chart' import { useChartDataFetch } from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' @@ -49,7 +49,7 @@ const option = computed(() => { const dataSetHandle = (dataset: typeof dataJson) => { try { dataset && (props.chartConfig.option.series[0].data = dataset) - vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option) + vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option) } catch (error) { console.log(error) } diff --git a/src/packages/public/chart.ts b/src/packages/public/chart.ts index d36a850e..5ed7785e 100644 --- a/src/packages/public/chart.ts +++ b/src/packages/public/chart.ts @@ -2,6 +2,7 @@ import merge from 'lodash/merge' import pick from 'lodash/pick' import { EchartsDataType } from '../index.d' import { globalThemeJson } from '@/settings/chartThemes/index' +import type VChart from 'vue-echarts' /** * * 合并 color 和全局配置项 @@ -33,3 +34,15 @@ export const setData = (option: any, data: EchartsDataType) => { option.dataset = data return option } + +/** + * * 配置公共 setOption 方法 + * @param instance + * @param data + */ +export const setOption = (instance: T, data: D) => { + if (!instance) return + const option = instance.getOption() + option.dataset = null + instance.setOption(data) +}