feat: 新增柱状图&折线图

2025-10-13 22:12:11 +08:00 · 2024-05-28 11:30:52 +08:00 · 2024-05-28 11:30:52 +08:00 · 2e80be90a3
commit 2e80be90a3
parent d6756fc584
4 changed files with 157 additions and 90 deletions
--- a/src/packages/components/Charts/Bars/BarLine/config.vue
+++ b/src/packages/components/Charts/Bars/BarLine/config.vue
@ -4,9 +4,37 @@
  <CollapseItem
    v-for="(item, index) in seriesList"
    :key="index"
-    :name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
+    :name="`${item.type == 'bar' ? `柱状图-${index + 1}` : `折线图-${index + 1}`}`"
    :expanded="true"
  >
+    <template #header>
+      <n-space align="center" :wrap="false">
+        <n-button v-if="index !== 0" @click="handleDelete(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-dropdown v-if="index === seriesList.length - 1" trigger="hover" :options="options" @select="handleSelect">
+          <n-button circle size="tiny">
+            <template #icon>
+              <n-icon><AddIcon /></n-icon>
+            </template>
+          </n-button>
+        </n-dropdown>
+      </n-space>
+    </template>
+    <SettingItemBox name="类型">
+      <setting-item name="">
+        <n-select
+          :value="item.type"
+          :options="[
+            { label: '柱状图', value: 'bar' },
+            { label: '折线图', value: 'line' },
+          ]"
+          :onUpdate:value="(v:string) => changeType(v, index)"
+        />
+      </setting-item>
+    </SettingItemBox>
    <SettingItemBox name="图形" v-if="item.type == 'bar'">
      <SettingItem name="宽度">
        <n-input-number
@ -75,10 +103,14 @@
 </template>

 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, ref, watch } from 'vue'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { lineConf } from '@/packages/chartConfiguration/echarts'
 import { GlobalThemeJsonType } from '@/settings/chartThemes'
+import {barSeriesItem, lineSeriesItem} from './config'
+import {cloneDeep} from "lodash";
+import {icon} from "@/plugins";
+const { CloseIcon, AddIcon } = icon.ionicons5

 const props = defineProps({
  optionData: {
@ -87,7 +119,32 @@ const props = defineProps({
  }
 })

+const options = ref([
+  {
+    label: '柱状图',
+    key: 'bar',
+  },
+  {
+    label: '折线图',
+    key: 'line'
+  },
+])
+
+const handleSelect = (key: string) => {
+  handleAdd(key === 'bar' ? cloneDeep(barSeriesItem) : cloneDeep(lineSeriesItem))
+}
+
 const seriesList = computed(() => {
  return props.optionData.series
 })
+
+const handleAdd = (seriesItem: any) => {
+  props.optionData.series.push(cloneDeep(seriesItem))
+}
+const handleDelete = (i: number) => {
+  props.optionData.series.splice(i, 1)
+}
+const changeType = (type: string, i: number) => {
+  props.optionData.series[i] = type === 'bar' ? cloneDeep(barSeriesItem) : cloneDeep(lineSeriesItem)
+}
 </script>
--- 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)
 </script>
--- 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]
--- 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 {