From beee25590d238c8b74210aa8afcae2035bffb098 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Mon, 18 Jan 2021 12:58:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Chart.vue | 68 ++++++++++ src/configs/chartTheme.ts | 10 ++ src/types/slides.ts | 2 + .../ChartStylePanel/index.vue | 119 ++++++++++++++++++ .../element/ChartElement/BaseChartElement.vue | 11 +- .../ChartElement/ScreenChartElement.vue | 2 + .../components/element/ChartElement/index.vue | 2 + 7 files changed, 211 insertions(+), 3 deletions(-) create mode 100644 src/configs/chartTheme.ts diff --git a/src/components/Chart.vue b/src/components/Chart.vue index 6fbb0447..5ef071ac 100644 --- a/src/components/Chart.vue +++ b/src/components/Chart.vue @@ -49,6 +49,12 @@ export default defineComponent({ options: { type: Object as PropType, }, + themeColors: { + type: Array as PropType, + }, + gridColor: { + type: String, + }, }, setup(props) { const chartRef = ref(null) @@ -93,6 +99,24 @@ export default defineComponent({ onMounted(renderChart) + const updateTheme = () => { + if(!chartRef.value) return + + if(props.themeColors) { + for(let i = 0; i < props.themeColors.length; i++) { + chartRef.value.style.setProperty(`--theme-color-${i + 1}`, props.themeColors[i]) + } + } + + if(props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor) + } + + watch([ + () => props.themeColors, + () => props.gridColor, + ], updateTheme) + onMounted(updateTheme) + return { slideScale, chartRef, @@ -105,4 +129,48 @@ export default defineComponent({ .chart-content { transform-origin: 0 0; } + + + \ No newline at end of file diff --git a/src/configs/chartTheme.ts b/src/configs/chartTheme.ts new file mode 100644 index 00000000..fbffdbcc --- /dev/null +++ b/src/configs/chartTheme.ts @@ -0,0 +1,10 @@ +export const CHART_THEME_COLORS = [ + ['#d70206', '#f05b4f', '#f4c63d', '#d17905'], + ['#67d5b5', '#ee7785', '#c89ec4', '#84b1ed'], + ['#f6ea8c', '#f26d5b', '#c03546', '#492540'], + ['#583d72', '#9f5f80', '#ffba93', '#ff8e71'], + ['#59886b', '#c05555', '#ffc85c', '#fff8c1'], + ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074'], + ['#1a1a2e', '#16213e', '#0f3460', '#e94560'], + ['#e01f54', '#001852', '#f5e8c8', '#b8d2c7'], +] \ No newline at end of file diff --git a/src/types/slides.ts b/src/types/slides.ts index 629dc2f4..11410e3d 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -126,6 +126,8 @@ export interface PPTChartElement { data: ChartData; options?: ILineChartOptions & IBarChartOptions & IPieChartOptions; outline?: PPTElementOutline; + themeColors?: string[]; + gridColor?: string; } export interface TableElementCell { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue index 9e273160..ecfcd297 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue @@ -51,6 +51,51 @@ +
+
主题配色:
+ + + + +
+
+
网格颜色:
+ + + + +
@@ -78,6 +123,7 @@ import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist' import { useStore } from 'vuex' import { MutationTypes, State } from '@/store' import { ChartData, PPTChartElement } from '@/types/slides' +import { CHART_THEME_COLORS } from '@/configs/chartTheme' import useHistorySnapshot from '@/hooks/useHistorySnapshot' import ElementOutline from '../../common/ElementOutline.vue' @@ -96,11 +142,15 @@ export default defineComponent({ const handleElement: Ref = computed(() => store.getters.handleElement) const chartDataEditorVisible = ref(false) + const themePoolVisible = ref(false) const { addHistorySnapshot } = useHistorySnapshot() const fill = ref() + const themeColors = ref([]) + const gridColor = ref('') + const lineSmooth = ref(true) const showLine = ref(true) const showArea = ref(false) @@ -126,6 +176,9 @@ export default defineComponent({ if(_horizontalBars !== undefined) horizontalBars.value = _horizontalBars if(_donut !== undefined) donut.value = _donut } + + themeColors.value = handleElement.value.themeColors || CHART_THEME_COLORS[0] + gridColor.value = handleElement.value.gridColor || 'rgba(0, 0, 0, 0.4)' }, { deep: true, immediate: true }) const updateData = (data: ChartData) => { @@ -149,8 +202,22 @@ export default defineComponent({ addHistorySnapshot() } + const updateTheme = (themeColors: string[]) => { + themePoolVisible.value = false + const props = { themeColors } + store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) + addHistorySnapshot() + } + + const updateGridColor = (gridColor: string) => { + const props = { gridColor } + store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props }) + addHistorySnapshot() + } + return { chartDataEditorVisible, + themePoolVisible, handleElement, updateData, fill, @@ -161,6 +228,11 @@ export default defineComponent({ horizontalBars, donut, updateOptions, + themeColors, + gridColor, + CHART_THEME_COLORS, + updateTheme, + updateGridColor, } }, }) @@ -179,4 +251,51 @@ export default defineComponent({ .btn-icon { margin-right: 3px; } + +.theme-item { + border-radius: $borderRadius; + display: flex; + align-items: center; + justify-content: center; + padding: 5px 20px; + transition: background-color .1s; + + & + .theme-item { + margin-top: 8px; + } + + &:hover { + background-color: #e1e1e1; + cursor: pointer; + } +} +.theme-color-btn { + display: flex; + align-items: center; + justify-content: center; + padding: 0 !important; +} +.theme-color-content { + height: 20px; + margin-left: 8px; + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} +.color-block { + width: 18px; + height: 18px; + border-radius: 50%; + + & + .color-block { + margin-left: -3px; + } +} +.theme-color-btn-icon { + width: 30px; + font-size: 12px; + margin-top: 2px; + color: #bfbfbf; +} \ No newline at end of file diff --git a/src/views/components/element/ChartElement/BaseChartElement.vue b/src/views/components/element/ChartElement/BaseChartElement.vue index 23dac4fb..5c1894c0 100644 --- a/src/views/components/element/ChartElement/BaseChartElement.vue +++ b/src/views/components/element/ChartElement/BaseChartElement.vue @@ -18,9 +18,9 @@ :height="elementInfo.height" :outline="elementInfo.outline" /> - - - + + + @@ -28,6 +28,7 @@