feat: 新增 border

src/components/ChartItemSetting/GlobalSetting.vue

@@ -134,14 +134,14 @@
         <n-select
           v-model:value="xAxis.splitLine.lineStyle.type"
           size="small"
-          :options="axisConf.splitLint.lineStyle.type"
+          :options="axisConfig.splitLint.lineStyle.type"
         ></n-select>
       </setting-item>
       <setting-item name="位置">
         <n-select
           v-model:value="xAxis.position"
           size="small"
-          :options="axisConf.xposition"
+          :options="axisConfig.xposition"
         ></n-select>
       </setting-item>
     </setting-item-box>
@@ -247,14 +247,14 @@
         <n-select
           v-model:value="yAxis.splitLine.lineStyle.type"
           size="small"
-          :options="axisConf.splitLint.lineStyle.type"
+          :options="axisConfig.splitLint.lineStyle.type"
         ></n-select>
       </setting-item>
       <setting-item name="位置">
         <n-select
           v-model:value="yAxis.position"
           size="small"
-          :options="axisConf.yposition"
+          :options="axisConfig.yposition"
         ></n-select>
       </setting-item>
     </setting-item-box>
@@ -282,7 +282,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { axisConf } from '@/packages/chartConfiguration/echarts/index'
+import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
 import {
   CollapseItem,
   SettingItemBox,

src/hooks/useChartTheme.hook.ts

@@ -1,34 +0,0 @@
-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/chartConfiguration/echarts/axis.ts

@@ -1,4 +1,4 @@
-export const axisConf = {
+export const axisConfig = {
   xposition: [
     {
       label: 'top',

src/packages/components/Decorates/Borders/borderCommon/config.ts

@@ -0,0 +1,12 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import {BorderCommonConfig} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = BorderCommonConfig.key
+  public chartConfig = cloneDeep(BorderCommonConfig)
+  public borderOptions = {
+    colors: ['#6586ec', '#2cf7fe']
+  }
+}

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

@@ -1,6 +1,35 @@
 <template>
+  <CollapseItem name="颜色" :expanded="true">
+    <!-- <SettingItemBox
+      name="图形"
+      v-for="(item, index) in optionData.borderOptions.colors"
+      :key="index"
+    >
+      <SettingItem :name="`颜色-${index + 1}`">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.borderOptions.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox> -->
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+import Config from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<Config>,
+    required: true
+  }
+})
+console.log(props.optionData)
 </script>

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

@@ -1,70 +1,60 @@
 <template>
-<div></div>
+  <div class="bv-border-box-13" ref="domRef">
-  <!-- <div class="bv-border-box-13" ref="domRef">
+    <svg class="bv-border-svg-container" :width="w" :height="h">
-    <svg class="bv-border-svg-container" :width="width" :height="height">
       <path
-        :fill="backgroundColor"
+        fill="transparent"
-        :stroke="mergedColor[0]"
+        :stroke="colors[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 ${w - 20} 10 L ${w - 5} 25
-          L ${width - 5} ${height - 5} L 20 ${height - 5}
+          L ${w - 5} ${h - 5} L 20 ${h - 5}
-          L 5 ${height - 20} L 5 20
+          L 5 ${h - 20} L 5 20
         `"
       />
 
       <path
         fill="transparent"
-        stroke-width="3"
+        stroke-w="3"
         stroke-linecap="round"
         stroke-dasharray="10, 5"
-        :stroke="mergedColor[0]"
+        :stroke="colors[0]"
         :d="`M 16 9 L 61 9`"
       />
 
       <path
         fill="transparent"
-        :stroke="mergedColor[1]"
+        :stroke="colors[1]"
         :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
       />
 
       <path
         fill="transparent"
-        :stroke="mergedColor[1]"
+        :stroke="colors[1]"
-        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${
+        :d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${
-          width - 30
+          w - 30
-        } ${height - 5}`"
+        } ${h - 5}`"
       />
     </svg>
 
     <div class="border-box-content">
       <slot></slot>
     </div>
-  </div> -->
+  </div>
 </template>
 
 <script setup lang="ts">
-// import { useBorderBox } from '@/hooks'
+import { PropType, toRefs } from 'vue'
-// const props = defineProps({
+import { CreateComponentType } from '@/packages/index.d'
-//   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'])
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  },
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors } = toRefs(props.chartConfig.borderOptions)
 </script>
 
 <style lang="scss" scoped></style>

src/packages/index.d.ts

@@ -36,7 +36,8 @@ export interface PublicConfigType extends requestConfig {
 export interface CreateComponentType extends PublicConfigType {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType
+  option?: GlobalThemeJsonType
+  [T: string]: any
 }
 
 // 获取组件实例类中某个key对应value类型的方法

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -10,8 +10,8 @@
     <styles-setting :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
-    <!-- 全局设置 --> 
+    <!-- Echarts 全局设置 --> 
-    <global-setting :optionData="targetData.option" :in-chart="true"></global-setting>
+    <global-setting v-if="targetData.option" :optionData="targetData.option" :in-chart="true"></global-setting>
   </div>
 </template>
 

src/views/chart/ContentConfigurations/index.vue

@@ -53,7 +53,7 @@
           type="segment"
         >
           <n-tab-pane
-            v-for="item in canvasTabList"
+            v-for="(item, index) in canvasTabList"
             :key="item.key"
             :name="item.key"
             size="small"