mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
perf: 优化图表缩略图
This commit is contained in:
parent
6141c5a278
commit
8958ae54cb
@ -54,10 +54,14 @@ import {
|
||||
BringToFrontOne,
|
||||
SentToBack,
|
||||
Github,
|
||||
ChartLine,
|
||||
ChartHistogram,
|
||||
ChartProportion,
|
||||
PentagonOne,
|
||||
ChartHistogram,
|
||||
ChartHistogramOne,
|
||||
ChartLine,
|
||||
ChartLineArea,
|
||||
ChartScatter,
|
||||
ChartPie,
|
||||
ChartRing,
|
||||
Text,
|
||||
Rotate,
|
||||
LeftTwo,
|
||||
@ -71,6 +75,7 @@ import {
|
||||
Click,
|
||||
Theme,
|
||||
ArrowCircleLeft,
|
||||
GraphicDesign,
|
||||
} from '@icon-park/vue-next'
|
||||
|
||||
export default {
|
||||
@ -78,8 +83,9 @@ export default {
|
||||
// 插入元素
|
||||
app.component('IconFontSize', FontSize)
|
||||
app.component('IconPicture', Picture)
|
||||
app.component('IconPentagonOne', PentagonOne)
|
||||
app.component('IconGraphicDesign', GraphicDesign)
|
||||
app.component('IconConnection', Connection)
|
||||
app.component('IconChartProportion', ChartProportion)
|
||||
app.component('IconInsertTable', InsertTable)
|
||||
|
||||
// 锁定与解锁
|
||||
@ -151,9 +157,13 @@ export default {
|
||||
app.component('IconCloseSmall', CloseSmall)
|
||||
|
||||
// 图表
|
||||
app.component('IconChartLine', ChartLine)
|
||||
app.component('IconChartHistogram', ChartHistogram)
|
||||
app.component('IconChartProportion', ChartProportion)
|
||||
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)
|
||||
|
@ -4,7 +4,7 @@
|
||||
<div class="chart-content" @click="selectChart(chart)">
|
||||
<IconChartLine size="24" v-if="chart === 'line'" />
|
||||
<IconChartHistogram size="24" v-else-if="chart === 'bar'" />
|
||||
<IconChartProportion size="24" v-else-if="chart === 'pie'" />
|
||||
<IconChartPie size="24" v-else-if="chart === 'pie'" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -23,7 +23,7 @@
|
||||
<ShapePool @select="shape => drawShape(shape)" />
|
||||
</template>
|
||||
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状">
|
||||
<IconPentagonOne class="handler-item" />
|
||||
<IconGraphicDesign class="handler-item" />
|
||||
</Tooltip>
|
||||
</Popover>
|
||||
<Popover trigger="click" v-model:visible="linePoolVisible">
|
||||
|
@ -18,9 +18,13 @@
|
||||
:height="elementInfo.height"
|
||||
:outline="elementInfo.outline"
|
||||
/>
|
||||
<IconChartLine :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-if="elementInfo.chartType === 'line'" />
|
||||
<IconChartHistogram :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="elementInfo.chartType === 'bar'" />
|
||||
<IconChartProportion :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="elementInfo.chartType === 'pie'" />
|
||||
<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'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -45,8 +49,30 @@ export default defineComponent({
|
||||
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,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
Loading…
x
Reference in New Issue
Block a user