feat: 新增图表独立配置混合

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -6,49 +6,55 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
-// 图表配置项
-const option = echartOptionProfixHandle(
-  {
-    tooltip: {
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
       show: true,
-      trigger: 'axis',
-      axisPointer: {
-        show: true,
-        type: 'shadow'
-      }
-    },
-    legend: {
-      show: true,
-    },
-    xAxis: {
-      show: true,
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      show: true,
-      type: 'value'
-    },
-    series: [
-      {
-        name: 'data1',
-        type: 'bar',
-        data: [120, 200, 150, 80, 70, 110, 130]
-      },
-      {
-        name: 'data2',
-        type: 'bar',
-        data: [130, 130, 312, 268, 155, 117, 160]
-      }
-    ]
+      type: 'shadow'
+    }
   },
-  includes
-)
+  legend: {
+    show: true,
+  },
+  xAxis: {
+    show: true,
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  series: [
+    {
+      name: 'data1',
+      type: 'bar',
+      barWidth: null,
+      itemStyle: {
+        color: null,
+        borderRadius: 0
+      },
+      data: [120, 200, 150, 80, 70, 110, 130]
+    },
+    {
+      name: 'data2',
+      type: 'bar',
+      barWidth: null,
+      itemStyle: {
+        color: null,
+        borderRadius: 0
+      },
+      data: [130, 130, 312, 268, 155, 117, 160]
+    }
+  ]
+}
 
 export default class Config extends publicConfig
   implements CreateComponentType {
   public key = BarCommonConfig.key
   public chartConfig = omit(cloneDeep(BarCommonConfig), ['node'])
   // 图表配置项
-  public option = option
+  public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,7 +1,45 @@
 <template>
-  <div>配置项目</div>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
+    <SettingItemBox name="图形">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
+      </SettingItem>
+      <SettingItem name="宽度">
+          <n-input-number
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        />
+      </SettingItem>
+      <SettingItem name="圆角">
+          <n-input-number
+          v-model:value="item.itemStyle.borderRadius"
+          :min="0"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
+import { option } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

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

@@ -1,4 +1,5 @@
 import BarCommon from './index.vue'
+import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const BarCommonConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   node: BarCommon,
+  conNode: () => Configuration,
   image: image,
 }

src/packages/components/Charts/Bars/BarCrossrange/config.ts

@@ -6,48 +6,55 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
-const option = echartOptionProfixHandle(
-  {
-    tooltip: {
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
       show: true,
-      trigger: 'axis',
-      axisPointer: {
-        show: true,
-        type: 'shadow'
-      }
+      type: 'shadow',
     },
-    legend: {
-      show: true,
-    },
-    xAxis: {
-      show: true,
-      type: 'value',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      show: true,
-      type: 'category'
-    },
-    series: [
-      {
-        name: 'data1',
-        type: 'bar',
-        data: [120, 200, 150, 80, 70, 110, 130]
-      },
-      {
-        name: 'data2',
-        type: 'bar',
-        data: [130, 130, 312, 268, 155, 117, 160]
-      }
-    ]
   },
-  includes
-)
+  legend: {
+    show: true,
+  },
+  xAxis: {
+    show: true,
+    type: 'value',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {
+    show: true,
+    type: 'category',
+  },
+  series: [
+    {
+      name: 'data1',
+      type: 'bar',
+      barWidth: null,
+      itemStyle: {
+        color: null,
+        borderRadius: 0,
+      },
+      data: [120, 200, 150, 80, 70, 110, 130],
+    },
+    {
+      name: 'data2',
+      type: 'bar',
+      barWidth: null,
+      itemStyle: {
+        color: null,
+        borderRadius: 0,
+      },
+      data: [130, 130, 312, 268, 155, 117, 160],
+    },
+  ],
+}
 
 export default class Config extends publicConfig
   implements CreateComponentType {
   public key: string = BarCrossrangefig.key
   public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node'])
   // 图表配置项
-  public option = option
+  public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,7 +1,45 @@
 <template>
-  <div>配置项目</div>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
+    <SettingItemBox name="图形">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
+      </SettingItem>
+      <SettingItem name="宽度">
+          <n-input-number
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        />
+      </SettingItem>
+      <SettingItem name="圆角">
+          <n-input-number
+          v-model:value="item.itemStyle.borderRadius"
+          :min="0"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
+import { option } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

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

@@ -1,4 +1,5 @@
 import BarCrossrange from './index.vue'
+import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
@@ -10,5 +11,6 @@ export const BarCrossrangefig: ConfigType = {
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
   node: BarCrossrange,
+  conNode: () => Configuration,
   image: image
 }