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;" >使用平滑曲线 - + +
+
+ 柱条宽度 +
+ +
@@ -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, },