From c87a8a1da974a2abb9be47b52428e78688cc96fd 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: Tue, 14 Feb 2023 21:12:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20iframe=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=BB=98=E8=AE=A4=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/components/Informations/Mores/Iframe/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/components/Informations/Mores/Iframe/config.ts b/src/packages/components/Informations/Mores/Iframe/config.ts index 2e96c211..a9cf94c6 100644 --- a/src/packages/components/Informations/Mores/Iframe/config.ts +++ b/src/packages/components/Informations/Mores/Iframe/config.ts @@ -14,7 +14,7 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key = IframeConfig.key - public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 } + public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 } public chartConfig = cloneDeep(IframeConfig) public option = cloneDeep(option) } 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 2/2] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=86=85?= =?UTF-8?q?=E5=AD=98=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) +}