添加各个图表的独立配置项

src/assets/styles/antd.scss

@@ -71,3 +71,8 @@
 .ant-tooltip-inner {
   font-size: 12px;
 }
+
+// checkbox
+.ant-checkbox-wrapper {
+  font-size: 13px;
+}

src/main.ts

@@ -33,6 +33,7 @@ import {
   Modal,
   Dropdown,
   Menu,
+  Checkbox,
 } from 'ant-design-vue'
 
 const app = createApp(App)
@@ -56,6 +57,7 @@ app.component('Modal', Modal)
 app.component('Dropdown', Dropdown)
 app.component('Menu', Menu)
 app.component('MenuItem', Menu.Item)
+app.component('Checkbox', Checkbox)
 
 app.directive('contextmenu', Contextmenu)
 app.directive('click-outside', ClickOutside)

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

@@ -4,6 +4,41 @@
       <IconEdit class="btn-icon" /> 编辑图表数据
     </Button>
 
+    <Divider />
+
+    <template v-if="handleElement.chartType === 'line'">
+      <div class="row">
+        <Checkbox 
+          @change="e => updateOptions({ showArea: e.target.checked })" :checked="showArea" 
+          style="flex: 1;"
+        >面积图样式</Checkbox>
+        <Checkbox 
+          @change="e => updateOptions({ showLine: !e.target.checked })" :checked="!showLine" 
+          style="flex: 1;"
+        >散点图样式</Checkbox>
+      </div>
+      <div class="row">
+        <Checkbox 
+          @change="e => updateOptions({ lineSmooth: e.target.checked })" 
+          :checked="lineSmooth"
+        >使用平滑曲线</Checkbox>
+      </div>
+    </template>
+    <div class="row" v-if="handleElement.chartType === 'bar'">
+      <Checkbox 
+        @change="e => updateOptions({ horizontalBars: e.target.checked })" 
+        :checked="horizontalBars"
+      >条形图样式</Checkbox>
+    </div>
+    <div class="row" v-if="handleElement.chartType === 'pie'">
+      <Checkbox 
+        @change="e => updateOptions({ donut: e.target.checked })" 
+        :checked="donut"
+      >环形图样式</Checkbox>
+    </div>
+
+    <Divider />
+
     <div class="row">
       <div style="flex: 2;">背景填充：</div>
       <Popover trigger="click">
@@ -39,14 +74,15 @@
 
 <script lang="ts">
 import { computed, defineComponent, Ref, ref, watch } from 'vue'
+import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { ChartData, PPTChartElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import ElementOutline from '../common/ElementOutline.vue'
+import ElementOutline from '../../common/ElementOutline.vue'
+import ColorButton from '../../common/ColorButton.vue'
 import ChartDataEditor from './ChartDataEditor.vue'
-import ColorButton from '../common/ColorButton.vue'
 
 export default defineComponent({
   name: 'chart-style-panel',
@@ -65,9 +101,31 @@ export default defineComponent({
 
     const fill = ref<string>()
 
+    const lineSmooth = ref<boolean | Function>(true)
+    const showLine = ref(true)
+    const showArea = ref(false)
+    const horizontalBars = ref(false)
+    const donut = ref(false)
+
     watch(handleElement, () => {
       if(!handleElement.value) return
       fill.value = handleElement.value.fill || '#000'
+
+      if(handleElement.value.options) {
+        const {
+          lineSmooth: _lineSmooth,
+          showLine: _showLine,
+          showArea: _showArea,
+          horizontalBars: _horizontalBars,
+          donut: _donut,
+        } = handleElement.value.options
+
+        if(_lineSmooth !== undefined) lineSmooth.value = _lineSmooth
+        if(_showLine !== undefined) showLine.value = _showLine
+        if(_showArea !== undefined) showArea.value = _showArea
+        if(_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
+        if(_donut !== undefined) donut.value = _donut
+      }
     }, { deep: true, immediate: true })
 
     const updateData = (data: ChartData) => {
@@ -83,12 +141,26 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    const updateOptions = (optionProps: ILineChartOptions & IBarChartOptions & IPieChartOptions) => {
+      const options = handleElement.value.options || {}
+      const newOptions = { ...options, ...optionProps }
+      const props = { options: newOptions }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+
     return {
       chartDataEditorVisible,
       handleElement,
       updateData,
       fill,
       updateFill,
+      lineSmooth,
+      showLine,
+      showArea,
+      horizontalBars,
+      donut,
+      updateOptions,
     }
   },
 })
@@ -103,7 +175,6 @@ export default defineComponent({
 }
 .full-width-btn {
   width: 100%;
-  margin-bottom: 10px;
 }
 .btn-icon {
   margin-right: 3px;

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

@@ -17,7 +17,7 @@ import TextStylePanel from './TextStylePanel.vue'
 import ImageStylePanel from './ImageStylePanel.vue'
 import ShapeStylePanel from './ShapeStylePanel.vue'
 import LineStylePanel from './LineStylePanel.vue'
-import ChartStylePanel from './ChartStylePanel.vue'
+import ChartStylePanel from './ChartStylePanel/index.vue'
 
 export default defineComponent({
   name: 'element-style-panel',