github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 图表缩略图优化

Browse Source
This commit is contained in:
pipipi-pikachu 2021-11-01 15:06:17 +08:00
parent e931be0ab9
commit f1300c7749
4 changed files with 36 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/icon.ts
View File

@ -179,12 +179,8 @@ export default {
// 图表
app.component('IconChartHistogram', ChartHistogram)
app.component('IconChartHistogramOne', ChartHistogramOne)
app.component('IconChartLine', ChartLine)
app.component('IconChartLineArea', ChartLineArea)
app.component('IconChartScatter', ChartScatter)
app.component('IconChartPie', ChartPie)
app.component('IconChartRing', ChartRing)
// 其他
app.component('IconPlayOne', PlayOne)

6
src/views/Editor/Thumbnails/index.vue
View File

@ -44,10 +44,11 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { computed, defineComponent, provide, ref } from 'vue'
import { MutationTypes, useStore } from '@/store'
import { fillDigit } from '@/utils/common'
import { ContextmenuItem } from '@/components/Contextmenu/types'
import { VIEWPORT_SIZE } from '@/configs/canvas'
import useSlideHandler from '@/hooks/useSlideHandler'
import useScreening from '@/hooks/useScreening'
@ -72,6 +73,9 @@ export default defineComponent({
const presetLayoutPopoverVisible = ref(false)
const scale = computed(() => 120 / VIEWPORT_SIZE)
provide('slideScale', scale)
const {
copySlide,
pasteSlide,

60
src/views/components/element/ChartElement/BaseChartElement.vue
View File

@ -18,13 +18,18 @@
:height="elementInfo.height"
:outline="elementInfo.outline"
/>
<IconChartHistogram :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-if="chartType === 'bar'" />
<IconChartHistogramOne :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'horizontalBar'" />
<IconChartLine :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'line'" />
<IconChartLineArea :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'area'" />
<IconChartScatter :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'scatter'" />
<IconChartPie :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'pie'" />
<IconChartRing :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'ring'" />
<Chart
:class="{ 'need-scale': needScaleSize }"
:width="chartWidth"
:height="chartHeight"
:type="elementInfo.chartType"
:data="elementInfo.data"
:options="elementInfo.options"
:themeColor="elementInfo.themeColor"
:gridColor="elementInfo.gridColor"
:legends="elementInfo.data.legends"
:legend="elementInfo.legend || ''"
/>
</div>
</div>
</template>
@ -34,45 +39,28 @@ import { computed, defineComponent, PropType } from 'vue'
import { PPTChartElement } from '@/types/slides'
import ElementOutline from '@/views/components/element/ElementOutline.vue'
import Chart from './Chart.vue'
export default defineComponent({
name: 'base-element-chart',
components: {
ElementOutline,
Chart,
},
props: {
elementInfo: {
type: Object as PropType<PPTChartElement>,
required: true,
},
needScaleSize: {
type: Boolean,
default: true,
},
},
setup(props) {
const size = computed(() => Math.min(props.elementInfo.width, props.elementInfo.height))
const chartType = computed(() => {
const _chartType = props.elementInfo.chartType
const _options = props.elementInfo.options
if (_chartType === 'bar') {
if (_options?.horizontalBars) return 'horizontalBar'
return 'bar'
}
else if (_chartType === 'line') {
if (_options?.showArea) return 'area'
else if (_options && _options.showLine === false) return 'scatter'
return 'line'
}
else if (_chartType === 'pie') {
if (_options?.donut) return 'ring'
return 'pie'
}
return ''
})
return {
size,
chartType,
chartWidth: computed(() => props.needScaleSize ? props.elementInfo.width * 10 : props.elementInfo.width),
chartHeight: computed(() => props.needScaleSize ? props.elementInfo.height * 10 : props.elementInfo.height),
}
},
})
@ -82,13 +70,11 @@ export default defineComponent({
.base-element-chart {
position: absolute;
}
.element-content {
width: 100%;
height: 100%;
opacity: .5;
display: flex;
justify-content: center;
align-items: center;
}
.need-scale {
zoom: .1;
}
</style>

52
src/views/components/element/ChartElement/ScreenChartElement.vue
View File

@ -1,50 +1,21 @@
<template>
<div class="screen-element-chart"
:style="{
top: elementInfo.top + 'px',
left: elementInfo.left + 'px',
width: elementInfo.width + 'px',
height: elementInfo.height + 'px',
}"
>
<div
class="element-content"
:style="{
backgroundColor: elementInfo.fill,
}"
>
<ElementOutline
:width="elementInfo.width"
:height="elementInfo.height"
:outline="elementInfo.outline"
<BaseChartElement
class="screen-element-chart"
:elementInfo="elementInfo"
:needScaleSize="false"
/>
<Chart
:width="elementInfo.width"
:height="elementInfo.height"
:type="elementInfo.chartType"
:data="elementInfo.data"
:options="elementInfo.options"
:themeColor="elementInfo.themeColor"
:gridColor="elementInfo.gridColor"
:legends="elementInfo.data.legends"
:legend="elementInfo.legend || ''"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { PPTChartElement } from '@/types/slides'
import ElementOutline from '@/views/components/element/ElementOutline.vue'
import Chart from './Chart.vue'
import BaseChartElement from './BaseChartElement.vue'
export default defineComponent({
name: 'screen-element-chart',
components: {
ElementOutline,
Chart,
BaseChartElement,
},
props: {
elementInfo: {
@ -54,14 +25,3 @@ export default defineComponent({
},
})
</script>
<style lang="scss" scoped>
.screen-element-chart {
position: absolute;
}
.element-content {
width: 100%;
height: 100%;
}
</style>