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) +}