diff --git a/README.md b/README.md index b6eb482c..4d307f10 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ npm run dev - Style - Endpoint style #### Charts (bar, column, line, area, scatter, pie, donut, radar) -- Chart conversion +- Chart type conversion - Data editing - Background fill - Theme color diff --git a/README_zh.md b/README_zh.md index 2fa7e42e..f3d29d63 100644 --- a/README_zh.md +++ b/README_zh.md @@ -114,7 +114,7 @@ npm run dev - 样式 - 端点样式 #### 图表(柱状图、条形图、折线图、面积图、散点图、饼图、环形图、雷达图) -- 图表转换 +- 图表类型转换 - 数据编辑 - 背景填充 - 主题色 diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue index ffff49af..d93b11ed 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue @@ -68,11 +68,23 @@
- + 图表类型:{{ CHART_TYPE_MAP[chartType] }} + + + 点击更换 +
- + +
@@ -82,8 +94,11 @@ import { computed, onMounted, onUnmounted, ref } from 'vue' import type { ChartData, ChartType } from '@/types/slides' import { KEYS } from '@/configs/hotkey' +import { CHART_TYPE_MAP } from '@/configs/chart' import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard' import Button from '@/components/Button.vue' +import Popover from '@/components/Popover.vue' +import PopoverMenuItem from '@/components/PopoverMenuItem.vue' const props = defineProps<{ type: ChartType @@ -91,7 +106,10 @@ const props = defineProps<{ }>() const emit = defineEmits<{ - (event: 'save', payload: ChartData): void + (event: 'save', payload: { + data: ChartData + type: ChartType + }): void (event: 'close'): void }>() @@ -99,9 +117,12 @@ const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' const CELL_WIDTH = 100 const CELL_HEIGHT = 32 +const chartList: ChartType[] = ['bar', 'column', 'line', 'area', 'scatter', 'pie', 'ring', 'radar'] +const chartTypeSelectVisible = ref(false) const selectedRange = ref([0, 0]) const tempRangeSize = ref({ width: 0, height: 0 }) const focusCell = ref<[number, number] | null>(null) +const chartType = ref('bar') // 当前选区的边框线条位置 const rangeLines = computed(() => { @@ -124,6 +145,8 @@ const resizablePointStyle = computed(() => { // 初始化图表数据:将数据格式化并填充到DOM const initData = () => { + chartType.value = props.type + const _data: string[][] = [] const { labels, legends, series } = props.data @@ -210,7 +233,7 @@ const getTableData = () => { // 一些特殊图表类型,数据需要单独处理 // 散点图有且只有两列数据 - if (props.type === 'scatter') { + if (chartType.value === 'scatter') { if (legends.length > 2) { legends = legends.slice(0, 2) series = series.slice(0, 2) @@ -221,14 +244,14 @@ const getTableData = () => { } } // 饼图和环形图只有一列数据 - if (props.type === 'ring' || props.type === 'pie') { + if (chartType.value === 'ring' || chartType.value === 'pie') { if (legends.length > 1) { legends = legends.slice(0, 1) series = series.slice(0, 1) } } - emit('save', { labels, legends, series }) + emit('save', { data: { labels, legends, series }, type: chartType.value }) } // 清空表格数据 @@ -439,6 +462,26 @@ table { margin-top: 10px; display: flex; justify-content: space-between; + + .btn { + margin-left: 10px; + } + + .left { + display: flex; + align-items: center; + font-size: 12px; + + .change { + color: #ccc; + margin-left: 5px; + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } + } } .col-header { diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue index 89b5e01d..79cb1f7e 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue @@ -1,7 +1,7 @@