fix：bug

feat：new border

src/packages/components/Charts/ConfinedSpace/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="go-iframe-container" :style="{ width: w + 'px', height: h + 'px' }">
-    <iframe ref="iframeRef" class="iframe-content" src="/public/static/index.html"></iframe>
+    <iframe ref="iframeRef" class="iframe-content" src="/static/index.html"></iframe>
   </div>
 </template>
 

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts

@@ -3,44 +3,18 @@ import { PieCircleCommenConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
-export const includes = []
+export const includes = ['legend']
+
 
-// dataJson:{
-//   "dimensions": ["name", "value"],
-//   "source": [
-//     {
-//       "name": "分类一",
-//       "value": 94
-//     },
-//     {
-//       "name": "分类二",
-//       "value": 82
-//     },
-//     {
-//       "name": "分类三",
-//       "value": 78
-//     },
-//     {
-//       "name": "分类四",
-//       "value": 60
-//     }
-//   ]
-// }
 const otherConfig = {
   // 轮播动画
   isCarousel: false,
+  color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
 }
 
 // ECharts配置
-const option = {
+export const option = {
   ...otherConfig,
-  color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
-
-  // 使用dataset关联数据
-  dataset: {
-    ...dataJson
-  },
-
   tooltip: {
     trigger: 'item',
     formatter: '{b}: {c} ({d}%)'
@@ -96,7 +70,7 @@ const option = {
 
   series: [
     {
-      name: '总数',
+      // name: '总数',
       type: 'pie',
       radius: ['50%', '70%'],
       center: ['30%', '50%'],
@@ -113,7 +87,8 @@ const option = {
         show: false
       }
     }
-  ]
+  ],  // 使用dataset关联数据
+  dataset: { ...dataJson }
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.vue

@@ -1,21 +1,26 @@
 <template>
-
+  <div>
+    <!-- 基础配置可以复用PieCommon的配置面板 -->
+    <CollapseItem name="基础配置" :expanded="true">
+      <SettingItemBox name="图例">
+        <SettingItem name="显示">
+          <n-switch v-model:value="optionData.legend.show" size="small" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType } from 'vue'
 // 以下是封装的设置模块布局组件，具体效果可在官网查看
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { GlobalThemeJsonType } from '@/settings/chartThemes'
+import { option } from './config'
 
-const props = defineProps({
+defineProps({
   optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
+    type: Object as PropType<typeof option>,
     required: true
   }
 })
-
-const config = computed(() => {
-  return props.optionData
-})
 </script>

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/data.json

@@ -1,7 +1,9 @@
 {
   "dimensions": [
     "name",
-    "value"
+    "value",
+    "itemColor",
+    "borderColor"
   ],
   "source": [
     {

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.ts

@@ -8,6 +8,6 @@ export const PieCircleCommenConfig: ConfigType = {
   category: 'ConfinedSpace',
   categoryName: '有限空间',
   package: PackagesCategoryEnum.CHARTS,
-  chartFrame: ChartFrameEnum.COMMON,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image: 'PieCircleCommen.png'
 }

src/packages/components/Charts/ConfinedSpace/PieCircleCommen/index.vue

@@ -1,5 +1,8 @@
 <template>
+  <div class="go-border-box">
     <v-chart ref="vChartRef" :theme="themeColor" :init-options="initOptions" :option="option" autoresize> </v-chart>
+
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -13,23 +16,16 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
 import {
   DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
+  TitleComponent, GraphicComponent
 } from 'echarts/components'
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent
-])
+
 
 const props = defineProps({
   themeSetting: {
@@ -47,7 +43,16 @@ const props = defineProps({
 })
 
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  GraphicComponent
+])
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
@@ -126,3 +131,7 @@ onMounted(() => {
 })
 
 </script>
+
+<style lang="scss" scoped>
+@include go(border-box) {}
+</style>

src/packages/components/Charts/MyComponents/SmallBorder01/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { SmallBorder01Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#1089ff', '#0000ff'],
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SmallBorder01Config.key
+  public chartConfig = cloneDeep(SmallBorder01Config)
+  public option = cloneDeep(option)
+
+
+}

src/packages/components/Charts/MyComponents/SmallBorder01/config.vue

@@ -0,0 +1,54 @@
+<template>
+  <CollapseItem name="边框" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="背景" :expanded="true">
+    <SettingItemBox name="颜色">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Charts/MyComponents/SmallBorder01/index.ts

@@ -0,0 +1,17 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+// 曲线图
+export const SmallBorder01Config: ConfigType = {
+  key: 'SmallBorder01',
+  chartKey: 'VSmallBorder01',
+  conKey: 'VCSmallBorder01',
+  title: '带标题小边框+',
+  category: 'MyComponents',
+  categoryName: '自定义组件',
+  package: 'Charts',
+  chartFrame: ChartFrameEnum.COMMON,
+  image: "SmallBorder.png",
+}
+
+// 默认导出配置对象
+// export default SmallBorder01Config

src/packages/components/Charts/MyComponents/index.ts

@@ -10,6 +10,7 @@ import { LineGraph01 } from './LineGraph01/index'
 import { LineGraph02Config } from './LineGraph02/index'
 import { MaxTrimConfig } from './MaxTrim/index'
 import { SmallBorderConfig } from './SmallBorder/index'
+import { SmallBorder01Config } from './SmallBorder01/index'
 
 
 export default [
@@ -25,5 +26,6 @@ export default [
   MaxTrimConfig,
   LineGraph01,
   LineGraph02Config,
-  SmallBorderConfig
+  SmallBorderConfig,
+  SmallBorder01Config
 ]