perf: 图表提及优化（EChart按需加载）

pipipi-pikachu · Sep 16, 2024 · 8a82103 · 8a82103
1 parent 26872cd
commit 8a82103
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 55 deletions.
diff --git a/src/views/components/element/ChartElement/Chart.vue b/src/views/components/element/ChartElement/Chart.vue
@@ -4,11 +4,25 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed, watch } from 'vue'
-import * as echarts from 'echarts'
 import tinycolor from 'tinycolor2'
 import type { ChartData, ChartOptions, ChartType } from '@/types/slides'
 import { getChartOption } from './chartOption'
 
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart, ScatterChart, RadarChart } from 'echarts/charts'
+import { LegendComponent } from 'echarts/components'
+import { SVGRenderer } from 'echarts/renderers'
+
+echarts.use([
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  LegendComponent,
+  SVGRenderer,
+])
+
 const props = defineProps<{
   width: number
   height: number

diff --git a/src/views/components/element/ChartElement/chartOption.ts b/src/views/components/element/ChartElement/chartOption.ts
@@ -1,6 +1,15 @@
-import type * as echarts from 'echarts'
+import type { ComposeOption } from 'echarts/core'
+import type {
+  BarSeriesOption,
+  LineSeriesOption,
+  PieSeriesOption,
+  ScatterSeriesOption,
+  RadarSeriesOption,
+} from 'echarts/charts'
 import type { ChartData, ChartType } from '@/types/slides'
 
+type EChartOption = ComposeOption<BarSeriesOption | LineSeriesOption | PieSeriesOption | ScatterSeriesOption | RadarSeriesOption>
+
 export interface ChartOptionPayload {
   type: ChartType
   data: ChartData
@@ -17,19 +26,13 @@ export const getChartOption = ({
   textColor,
   lineSmooth,
   stack,
-}: ChartOptionPayload): echarts.EChartsOption | null => {
+}: ChartOptionPayload): EChartOption | null => {
   if (type === 'bar') {
     return {
       color: themeColors,
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: data.series.length > 1 ? {
         top: 'bottom',
         textStyle: textColor ? {
@@ -44,7 +47,7 @@ export const getChartOption = ({
         type: 'value',
       },
       series: data.series.map((item, index) => {
-        const seriesItem: echarts.SeriesOption = {
+        const seriesItem: BarSeriesOption = {
           data: item,
           name: data.legends[index],
           type: 'bar',
@@ -63,12 +66,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: data.series.length > 1 ? {
         top: 'bottom',
         textStyle: textColor ? {
@@ -83,7 +80,7 @@ export const getChartOption = ({
         type: 'value',
       },
       series: data.series.map((item, index) => {
-        const seriesItem: echarts.SeriesOption = {
+        const seriesItem: BarSeriesOption = {
           data: item,
           name: data.legends[index],
           type: 'bar',
@@ -102,12 +99,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: data.series.length > 1 ? {
         top: 'bottom',
         textStyle: textColor ? {
@@ -122,7 +113,7 @@ export const getChartOption = ({
         type: 'value',
       },
       series: data.series.map((item, index) => {
-        const seriesItem: echarts.SeriesOption = {
+        const seriesItem: LineSeriesOption = {
           data: item,
           name: data.legends[index],
           type: 'line',
@@ -142,12 +133,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'item',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: {
         top: 'bottom',
         textStyle: textColor ? {
@@ -184,12 +169,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'item',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: {
         top: 'bottom',
         textStyle: textColor ? {
@@ -226,12 +205,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: data.series.length > 1 ? {
         top: 'bottom',
         textStyle: textColor ? {
@@ -247,7 +220,7 @@ export const getChartOption = ({
         type: 'value',
       },
       series: data.series.map((item, index) => {
-        const seriesItem: echarts.SeriesOption = {
+        const seriesItem: LineSeriesOption = {
           data: item,
           name: data.legends[index],
           type: 'line',
@@ -274,12 +247,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'item',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       legend: data.series.length > 1 ? {
         top: 'bottom',
         textStyle: textColor ? {
@@ -310,12 +277,6 @@ export const getChartOption = ({
       textStyle: textColor ? {
         color: textColor,
       } : {},
-      tooltip: {
-        trigger: 'item',
-        axisPointer: {
-          type: 'shadow',
-        },
-      },
       xAxis: {},
       yAxis: {},
       series: [