Skip to content

Commit

Permalink
perf: replace echart library and load it modular (#645)
Browse files Browse the repository at this point in the history
  • Loading branch information
pataar authored Feb 17, 2022
1 parent 87c83ec commit fe92b97
Show file tree
Hide file tree
Showing 8 changed files with 879 additions and 1,078 deletions.
1,830 changes: 812 additions & 1,018 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
12 changes: 4 additions & 8 deletions src/components/charts/HistoryAllPrintStatus.vue
Original file line number Diff line number Diff line change
@@ -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: {
ECharts: createComponent({ echarts }),
},
components: {},
})
export default class HistoryAllPrintStatus extends Mixins(BaseMixin) {
declare $refs: {
Expand Down
14 changes: 4 additions & 10 deletions src/components/charts/HistoryFilamentUsage.vue
Original file line number Diff line number Diff line change
@@ -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({
components: {
ECharts: createComponent({ echarts }),
},
})
@Component({})
export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
declare $refs: {
historyFilamentUsage: any
Expand Down
12 changes: 4 additions & 8 deletions src/components/charts/HistoryPrinttimeAvg.vue
Original file line number Diff line number Diff line change
@@ -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: {
ECharts: createComponent({ echarts }),
},
components: {},
})
export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
declare $refs: {
Expand Down
41 changes: 23 additions & 18 deletions src/components/charts/TempChart.vue
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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 * as echarts from 'echarts'
import { ECharts } from 'echarts/core'
import type { ECharts } from 'echarts/core'
import type { ECBasicOption } from 'echarts/types/dist/shared'
interface echartsTooltipObj {
[key: string]: any
}
@Component({
components: {
ECharts: createComponent({ echarts }),
},
components: {},
})
export default class TempChart extends Mixins(BaseMixin) {
convertName = convertName
Expand All @@ -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,
Expand Down Expand Up @@ -196,8 +194,7 @@ export default class TempChart extends Mixins(BaseMixin) {
}
get chart(): ECharts | null {
const tempchart = this.$refs.tempchart
return tempchart?.inst ?? null
return this.$refs.tempchart ?? null
}
get maxHistory() {
Expand Down Expand Up @@ -251,11 +248,15 @@ export default class TempChart extends Mixins(BaseMixin) {
return entry.date >= limitDate
})
this.chart?.setOption({
dataset: {
source: newSource,
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)
Expand Down Expand Up @@ -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({
series: newVal,
})
this.chart.setOption(
{
series: newVal,
},
false,
true
)
}
}
Expand Down
15 changes: 11 additions & 4 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,17 @@ Vue.use(OverlayScrollbarsPlugin, {
},
})

//vue-echarts-ts
import { plugin } from 'echarts-for-vue'
import * as echarts from 'echarts/core'
Vue.use(plugin, { echarts })
// Echarts
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'

// 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')
Expand Down
29 changes: 19 additions & 10 deletions src/pages/Heightmap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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' }"
style="height: 400px; width: 100%; overflow: hidden"></ECharts>
:init-options="{ renderer: 'canvas' }"
style="height: 400px; width: 100%; overflow: hidden"></e-chart>
</v-col>
</v-row>
<v-row>
Expand Down Expand Up @@ -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
Expand All @@ -374,7 +385,6 @@ interface HeightmapSerie {
@Component({
components: {
Panel,
ECharts: createComponent({ echarts }),
},
})
export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
Expand Down Expand Up @@ -528,8 +538,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
}
get chart(): ECharts | null {
const heightmap = this.$refs.heightmap
return heightmap?.inst ?? null
return this.$refs.heightmap ?? null
}
get profiles() {
Expand Down

0 comments on commit fe92b97

Please sign in to comment.