perf: 优化图表缩略图

This commit is contained in:
pipipi-pikachu 2021-04-11 13:26:40 +08:00
parent 6141c5a278
commit 8958ae54cb
4 changed files with 47 additions and 11 deletions

View File

@ -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)

View File

@ -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>

View File

@ -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">

View File

@ -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,
}
},
})