diff --git a/src/types/slides.ts b/src/types/slides.ts
index 5d14f8303..ff6473664 100644
--- a/src/types/slides.ts
+++ b/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 {
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index de5258a5f..223aac7ae 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -20,7 +20,19 @@
style="flex: 3;"
>使用平滑曲线
-
+
+
+
+ 柱条宽度
+
+
updateOptions({ barWidth: value })"
+ />
+
@@ -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([])
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
diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue
index d5557120a..cad85e4dc 100644
--- a/src/views/components/element/ChartElement/Chart.vue
+++ b/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)
}
diff --git a/src/views/components/element/ChartElement/chartOption.ts b/src/views/components/element/ChartElement/chartOption.ts
index 53d3c3e24..12b6648c3 100644
--- a/src/views/components/element/ChartElement/chartOption.ts
+++ b/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,
},