fix: 修改图表数据接口的hooks

pnpm-lock.yaml

@@ -49,7 +49,6 @@ dependencies:
   axios: rg.cnpmjs.org/axios/0.23.0
   crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
   highlight.js: registry.npmjs.org/highlight.js/11.5.0
-  mockjs: registry.npmjs.org/mockjs/1.1.0
   naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24
   pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
   screenfull: rg.cnpmjs.org/screenfull/6.0.0
@@ -77,6 +76,7 @@ devDependencies:
   eslint-plugin-prettier: rg.cnpmjs.org/eslint-plugin-prettier/4.0.0_90bd2ba582f6d1348d73031482d782e2
   eslint-plugin-vue: rg.cnpmjs.org/eslint-plugin-vue/8.2.0_eslint@8.4.1
   lodash: rg.cnpmjs.org/lodash/4.17.21
+  mockjs: registry.npmjs.org/mockjs/1.1.0
   plop: r2.cnpmjs.org/plop/3.0.5
   prettier: rg.cnpmjs.org/prettier/2.5.1
   sass: rg.cnpmjs.org/sass/1.44.0
@@ -1875,7 +1875,7 @@ packages:
     name: commander
     version: 9.1.0
     engines: {node: ^12.20.0 || >=14}
-    dev: false
+    dev: true
 
   registry.npmjs.org/css-render/0.15.8:
     resolution: {integrity: sha512-k1gp1MgYDPrFZhzheQkSwm6dmP6nPe2XE6WYpJBPwEc3GbMANPJZfxl7ofZlTl8/+tpMRiGTTgUkTlXaVbLxog==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/css-render/-/css-render-0.15.8.tgz}
@@ -2199,7 +2199,7 @@ packages:
     hasBin: true
     dependencies:
       commander: registry.npmjs.org/commander/9.1.0
-    dev: false
+    dev: true
 
   registry.npmjs.org/ms/2.0.0:
     resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/ms/-/ms-2.0.0.tgz}

src/hooks/index.ts

@@ -1,3 +1,5 @@
 export * from '@/hooks/useTheme.hook'
 export * from '@/hooks/usePreviewScale.hook'
-export * from '@/hooks/useCode.hook'
+export * from '@/hooks/useCode.hook'
+export * from '@/hooks/useChartDataFetch.hook'
+export * from '@/hooks/useChartTheme.hook'

src/hooks/useChartDataFetch.hook.ts

@@ -6,11 +6,13 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview } from '@/utils'
 
+type ChartEditStoreType = typeof useChartEditStore
+
 /**
  * 图表的 setdata 数据监听与更改
  * @param chartConfig
  */
-export const useChartDataFetch = (chartConfig: CreateComponentType) => {
+export const useChartDataFetch = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType) => {
   const vChartRef = ref<typeof VChart | null>(null)
   let fetchInterval: any = 0
 

src/hooks/useChartTheme.hook.ts

@@ -0,0 +1,34 @@
+import { onMounted, ref, watch } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import merge from 'lodash/merge'
+
+/**
+ * border-hook
+ * @param props
+ * @param _defaultColor 默认颜色
+ * @param afterResizeFun resize容器之后执行函数
+ */
+export const useBorderBox = (props: any, _defaultColor: string[]) => {
+  const mergedColor = ref([])
+  const defaultColor = ref(_defaultColor)
+
+  function mergeColor() {
+    mergedColor.value = merge(cloneDeep(defaultColor.value), props.color || [])
+  }
+
+  watch(
+    () => [props.color, props.reverse],
+    () => {
+      mergeColor()
+    }
+  )
+  onMounted(() => {
+    mergeColor()
+  })
+
+  return {
+    defaultColor,
+    mergeColor,
+    mergedColor
+  }
+}

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -10,8 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import {
   DatasetComponent,
@@ -48,5 +49,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -10,7 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
-import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import {
   DatasetComponent,
@@ -47,5 +48,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { useChartDataFetch } from '@/hooks'
 import { isPreview } from '@/utils'
 
 const props = defineProps({
@@ -67,5 +67,5 @@ watch(() => props.chartConfig.option.dataset, () => {
   deep: true
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { useChartDataFetch } from '@/hooks'
 import { isPreview } from '@/utils'
 
 const props = defineProps({
@@ -74,5 +74,5 @@ watch(() => props.chartConfig.option.dataset, () => {
   deep: true
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -13,7 +13,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { useChartDataFetch } from '@/hooks'
 import { isPreview } from '@/utils'
 
 const props = defineProps({
@@ -73,5 +73,5 @@ watch(() => props.chartConfig.option.dataset, () => {
   deep: true
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -10,7 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
-import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import {
   DatasetComponent,
@@ -48,5 +49,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-const { vChartRef } = useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Decorates/Borders/borderCommon/index.vue

@@ -1,13 +1,70 @@
 <template>
-  <div>
-    边框
-  </div>
+<div></div>
+  <!-- <div class="bv-border-box-13" ref="domRef">
+    <svg class="bv-border-svg-container" :width="width" :height="height">
+      <path
+        :fill="backgroundColor"
+        :stroke="mergedColor[0]"
+        :d="`
+          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+          L ${width - 20} 10 L ${width - 5} 25
+          L ${width - 5} ${height - 5} L 20 ${height - 5}
+          L 5 ${height - 20} L 5 20
+        `"
+      />
+
+      <path
+        fill="transparent"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-dasharray="10, 5"
+        :stroke="mergedColor[0]"
+        :d="`M 16 9 L 61 9`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${
+          width - 30
+        } ${height - 5}`"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div> -->
 </template>
 
 <script setup lang="ts">
+// import { useBorderBox } from '@/hooks'
+// const props = defineProps({
+//   width: {
+//     type: Number,
+//     default: 200
+//   },
+//   height: {
+//     type: Number,
+//     default: 200
+//   },
+//   color: {
+//     type: Array,
+//     default: () => []
+//   },
+//   backgroundColor: {
+//     type: String,
+//     default: 'transparent'
+//   }
+// })
 
+//  const {defaultColor, mergedColor} = useBorderBox(props, ['#6586ec', '#2cf7fe'])
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>