github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zxc 2024-09-16 15:25:59 +08:00
parent 26872cd6dc
commit 8a8210356e
2 changed files with 30 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/components/element/ChartElement/Chart.vue
View File

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

69
src/views/components/element/ChartElement/chartOption.ts
View File

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