From d8ea311945868a801308dbf2680e5d01e986fde5 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Fri, 22 Apr 2022 10:59:41 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9B=BE=E8=A1=A8=E6=8F=92=E5=85=A5?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=81=E6=B7=BB=E5=8A=A0=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E5=A0=86=E5=8F=A0=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++--- package-lock.json | 6 +++--- package.json | 2 +- src/configs/chartTypes.ts | 15 ++++++++++++++ src/hooks/useCreateElement.ts | 20 +++++++++++++++---- src/plugins/icon.ts | 8 ++++++++ src/types/slides.ts | 6 ++++-- src/views/Editor/CanvasTool/ChartPool.vue | 15 +++++++++----- .../ChartStylePanel/index.vue | 16 ++++++++++++--- .../components/element/ChartElement/Chart.vue | 7 ++----- 10 files changed, 75 insertions(+), 26 deletions(-) create mode 100644 src/configs/chartTypes.ts diff --git a/README.md b/README.md index a582f563..6742ff63 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ npm run serve - 历史记录（撤销、重做） - 快捷键 - 右键菜单 -- 导出本地文件（PPTX、JSON） +- 导出本地文件（PPTX、JSON、图片） ### 幻灯片页面编辑 - 页面添加、删除 - 页面顺序调整 @@ -84,12 +84,12 @@ npm run serve - 宽度 - 样式 - 端点样式 -#### 图表（柱状图、折线图、饼图） +#### 图表（柱状图、条形图、折线图、面积图、散点图、饼图、环形图） - 数据编辑 - 背景填充 - 主题色 - 坐标系与坐标文字颜色 -- 其他设置（柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线） +- 其他图表设置 - 边框 - 图例 #### 表格 diff --git a/package-lock.json b/package-lock.json index 42e319c3..283dc697 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1491,9 +1491,9 @@ } }, "@icon-park/vue-next": { - "version": "1.3.5", - "resolved": "https://registry.nlark.com/@icon-park/vue-next/download/@icon-park/vue-next-1.3.5.tgz", - "integrity": "sha1-TJy+bHfE9Nrb5g/Sa4axDtStGGs=" + "version": "1.3.6", + "resolved": "https://registry.npmmirror.com/@icon-park/vue-next/-/vue-next-1.3.6.tgz", + "integrity": "sha512-AZaCcjRPU9vTNVfcrG03CYJM+uv0SXx5lC4njanlRorFo+TV/x0ZTYGYGpTR/l6ek6QmFu9THmrgqKl7i/8yHg==" }, "@intervolga/optimize-cssnano-plugin": { "version": "1.0.6", diff --git a/package.json b/package.json index 27bc613b..ef0099f6 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "@icon-park/vue-next": "^1.3.5", + "@icon-park/vue-next": "^1.3.6", "animate.css": "^4.1.1", "ant-design-vue": "^3.1.0", "chartist": "^0.11.4", diff --git a/src/configs/chartTypes.ts b/src/configs/chartTypes.ts new file mode 100644 index 00000000..7626110d --- /dev/null +++ b/src/configs/chartTypes.ts @@ -0,0 +1,15 @@ +import { ChartType } from '@/types/slides' + +interface ChartTypes { + [propName: string]: ChartType; +} + +export const CHART_TYPES: ChartTypes = { + bar: 'bar', + horizontalBar: 'bar', + line: 'line', + area: 'line', + scatter: 'line', + pie: 'pie', + ring: 'pie', +} \ No newline at end of file diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index e8f8d553..698322ac 100644 --- a/src/hooks/useCreateElement.ts +++ b/src/hooks/useCreateElement.ts @@ -3,9 +3,10 @@ import { useMainStore, useSlidesStore } from '@/store' import { createRandomCode } from '@/utils/common' import { getImageSize } from '@/utils/image' import { VIEWPORT_SIZE } from '@/configs/canvas' -import { PPTLineElement, ChartType, PPTElement, TableCell, TableCellStyle, PPTShapeElement } from '@/types/slides' +import { PPTLineElement, PPTElement, TableCell, TableCellStyle, PPTShapeElement, PPTChartElement, ChartOptions, PresetChartType } from '@/types/slides' import { ShapePoolItem, SHAPE_PATH_FORMULAS } from '@/configs/shapes' import { LinePoolItem } from '@/configs/lines' +import { CHART_TYPES } from '@/configs/chartTypes' import useHistorySnapshot from '@/hooks/useHistorySnapshot' interface CommonElementPosition { @@ -79,11 +80,11 @@ export default () => { * 创建图表元素 * @param chartType 图表类型 */ - const createChartElement = (chartType: ChartType) => { - createElement({ + const createChartElement = (type: PresetChartType) => { + const newElement: PPTChartElement = { type: 'chart', id: createRandomCode(), - chartType, + chartType: CHART_TYPES[type], left: 300, top: 81.25, width: 400, @@ -98,6 +99,17 @@ export default () => { [12, 19, 5, 2, 18], ], }, + } + + let options: ChartOptions = {} + if (type === 'horizontalBar') options = { horizontalBars: true } + else if (type === 'area') options = { showArea: true } + else if (type === 'scatter') options = { showLine: false } + else if (type === 'ring') options = { donut: true } + + createElement({ + ...newElement, + options, }) } diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 7180f78d..bc3810b9 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -56,6 +56,10 @@ import { Github, ChartProportion, ChartHistogram, + ChartHistogramOne, + ChartLineArea, + ChartRing, + ChartScatter, ChartLine, ChartPie, Text, @@ -185,6 +189,10 @@ export default { app.component('IconChartHistogram', ChartHistogram) app.component('IconChartLine', ChartLine) app.component('IconChartPie', ChartPie) + app.component('IconChartHistogramOne', ChartHistogramOne) + app.component('IconChartLineArea', ChartLineArea) + app.component('IconChartRing', ChartRing) + app.component('IconChartScatter', ChartScatter) // 其他 app.component('IconPlayOne', PlayOne) diff --git a/src/types/slides.ts b/src/types/slides.ts index 59299403..9c4881ee 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -354,7 +354,9 @@ export interface PPTLineElement extends Omit + + + +