perf: 优化图表缩略图

src/plugins/iconPark.ts

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

src/views/Editor/CanvasTool/ChartPool.vue

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

src/views/Editor/CanvasTool/index.vue

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

src/views/components/element/ChartElement/BaseChartElement.vue

@@ -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-if="chartType === 'bar'" />
-      <IconChartHistogram :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="elementInfo.chartType === 'bar'" />
+      <IconChartHistogramOne :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'horizontalBar'" />
-      <IconChartProportion :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="elementInfo.chartType === 'pie'" />
+      <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,
     }
   },
 })