feat(chart): 为柱状图添加柱子宽度设置功能

src/types/slides.ts

@@ -416,6 +416,7 @@ export type ChartType = 'bar' | 'column' | 'line' | 'pie' | 'ring' | 'area' | 'r
 export interface ChartOptions {
   lineSmooth?: boolean
   stack?: boolean
+  barWidth?: number
 }
 
 export interface ChartData {

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -20,7 +20,19 @@
           style="flex: 3;"
         >使用平滑曲线</Checkbox>
       </div>
-
+
+      <div class="row">
+        <div style="width: 40%;">
+          柱条宽度
+        </div>
+        <NumberInput
+            v-if="handleChartElement.chartType === 'bar'"
+            v-tooltip="'柱条宽度为0或者不设置时，柱子宽度为默认宽度'"
+            style="width: 60%;"
+            :value="barWidth"
+            @update:value="value => updateOptions({ barWidth: value })"
+        />
+      </div>
       <Divider />
     </template>
 
@@ -130,6 +142,7 @@ import Divider from '@/components/Divider.vue'
 import Checkbox from '@/components/Checkbox.vue'
 import Button from '@/components/Button.vue'
 import Popover from '@/components/Popover.vue'
+import NumberInput from '@/components/NumberInput.vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
@@ -150,6 +163,7 @@ const themeColors = ref<string[]>([])
 const textColor = ref('')
 const lineSmooth = ref(false)
 const stack = ref(false)
+const barWidth = ref()
 
 watch(handleElement, () => {
   if (!handleElement.value || handleElement.value.type !== 'chart') return
@@ -162,10 +176,12 @@ watch(handleElement, () => {
     const {
       lineSmooth: _lineSmooth,
       stack: _stack,
+      barWidth: _barWidth,
     } = handleElement.value.options
 
     if (_lineSmooth !== undefined) lineSmooth.value = _lineSmooth
     if (_stack !== undefined) stack.value = _stack
+    if (_barWidth !== undefined) barWidth.value = _barWidth
   }
 
   themeColors.value = handleElement.value.themeColors

src/views/components/element/ChartElement/Chart.vue

@@ -56,6 +56,7 @@ const updateOption = () => {
     textColor: props.textColor,
     lineSmooth: props.options?.lineSmooth || false,
     stack: props.options?.stack || false,
+    barWidth: props.options?.barWidth
   })
   if (option) chart!.setOption(option, true)
 }

src/views/components/element/ChartElement/chartOption.ts

@@ -17,6 +17,7 @@ export interface ChartOptionPayload {
   textColor?: string
   lineSmooth?: boolean
   stack?: boolean
+  barWidth?: number
 }
 
 export const getChartOption = ({
@@ -26,6 +27,7 @@ export const getChartOption = ({
   textColor,
   lineSmooth,
   stack,
+  barWidth
 }: ChartOptionPayload): EChartOption | null => {
   if (type === 'bar') {
     return {
@@ -51,6 +53,7 @@ export const getChartOption = ({
           data: item,
           name: data.legends[index],
           type: 'bar',
+          barWidth,
           label: {
             show: true,
           },