From 2e80be90a3623e2770c3cb4531bbd6f49cd3e9f5 Mon Sep 17 00:00:00 2001 From: huanghao1412 Date: Tue, 28 May 2024 11:30:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE&=E6=8A=98=E7=BA=BF=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Charts/Bars/BarLine/config.vue | 61 +++++++- .../components/Charts/Bars/BarLine/index.vue | 43 +++--- src/packages/components/Charts/Bars/index.ts | 4 +- src/views/preview/hooks/useScale.hook.ts | 139 ++++++++++-------- 4 files changed, 157 insertions(+), 90 deletions(-) diff --git a/src/packages/components/Charts/Bars/BarLine/config.vue b/src/packages/components/Charts/Bars/BarLine/config.vue index 6a76ebdb..c380cda6 100644 --- a/src/packages/components/Charts/Bars/BarLine/config.vue +++ b/src/packages/components/Charts/Bars/BarLine/config.vue @@ -4,9 +4,37 @@ + + + + + + diff --git a/src/packages/components/Charts/Bars/BarLine/index.vue b/src/packages/components/Charts/Bars/BarLine/index.vue index 2f221a55..7c666463 100644 --- a/src/packages/components/Charts/Bars/BarLine/index.vue +++ b/src/packages/components/Charts/Bars/BarLine/index.vue @@ -19,7 +19,7 @@ import { CanvasRenderer } from 'echarts/renderers' import { BarChart, LineChart } from 'echarts/charts' import config, { includes, barSeriesItem, lineSeriesItem } from './config' import { mergeTheme } from '@/packages/public/chart' -import { useChartDataFetch } from '@/hooks' +import {useChartCommonData, useChartDataFetch} from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { isPreview } from '@/utils' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' @@ -49,25 +49,26 @@ const option = computed(() => { return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }) -watch( - () => props.chartConfig.option.dataset, - (newData, oldData) => { - if (newData.dimensions.length !== oldData.dimensions.length) { - const seriesArr = [] - for (let i = 0; i < newData.dimensions.length - 1; i++) { - seriesArr.push(barSeriesItem, lineSeriesItem) - } - replaceMergeArr.value = ['series'] - props.chartConfig.option.series = seriesArr - nextTick(() => { - replaceMergeArr.value = [] - }) - } - }, - { - deep: false - } -) +// watch( +// () => props.chartConfig.option.dataset, +// (newData, oldData) => { +// if (newData.dimensions.length !== oldData.dimensions.length) { +// const seriesArr = [] +// for (let i = 0; i < newData.dimensions.length - 1; i++) { +// seriesArr.push(barSeriesItem, lineSeriesItem) +// } +// replaceMergeArr.value = ['series'] +// props.chartConfig.option.series = seriesArr +// nextTick(() => { +// replaceMergeArr.value = [] +// }) +// } +// }, +// { +// deep: false +// } +// ) -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +// const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Bars/index.ts b/src/packages/components/Charts/Bars/index.ts index 540a0d07..39c68f68 100644 --- a/src/packages/components/Charts/Bars/index.ts +++ b/src/packages/components/Charts/Bars/index.ts @@ -1,6 +1,6 @@ import { BarCommonConfig } from './BarCommon/index' import { BarCrossrangeConfig } from './BarCrossrange/index' // import { CapsuleChartConfig } from './CapsuleChart/index' -// import { BarLineConfig } from './BarLine/index' +import { BarLineConfig } from './BarLine/index' -export default [BarCommonConfig, BarCrossrangeConfig] +export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig] diff --git a/src/views/preview/hooks/useScale.hook.ts b/src/views/preview/hooks/useScale.hook.ts index 2666f9c8..62f5be28 100644 --- a/src/views/preview/hooks/useScale.hook.ts +++ b/src/views/preview/hooks/useScale.hook.ts @@ -1,4 +1,4 @@ -import { ref, provide, onMounted, onUnmounted } from 'vue' +import { ref, provide, onMounted, onUnmounted, watch } from 'vue' import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from '@/hooks/index' import type { ChartEditStorageType } from '../index.d' import { PreviewScaleEnum } from '@/enums/styleEnum' @@ -56,86 +56,95 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => { scaleRef.value = { ...scale } } - // 屏幕适配 - onMounted(() => { + let fn = () => { switch (localStorageInfo.editCanvasConfig.previewScaleType) { case PreviewScaleEnum.FIT: ;(() => { - const { calcRate, windowResize, unWindowResize } = usePreviewFitScale( - width.value as number, - height.value as number, - previewRef.value, - updateScaleRef - ) - calcRate() - windowResize() - useAddWheelHandle(unWindowResize) - onUnmounted(() => { - unWindowResize() - }) - })() + const { calcRate, windowResize, unWindowResize } = usePreviewFitScale( + width.value as number, + height.value as number, + previewRef.value, + updateScaleRef + ) + calcRate() + windowResize() + useAddWheelHandle(unWindowResize) + onUnmounted(() => { + unWindowResize() + }) + })() break case PreviewScaleEnum.SCROLL_Y: ;(() => { - const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale( - width.value as number, - height.value as number, - previewRef.value, - scale => { - const dom = entityRef.value - dom.style.width = `${width.value * scale.width}px` - dom.style.height = `${height.value * scale.height}px` - updateScaleRef(scale) - } - ) - calcRate() - windowResize() - useAddWheelHandle(unWindowResize) - onUnmounted(() => { - unWindowResize() - }) - })() + const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale( + width.value as number, + height.value as number, + previewRef.value, + scale => { + const dom = entityRef.value + dom.style.width = `${width.value * scale.width}px` + dom.style.height = `${height.value * scale.height}px` + updateScaleRef(scale) + } + ) + calcRate() + windowResize() + useAddWheelHandle(unWindowResize) + onUnmounted(() => { + unWindowResize() + }) + })() break case PreviewScaleEnum.SCROLL_X: ;(() => { - const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale( - width.value as number, - height.value as number, - previewRef.value, - scale => { - const dom = entityRef.value - dom.style.width = `${width.value * scale.width}px` - dom.style.height = `${height.value * scale.height}px` - updateScaleRef(scale) - } - ) - calcRate() - windowResize() - useAddWheelHandle(unWindowResize) - onUnmounted(() => { - unWindowResize() - }) - })() + const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale( + width.value as number, + height.value as number, + previewRef.value, + scale => { + const dom = entityRef.value + dom.style.width = `${width.value * scale.width}px` + dom.style.height = `${height.value * scale.height}px` + updateScaleRef(scale) + } + ) + calcRate() + windowResize() + useAddWheelHandle(unWindowResize) + onUnmounted(() => { + unWindowResize() + }) + })() break case PreviewScaleEnum.FULL: ;(() => { - const { calcRate, windowResize, unWindowResize } = usePreviewFullScale( - width.value as number, - height.value as number, - previewRef.value, - updateScaleRef - ) - calcRate() - windowResize() - useAddWheelHandle(unWindowResize) - onUnmounted(() => { - unWindowResize() - }) - })() + const { calcRate, windowResize, unWindowResize } = usePreviewFullScale( + width.value as number, + height.value as number, + previewRef.value, + updateScaleRef + ) + calcRate() + windowResize() + useAddWheelHandle(unWindowResize) + onUnmounted(() => { + unWindowResize() + }) + })() break } + } + // 屏幕适配 + onMounted(fn) + + watch(() => localStorageInfo.editCanvasConfig, (v) => { + width.value = v.width + height.value = v.height + fn() + }, { + deep: true }) return {