perf: replace echart library and load it modular (#645)

package.json

@@ -34,7 +34,6 @@
         "axios": "^0.26.0",
         "core-js": "^3.16.0",
         "echarts": "^5.2.2",
-        "echarts-for-vue": "^1.4.1",
         "echarts-gl": "^2.0.8",
         "js-sha256": "^0.9.0",
         "overlayscrollbars": "^1.13.1",
@@ -44,6 +43,7 @@
         "uuid": "^8.3.2",
         "vue": "^2.6.14",
         "vue-class-component": "^7.2.6",
+        "vue-echarts": "^6.0.2",
         "vue-i18n": "^8.25.0",
         "vue-load-image": "^0.2.0",
         "vue-meta": "^2.4.0",
@@ -61,7 +61,7 @@
         "@types/uuid": "^8.3.1",
         "@typescript-eslint/eslint-plugin": "^5.11.0",
         "@typescript-eslint/parser": "^5.11.0",
-        "@vue/composition-api": "^1.0.5",
+        "@vue/composition-api": "^1.4.6",
         "@vue/eslint-config-typescript": "^10.0.0",
         "autoprefixer": "^10.4.2",
         "eslint": "^8.9.0",

src/components/charts/HistoryAllPrintStatus.vue

@@ -1,24 +1,20 @@
 <template>
-    <ECharts
+    <e-chart
         ref="historyAllPrintStatus"
         :option="chartOptions"
         :init-options="{ renderer: 'svg' }"
         style="height: 250px; width: 100%"
-        v-observe-visibility="visibilityChanged"></ECharts>
+        v-observe-visibility="visibilityChanged"></e-chart>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { createComponent } from 'echarts-for-vue'
-import * as echarts from 'echarts'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ECharts } from 'echarts/core'
+import type { ECharts } from 'echarts/core'
 
 @Component({
-    components: {
+    components: {},
-        ECharts: createComponent({ echarts }),
-    },
 })
 export default class HistoryAllPrintStatus extends Mixins(BaseMixin) {
     declare $refs: {

src/components/charts/HistoryFilamentUsage.vue

@@ -1,25 +1,19 @@
 <template>
-    <ECharts
+    <e-chart
         ref="historyFilamentUsage"
         :option="chartOptions"
         :init-options="{ renderer: 'svg' }"
         style="height: 175px; width: 100%"
-        v-observe-visibility="visibilityChanged"></ECharts>
+        v-observe-visibility="visibilityChanged"></e-chart>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { createComponent } from 'echarts-for-vue'
-import * as echarts from 'echarts'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
-import { ECharts } from 'echarts/core'
+import type { ECharts } from 'echarts/core'
 
-@Component({
+@Component({})
-    components: {
-        ECharts: createComponent({ echarts }),
-    },
-})
 export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     declare $refs: {
         historyFilamentUsage: any

src/components/charts/HistoryPrinttimeAvg.vue

@@ -1,24 +1,20 @@
 <template>
-    <ECharts
+    <e-chart
         ref="historyPrinttimeAvg"
         :option="chartOptions"
         :init-options="{ renderer: 'svg' }"
         style="height: 175px; width: 100%"
-        v-observe-visibility="visibilityChanged"></ECharts>
+        v-observe-visibility="visibilityChanged"></e-chart>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { createComponent } from 'echarts-for-vue'
-import * as echarts from 'echarts'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
-import { ECharts } from 'echarts/core'
+import type { ECharts } from 'echarts/core'
 
 @Component({
-    components: {
+    components: {},
-        ECharts: createComponent({ echarts }),
-    },
 })
 export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
     declare $refs: {

src/components/charts/TempChart.vue

@@ -1,10 +1,10 @@
 <template>
-    <ECharts
+    <e-chart
         ref="tempchart"
         :option="chartOptions"
         :init-options="{ renderer: 'svg' }"
         style="height: 250px; width: 100%"
-        v-observe-visibility="visibilityChanged"></ECharts>
+        v-observe-visibility="visibilityChanged"></e-chart>
 </template>
 
 <script lang="ts">
@@ -14,18 +14,15 @@ import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import { PrinterTempHistoryStateSerie, PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
 
-import { createComponent } from 'echarts-for-vue'
+import type { ECharts } from 'echarts/core'
-import * as echarts from 'echarts'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
-import { ECharts } from 'echarts/core'
 
 interface echartsTooltipObj {
     [key: string]: any
 }
 
 @Component({
-    components: {
+    components: {},
-        ECharts: createComponent({ echarts }),
-    },
 })
 export default class TempChart extends Mixins(BaseMixin) {
     convertName = convertName
@@ -35,8 +32,9 @@ export default class TempChart extends Mixins(BaseMixin) {
     }
 
     private isVisible = true
-    public chartOptions = {
+    public chartOptions: ECBasicOption = {
         darkMode: true,
+        renderer: 'svg',
         animation: false,
         tooltip: {
             animation: false,
@@ -196,8 +194,7 @@ export default class TempChart extends Mixins(BaseMixin) {
     }
 
     get chart(): ECharts | null {
-        const tempchart = this.$refs.tempchart
+        return this.$refs.tempchart ?? null
-        return tempchart?.inst ?? null
     }
 
     get maxHistory() {
@@ -251,11 +248,15 @@ export default class TempChart extends Mixins(BaseMixin) {
                 return entry.date >= limitDate
             })
 
-            this.chart?.setOption({
+            this.chart?.setOption(
+                {
                     dataset: {
                         source: newSource,
                     },
-            })
+                },
+                false,
+                true
+            )
 
             //const t1 = performance.now()
             //window.console.debug('calc chart', (t1-t0).toFixed(), newSource.length, this.source.length)
@@ -348,9 +349,13 @@ export default class TempChart extends Mixins(BaseMixin) {
     @Watch('series', { deep: true })
     seriesChanged(newVal: PrinterTempHistoryStateSerie[]) {
         if (this.chart && this.chart?.isDisposed() !== true) {
-            this.chart.setOption({
+            this.chart.setOption(
+                {
                     series: newVal,
-            })
+                },
+                false,
+                true
+            )
         }
     }
 

src/main.ts

@@ -43,10 +43,17 @@ Vue.use(OverlayScrollbarsPlugin, {
     },
 })
 
-//vue-echarts-ts
+// Echarts
-import { plugin } from 'echarts-for-vue'
+import ECharts from 'vue-echarts'
-import * as echarts from 'echarts/core'
+import { use } from 'echarts/core'
-Vue.use(plugin, { echarts })
+
+// import ECharts modules manually to reduce bundle size
+import { SVGRenderer } from 'echarts/renderers'
+import { LineChart, BarChart, PieChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent, DatasetComponent } from 'echarts/components'
+
+use([SVGRenderer, LineChart, BarChart, LegendComponent, PieChart, DatasetComponent, GridComponent, TooltipComponent])
+Vue.component('e-chart', ECharts)
 
 //load config.json and init vue
 fetch('/config.json')

src/pages/Heightmap.vue

@@ -109,11 +109,11 @@
                         <v-card-text class="py-0 px-0">
                             <v-row>
                                 <v-col class="">
-                                    <ECharts
+                                    <e-chart
                                         ref="heightmap"
                                         :option="chartOptions"
-                                        :init-options="{ renderer: 'svg' }"
+                                        :init-options="{ renderer: 'canvas' }"
-                                        style="height: 400px; width: 100%; overflow: hidden"></ECharts>
+                                        style="height: 400px; width: 100%; overflow: hidden"></e-chart>
                                 </v-col>
                             </v-row>
                             <v-row>
@@ -351,12 +351,23 @@ import { Component, Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
 
-import { createComponent } from 'echarts-for-vue'
-import * as echarts from 'echarts'
-import { ECharts } from 'echarts/core'
-import 'echarts-gl'
 import Panel from '@/components/ui/Panel.vue'
 
+import { use } from 'echarts/core'
+
+// import ECharts modules manually to reduce bundle size
+import { CanvasRenderer } from 'echarts/renderers'
+import { VisualMapComponent } from 'echarts/components'
+
+// @ts-ignore
+import { Grid3DComponent } from 'echarts-gl/components'
+//type definitions for echarts-gl do not exist
+// @ts-ignore
+import { SurfaceChart } from 'echarts-gl/charts'
+import type { ECharts } from 'echarts'
+
+use([CanvasRenderer, VisualMapComponent, Grid3DComponent, SurfaceChart])
+
 interface HeightmapSerie {
     type: string
     name: string
@@ -374,7 +385,6 @@ interface HeightmapSerie {
 @Component({
     components: {
         Panel,
-        ECharts: createComponent({ echarts }),
     },
 })
 export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
@@ -528,8 +538,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
     }
 
     get chart(): ECharts | null {
-        const heightmap = this.$refs.heightmap
+        return this.$refs.heightmap ?? null
-        return heightmap?.inst ?? null
     }
 
     get profiles() {