feat: 新增饼图配制

2026-05-30 00:00:05 +08:00 · 2025-06-15 16:36:31 +08:00
parent b3a8c23a47
commit cfb2a667bd
18 changed files with 228 additions and 141 deletions
@@ -1 +1,2 @@
-export * from './legends'
+export * from './legends'
+export * from './label'
@@ -0,0 +1,24 @@
+export const labelConfig = {
+  position: [
+    {
+      label: '外部',
+      value: 'outside'
+    },
+    {
+      label: '内部',
+      value: 'inside'
+    },
+    {
+      label: '内部-外',
+      value: 'inside-outer'
+    },
+    {
+      label: '内部-里',
+      value: 'inside-inner'
+    },
+    {
+      label: '内部-居中',
+      value: 'inside-center'
+    }
+  ]
+}
@@ -66,7 +66,7 @@
          :options="labelConfig.fontWeight"
        />
      </SettingItem>
-      <setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
+      <setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth > -1">
        <n-input-number
          v-model:value="optionData.series[0].label.textBorderWidth"
          size="small"
@@ -5,7 +5,7 @@ export const VChartBarCommonConfig: ConfigType = {
  key: 'VChartBarCommon',
  chartKey: 'VVChartBarCommon',
  conKey: 'VCVChartBarCommon',
-  title: 'VChart并列柱状图',
+  title: '并列柱状图-VChart',
  category: ChatCategoryEnum.BAR,
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.VCHART,
@@ -5,7 +5,7 @@ export const VChartBarCrossrangeConfig: ConfigType = {
  key: 'VChartBarCrossrange',
  chartKey: 'VVChartBarCrossrange',
  conKey: 'VCVChartBarCrossrange',
-  title: 'VChart并列柱状图',
+  title: '并列柱状图-VChart',
  category: ChatCategoryEnum.BAR,
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.VCHART,
@@ -5,7 +5,7 @@ export const VChartBarStackConfig: ConfigType = {
  key: 'VChartBarStack',
  chartKey: 'VVChartBarStack',
  conKey: 'VCVChartBarStack',
-  title: 'VChart堆叠柱状图',
+  title: '堆叠柱状图-VChart',
  category: ChatCategoryEnum.BAR,
  categoryName: ChatCategoryEnumName.BAR,
  package: PackagesCategoryEnum.VCHART,
@@ -5,7 +5,7 @@ export const VChartFunnelConfig: ConfigType = {
  key: 'VChartFunnel',
  chartKey: 'VVChartFunnel',
  conKey: 'VCVChartFunnel',
-  title: 'VChart漏斗图',
+  title: '漏斗图-VChart',
  category: ChatCategoryEnum.FUNNEL,
  categoryName: ChatCategoryEnumName.FUNNEL,
  package: PackagesCategoryEnum.VCHART,
@@ -5,7 +5,7 @@ export const VChartLineConfig: ConfigType = {
  key: 'VChartLine',
  chartKey: 'VVChartLine',
  conKey: 'VCVChartLine',
-  title: 'VChart折线图',
+  title: '折线图-VChart',
  category: ChatCategoryEnum.LINE,
  categoryName: ChatCategoryEnumName.LINE,
  package: PackagesCategoryEnum.VCHART,
@@ -4,7 +4,8 @@ import { CreateComponentType } from '@/packages/index.d'
 import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
 import data from './data.json'
 import cloneDeep from 'lodash/cloneDeep'
-import { IPieOption } from '../../index.d'
+import type { ChatCategoryEnum, IPieOption } from '../../index.d'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'

 export const includes = ['legends', 'tooltip']
 export const option: IPieOption & { dataset?: any } = {
@@ -14,8 +15,25 @@ export const option: IPieOption & { dataset?: any } = {
  categoryField: 'year',
  valueField: 'value',
  seriesField: 'year',
+  // 中心
+  centerX: '50%',
+  centerY: '50%',
+  innerRadius: 0.68,
+  outerRadius: 0.75,
+  label: {
+    visible: true,
+    position: 'outside',
+    style: {
+      fontSize: 12,
+      fill: '#B9B8CE',
+      fontFamily: 'SimSun',
+      fontWeight: 'normal',
+      angle: 0
+    }
+  },
  // 业务配置（后续会被转换为图表spec)
-  category: VChartPieConfig.category,
+  category: VChartPieConfig.category as ChatCategoryEnum.PIE,
+  extensionMark: []
 }

 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -1,17 +1,68 @@
 <template>
  <!-- vCharts 全局设置 -->
  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <!-- 饼图配制 -->
+  <collapse-item name="饼图" expanded>
+    <SettingItemBox name="图形">
+      <setting-item name="内圈范围">
+        <n-input-number v-model:value="optionData.innerRadius" :step="0.1" :min="0" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="外圈范围">
+        <n-input-number v-model:value="optionData.outerRadius" :step="0.1" :min="0" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="中心轴X">
+        <n-input v-model:value="optionData.centerX" :step="1" :min="0" size="small"></n-input>
+      </setting-item>
+      <setting-item name="中心轴Y">
+        <n-input v-model:value="optionData.centerY" :step="1" :min="0" size="small"></n-input>
+      </setting-item>
+    </SettingItemBox>
+    <SettingItemBox name="标签">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.label.visible" size="small"></n-switch>
+          <n-text>展示标签</n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="位置">
+        <n-select v-model:value="optionData.label.position" :options="labelConfig.position" size="small" />
+      </SettingItem>
+      <FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
+    </SettingItemBox>
+    <setting-item-box name="内环形">
+      <setting-item name="可见性">
+        <n-space>
+          <n-switch v-model:value="extensionMarkRef" size="small" @update:value="markerHandle"></n-switch>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>

 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, toRefs } from 'vue'
 import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
-import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import FontStyle from '@/components/Pages/VChartItemSetting/common/FontStyle.vue'
+import type { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { labelConfig } from '@/packages/chartConfiguration/vcharts/index'

-defineProps({
+const props = defineProps({
  optionData: {
    type: Object as PropType<vChartGlobalThemeJsonType>,
    required: true
  }
 })
+
+const a = toRefs(props.optionData.label.style)
+
+const extensionMarkRef = ref(!!props.optionData?.extensionMark)
+
+const markerHandle = (value: boolean) => {
+  if (value) {
+    props.optionData.extensionMark = []
+  } else {
+    delete props.optionData.extensionMark
+  }
+}
 </script>
@@ -5,7 +5,7 @@ export const VChartPieConfig: ConfigType = {
  key: 'VChartPie',
  chartKey: 'VVChartPie',
  conKey: 'VCVChartPie',
-  title: 'VChart饼图',
+  title: '饼图多欢-VChart',
  category: ChatCategoryEnum.PIE,
  categoryName: ChatCategoryEnumName.PIE,
  package: PackagesCategoryEnum.VCHART,
@@ -5,7 +5,7 @@ export const VChartScatterConfig: ConfigType = {
  key: 'VChartScatter',
  chartKey: 'VVChartScatter',
  conKey: 'VCVChartScatter',
-  title: 'VChart散点图',
+  title: '散点图-VChart',
  category: ChatCategoryEnum.SCATTER,
  categoryName: ChatCategoryEnumName.SCATTER,
  package: PackagesCategoryEnum.VCHART,
@@ -5,7 +5,7 @@ export const VChartWordCloudConfig: ConfigType = {
  key: 'VChartWordCloud',
  chartKey: 'VVChartWordCloud',
  conKey: 'VCVChartWordCloud',
-  title: 'VChart词云图',
+  title: '词云图-VChart',
  category: ChatCategoryEnum.WORDCLOUD,
  categoryName: ChatCategoryEnumName.WORDCLOUD,
  package: PackagesCategoryEnum.VCHART,
@@ -56,7 +56,7 @@ export interface IAreaOption extends Omit<IAreaChartSpec, 'axes'> {
 }

 export interface IPieOption extends IPieChartSpec {
-  category: ChatCategoryEnum.PIE
+  category?: ChatCategoryEnum.PIE
  type: 'pie'
 }