格式化文档
This commit is contained in:
@@ -1,371 +1,377 @@
|
||||
<!-- 折线图，支持多组数据，支持阶梯式动画效果 -->
|
||||
<template>
|
||||
<div
|
||||
ref="chartRef"
|
||||
class="relative w-[calc(100%+10px)]"
|
||||
:style="{ height: props.height }"
|
||||
v-loading="props.loading"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
ref="chartRef"
|
||||
class="relative w-[calc(100%+10px)]"
|
||||
:style="{ height: props.height }"
|
||||
v-loading="props.loading"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { graphic, type EChartsOption } from '@/plugins/echarts'
|
||||
import { getCssVar, hexToRgba } from '@/utils/ui'
|
||||
import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
|
||||
import type { LineChartProps, LineDataItem } from '@/types/component/chart'
|
||||
import { graphic, type EChartsOption } from '@/plugins/echarts'
|
||||
import { getCssVar, hexToRgba } from '@/utils/ui'
|
||||
import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
|
||||
import type { LineChartProps, LineDataItem } from '@/types/component/chart'
|
||||
|
||||
defineOptions({ name: 'ArtLineChart' })
|
||||
defineOptions({ name: 'ArtLineChart' })
|
||||
|
||||
const props = withDefaults(defineProps<LineChartProps>(), {
|
||||
// 基础配置
|
||||
height: useChartOps().chartHeight,
|
||||
loading: false,
|
||||
isEmpty: false,
|
||||
colors: () => useChartOps().colors,
|
||||
const props = withDefaults(defineProps<LineChartProps>(), {
|
||||
// 基础配置
|
||||
height: useChartOps().chartHeight,
|
||||
loading: false,
|
||||
isEmpty: false,
|
||||
colors: () => useChartOps().colors,
|
||||
|
||||
// 数据配置
|
||||
data: () => [0, 0, 0, 0, 0, 0, 0],
|
||||
xAxisData: () => [],
|
||||
lineWidth: 2.5,
|
||||
showAreaColor: false,
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
animationDelay: 200,
|
||||
// 数据配置
|
||||
data: () => [0, 0, 0, 0, 0, 0, 0],
|
||||
xAxisData: () => [],
|
||||
lineWidth: 2.5,
|
||||
showAreaColor: false,
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
animationDelay: 200,
|
||||
|
||||
// 轴线显示配置
|
||||
showAxisLabel: true,
|
||||
showAxisLine: true,
|
||||
showSplitLine: true,
|
||||
// 轴线显示配置
|
||||
showAxisLabel: true,
|
||||
showAxisLine: true,
|
||||
showSplitLine: true,
|
||||
|
||||
// 交互配置
|
||||
showTooltip: true,
|
||||
showLegend: false,
|
||||
legendPosition: 'bottom'
|
||||
})
|
||||
// 交互配置
|
||||
showTooltip: true,
|
||||
showLegend: false,
|
||||
legendPosition: 'bottom'
|
||||
})
|
||||
|
||||
// 动画状态管理
|
||||
const isAnimating = ref(false)
|
||||
const animationTimers = ref<number[]>([])
|
||||
const animatedData = ref<number[] | LineDataItem[]>([])
|
||||
// 动画状态管理
|
||||
const isAnimating = ref(false)
|
||||
const animationTimers = ref<number[]>([])
|
||||
const animatedData = ref<number[] | LineDataItem[]>([])
|
||||
|
||||
// 清理所有定时器
|
||||
const clearAnimationTimers = () => {
|
||||
animationTimers.value.forEach((timer) => clearTimeout(timer))
|
||||
animationTimers.value = []
|
||||
}
|
||||
// 清理所有定时器
|
||||
const clearAnimationTimers = () => {
|
||||
animationTimers.value.forEach((timer) => clearTimeout(timer))
|
||||
animationTimers.value = []
|
||||
}
|
||||
|
||||
// 判断是否为多数据（使用 VueUse 的 computedEager 优化）
|
||||
const isMultipleData = computed(() => {
|
||||
return (
|
||||
Array.isArray(props.data) &&
|
||||
props.data.length > 0 &&
|
||||
typeof props.data[0] === 'object' &&
|
||||
'name' in props.data[0]
|
||||
)
|
||||
})
|
||||
// 判断是否为多数据（使用 VueUse 的 computedEager 优化）
|
||||
const isMultipleData = computed(() => {
|
||||
return (
|
||||
Array.isArray(props.data) &&
|
||||
props.data.length > 0 &&
|
||||
typeof props.data[0] === 'object' &&
|
||||
'name' in props.data[0]
|
||||
)
|
||||
})
|
||||
|
||||
// 缓存计算的最大值，避免重复计算
|
||||
const maxValue = computed(() => {
|
||||
if (isMultipleData.value) {
|
||||
const multiData = props.data as LineDataItem[]
|
||||
return multiData.reduce((max, item) => {
|
||||
if (item.data?.length) {
|
||||
const itemMax = Math.max(...item.data)
|
||||
return Math.max(max, itemMax)
|
||||
}
|
||||
return max
|
||||
}, 0)
|
||||
} else {
|
||||
const singleData = props.data as number[]
|
||||
return singleData?.length ? Math.max(...singleData) : 0
|
||||
}
|
||||
})
|
||||
// 缓存计算的最大值，避免重复计算
|
||||
const maxValue = computed(() => {
|
||||
if (isMultipleData.value) {
|
||||
const multiData = props.data as LineDataItem[]
|
||||
return multiData.reduce((max, item) => {
|
||||
if (item.data?.length) {
|
||||
const itemMax = Math.max(...item.data)
|
||||
return Math.max(max, itemMax)
|
||||
}
|
||||
return max
|
||||
}, 0)
|
||||
} else {
|
||||
const singleData = props.data as number[]
|
||||
return singleData?.length ? Math.max(...singleData) : 0
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化动画数据（优化：减少条件判断）
|
||||
const initAnimationData = (): number[] | LineDataItem[] => {
|
||||
if (isMultipleData.value) {
|
||||
const multiData = props.data as LineDataItem[]
|
||||
return multiData.map((item) => ({
|
||||
...item,
|
||||
data: Array(item.data.length).fill(0)
|
||||
}))
|
||||
}
|
||||
const singleData = props.data as number[]
|
||||
return Array(singleData.length).fill(0)
|
||||
}
|
||||
// 初始化动画数据（优化：减少条件判断）
|
||||
const initAnimationData = (): number[] | LineDataItem[] => {
|
||||
if (isMultipleData.value) {
|
||||
const multiData = props.data as LineDataItem[]
|
||||
return multiData.map((item) => ({
|
||||
...item,
|
||||
data: Array(item.data.length).fill(0)
|
||||
}))
|
||||
}
|
||||
const singleData = props.data as number[]
|
||||
return Array(singleData.length).fill(0)
|
||||
}
|
||||
|
||||
// 复制真实数据（优化：使用结构化克隆）
|
||||
const copyRealData = (): number[] | LineDataItem[] => {
|
||||
if (isMultipleData.value) {
|
||||
return (props.data as LineDataItem[]).map((item) => ({ ...item, data: [...item.data] }))
|
||||
}
|
||||
return [...(props.data as number[])]
|
||||
}
|
||||
// 复制真实数据（优化：使用结构化克隆）
|
||||
const copyRealData = (): number[] | LineDataItem[] => {
|
||||
if (isMultipleData.value) {
|
||||
return (props.data as LineDataItem[]).map((item) => ({ ...item, data: [...item.data] }))
|
||||
}
|
||||
return [...(props.data as number[])]
|
||||
}
|
||||
|
||||
// 获取颜色配置（优化：缓存主题色）
|
||||
const primaryColor = computed(() => getCssVar('--el-color-primary'))
|
||||
// 获取颜色配置（优化：缓存主题色）
|
||||
const primaryColor = computed(() => getCssVar('--el-color-primary'))
|
||||
|
||||
const getColor = (customColor?: string, index?: number): string => {
|
||||
if (customColor) return customColor
|
||||
if (index !== undefined) return props.colors![index % props.colors!.length]
|
||||
return primaryColor.value
|
||||
}
|
||||
const getColor = (customColor?: string, index?: number): string => {
|
||||
if (customColor) return customColor
|
||||
if (index !== undefined) return props.colors![index % props.colors!.length]
|
||||
return primaryColor.value
|
||||
}
|
||||
|
||||
// 生成区域样式
|
||||
const generateAreaStyle = (item: LineDataItem, color: string) => {
|
||||
// 如果有 areaStyle 配置，或者显式开启了区域颜色，则显示区域样式
|
||||
if (!item.areaStyle && !item.showAreaColor && !props.showAreaColor) return undefined
|
||||
// 生成区域样式
|
||||
const generateAreaStyle = (item: LineDataItem, color: string) => {
|
||||
// 如果有 areaStyle 配置，或者显式开启了区域颜色，则显示区域样式
|
||||
if (!item.areaStyle && !item.showAreaColor && !props.showAreaColor) return undefined
|
||||
|
||||
const areaConfig = item.areaStyle || {}
|
||||
if (areaConfig.custom) return areaConfig.custom
|
||||
const areaConfig = item.areaStyle || {}
|
||||
if (areaConfig.custom) return areaConfig.custom
|
||||
|
||||
return {
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color, areaConfig.startOpacity || 0.2).rgba
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color, areaConfig.endOpacity || 0.02).rgba
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
return {
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color, areaConfig.startOpacity || 0.2).rgba
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color, areaConfig.endOpacity || 0.02).rgba
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
// 生成单数据区域样式
|
||||
const generateSingleAreaStyle = () => {
|
||||
if (!props.showAreaColor) return undefined
|
||||
// 生成单数据区域样式
|
||||
const generateSingleAreaStyle = () => {
|
||||
if (!props.showAreaColor) return undefined
|
||||
|
||||
const color = getColor(props.colors[0])
|
||||
return {
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color, 0.2).rgba
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color, 0.02).rgba
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
const color = getColor(props.colors[0])
|
||||
return {
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color, 0.2).rgba
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color, 0.02).rgba
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
// 创建系列配置
|
||||
const createSeriesItem = (config: {
|
||||
name?: string
|
||||
data: number[]
|
||||
color?: string
|
||||
smooth?: boolean
|
||||
symbol?: string
|
||||
symbolSize?: number
|
||||
lineWidth?: number
|
||||
areaStyle?: any
|
||||
}) => {
|
||||
return {
|
||||
name: config.name,
|
||||
data: config.data,
|
||||
type: 'line' as const,
|
||||
color: config.color,
|
||||
smooth: config.smooth ?? props.smooth,
|
||||
symbol: config.symbol ?? props.symbol,
|
||||
symbolSize: config.symbolSize ?? props.symbolSize,
|
||||
lineStyle: {
|
||||
width: config.lineWidth ?? props.lineWidth,
|
||||
color: config.color
|
||||
},
|
||||
areaStyle: config.areaStyle,
|
||||
emphasis: {
|
||||
focus: 'series' as const,
|
||||
lineStyle: {
|
||||
width: (config.lineWidth ?? props.lineWidth) + 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 创建系列配置
|
||||
const createSeriesItem = (config: {
|
||||
name?: string
|
||||
data: number[]
|
||||
color?: string
|
||||
smooth?: boolean
|
||||
symbol?: string
|
||||
symbolSize?: number
|
||||
lineWidth?: number
|
||||
areaStyle?: any
|
||||
}) => {
|
||||
return {
|
||||
name: config.name,
|
||||
data: config.data,
|
||||
type: 'line' as const,
|
||||
color: config.color,
|
||||
smooth: config.smooth ?? props.smooth,
|
||||
symbol: config.symbol ?? props.symbol,
|
||||
symbolSize: config.symbolSize ?? props.symbolSize,
|
||||
lineStyle: {
|
||||
width: config.lineWidth ?? props.lineWidth,
|
||||
color: config.color
|
||||
},
|
||||
areaStyle: config.areaStyle,
|
||||
emphasis: {
|
||||
focus: 'series' as const,
|
||||
lineStyle: {
|
||||
width: (config.lineWidth ?? props.lineWidth) + 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 生成图表配置
|
||||
const generateChartOptions = (isInitial = false): EChartsOption => {
|
||||
const options: EChartsOption = {
|
||||
animation: true,
|
||||
animationDuration: isInitial ? 0 : 1300,
|
||||
animationDurationUpdate: isInitial ? 0 : 1300,
|
||||
grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
|
||||
top: 15,
|
||||
right: 15,
|
||||
left: 0
|
||||
}),
|
||||
tooltip: props.showTooltip ? getTooltipStyle() : undefined,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: props.xAxisData,
|
||||
axisTick: getAxisTickStyle(),
|
||||
axisLine: getAxisLineStyle(props.showAxisLine),
|
||||
axisLabel: getAxisLabelStyle(props.showAxisLabel)
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: maxValue.value,
|
||||
axisLabel: getAxisLabelStyle(props.showAxisLabel),
|
||||
axisLine: getAxisLineStyle(props.showAxisLine),
|
||||
splitLine: getSplitLineStyle(props.showSplitLine)
|
||||
}
|
||||
}
|
||||
// 生成图表配置
|
||||
const generateChartOptions = (isInitial = false): EChartsOption => {
|
||||
const options: EChartsOption = {
|
||||
animation: true,
|
||||
animationDuration: isInitial ? 0 : 1300,
|
||||
animationDurationUpdate: isInitial ? 0 : 1300,
|
||||
grid: getGridWithLegend(
|
||||
props.showLegend && isMultipleData.value,
|
||||
props.legendPosition,
|
||||
{
|
||||
top: 15,
|
||||
right: 15,
|
||||
left: 0
|
||||
}
|
||||
),
|
||||
tooltip: props.showTooltip ? getTooltipStyle() : undefined,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: props.xAxisData,
|
||||
axisTick: getAxisTickStyle(),
|
||||
axisLine: getAxisLineStyle(props.showAxisLine),
|
||||
axisLabel: getAxisLabelStyle(props.showAxisLabel)
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: maxValue.value,
|
||||
axisLabel: getAxisLabelStyle(props.showAxisLabel),
|
||||
axisLine: getAxisLineStyle(props.showAxisLine),
|
||||
splitLine: getSplitLineStyle(props.showSplitLine)
|
||||
}
|
||||
}
|
||||
|
||||
// 添加图例配置
|
||||
if (props.showLegend && isMultipleData.value) {
|
||||
options.legend = getLegendStyle(props.legendPosition)
|
||||
}
|
||||
// 添加图例配置
|
||||
if (props.showLegend && isMultipleData.value) {
|
||||
options.legend = getLegendStyle(props.legendPosition)
|
||||
}
|
||||
|
||||
// 生成系列数据
|
||||
if (isMultipleData.value) {
|
||||
const multiData = animatedData.value as LineDataItem[]
|
||||
options.series = multiData.map((item, index) => {
|
||||
const itemColor = getColor(props.colors[index], index)
|
||||
const areaStyle = generateAreaStyle(item, itemColor)
|
||||
// 生成系列数据
|
||||
if (isMultipleData.value) {
|
||||
const multiData = animatedData.value as LineDataItem[]
|
||||
options.series = multiData.map((item, index) => {
|
||||
const itemColor = getColor(props.colors[index], index)
|
||||
const areaStyle = generateAreaStyle(item, itemColor)
|
||||
|
||||
return createSeriesItem({
|
||||
name: item.name,
|
||||
data: item.data,
|
||||
color: itemColor,
|
||||
smooth: item.smooth,
|
||||
symbol: item.symbol,
|
||||
lineWidth: item.lineWidth,
|
||||
areaStyle
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 单数据情况
|
||||
const singleData = animatedData.value as number[]
|
||||
const computedColor = getColor(props.colors[0])
|
||||
const areaStyle = generateSingleAreaStyle()
|
||||
return createSeriesItem({
|
||||
name: item.name,
|
||||
data: item.data,
|
||||
color: itemColor,
|
||||
smooth: item.smooth,
|
||||
symbol: item.symbol,
|
||||
lineWidth: item.lineWidth,
|
||||
areaStyle
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 单数据情况
|
||||
const singleData = animatedData.value as number[]
|
||||
const computedColor = getColor(props.colors[0])
|
||||
const areaStyle = generateSingleAreaStyle()
|
||||
|
||||
options.series = [
|
||||
createSeriesItem({
|
||||
data: singleData,
|
||||
color: computedColor,
|
||||
areaStyle
|
||||
})
|
||||
]
|
||||
}
|
||||
options.series = [
|
||||
createSeriesItem({
|
||||
data: singleData,
|
||||
color: computedColor,
|
||||
areaStyle
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
return options
|
||||
}
|
||||
return options
|
||||
}
|
||||
|
||||
// 更新图表
|
||||
const updateChartOptions = (options: EChartsOption) => {
|
||||
initChart(options)
|
||||
}
|
||||
// 更新图表
|
||||
const updateChartOptions = (options: EChartsOption) => {
|
||||
initChart(options)
|
||||
}
|
||||
|
||||
// 初始化动画函数（优化：统一定时器管理，减少内存泄漏风险）
|
||||
const initChartWithAnimation = () => {
|
||||
clearAnimationTimers()
|
||||
isAnimating.value = true
|
||||
// 初始化动画函数（优化：统一定时器管理，减少内存泄漏风险）
|
||||
const initChartWithAnimation = () => {
|
||||
clearAnimationTimers()
|
||||
isAnimating.value = true
|
||||
|
||||
// 初始化为0值数据
|
||||
animatedData.value = initAnimationData()
|
||||
updateChartOptions(generateChartOptions(true))
|
||||
// 初始化为0值数据
|
||||
animatedData.value = initAnimationData()
|
||||
updateChartOptions(generateChartOptions(true))
|
||||
|
||||
if (isMultipleData.value) {
|
||||
// 多数据阶梯式动画
|
||||
const multiData = props.data as LineDataItem[]
|
||||
const currentAnimatedData = animatedData.value as LineDataItem[]
|
||||
if (isMultipleData.value) {
|
||||
// 多数据阶梯式动画
|
||||
const multiData = props.data as LineDataItem[]
|
||||
const currentAnimatedData = animatedData.value as LineDataItem[]
|
||||
|
||||
multiData.forEach((item, index) => {
|
||||
const timer = window.setTimeout(
|
||||
() => {
|
||||
currentAnimatedData[index] = { ...item, data: [...item.data] }
|
||||
animatedData.value = [...currentAnimatedData]
|
||||
updateChartOptions(generateChartOptions(false))
|
||||
},
|
||||
index * props.animationDelay + 100
|
||||
)
|
||||
multiData.forEach((item, index) => {
|
||||
const timer = window.setTimeout(
|
||||
() => {
|
||||
currentAnimatedData[index] = { ...item, data: [...item.data] }
|
||||
animatedData.value = [...currentAnimatedData]
|
||||
updateChartOptions(generateChartOptions(false))
|
||||
},
|
||||
index * props.animationDelay + 100
|
||||
)
|
||||
|
||||
animationTimers.value.push(timer)
|
||||
})
|
||||
animationTimers.value.push(timer)
|
||||
})
|
||||
|
||||
// 标记动画完成
|
||||
const totalDelay = (multiData.length - 1) * props.animationDelay + 1500
|
||||
const finishTimer = window.setTimeout(() => {
|
||||
isAnimating.value = false
|
||||
}, totalDelay)
|
||||
animationTimers.value.push(finishTimer)
|
||||
} else {
|
||||
// 单数据简单动画 - 使用 nextTick 确保初始状态已渲染
|
||||
nextTick(() => {
|
||||
animatedData.value = copyRealData()
|
||||
updateChartOptions(generateChartOptions(false))
|
||||
isAnimating.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
// 标记动画完成
|
||||
const totalDelay = (multiData.length - 1) * props.animationDelay + 1500
|
||||
const finishTimer = window.setTimeout(() => {
|
||||
isAnimating.value = false
|
||||
}, totalDelay)
|
||||
animationTimers.value.push(finishTimer)
|
||||
} else {
|
||||
// 单数据简单动画 - 使用 nextTick 确保初始状态已渲染
|
||||
nextTick(() => {
|
||||
animatedData.value = copyRealData()
|
||||
updateChartOptions(generateChartOptions(false))
|
||||
isAnimating.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 空数据检查函数
|
||||
const checkIsEmpty = () => {
|
||||
// 检查单数据情况
|
||||
if (Array.isArray(props.data) && typeof props.data[0] === 'number') {
|
||||
const singleData = props.data as number[]
|
||||
return !singleData.length || singleData.every((val) => val === 0)
|
||||
}
|
||||
// 空数据检查函数
|
||||
const checkIsEmpty = () => {
|
||||
// 检查单数据情况
|
||||
if (Array.isArray(props.data) && typeof props.data[0] === 'number') {
|
||||
const singleData = props.data as number[]
|
||||
return !singleData.length || singleData.every((val) => val === 0)
|
||||
}
|
||||
|
||||
// 检查多数据情况
|
||||
if (Array.isArray(props.data) && typeof props.data[0] === 'object') {
|
||||
const multiData = props.data as LineDataItem[]
|
||||
return (
|
||||
!multiData.length ||
|
||||
multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
|
||||
)
|
||||
}
|
||||
// 检查多数据情况
|
||||
if (Array.isArray(props.data) && typeof props.data[0] === 'object') {
|
||||
const multiData = props.data as LineDataItem[]
|
||||
return (
|
||||
!multiData.length ||
|
||||
multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
|
||||
)
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 使用新的图表组件抽象
|
||||
const {
|
||||
chartRef,
|
||||
initChart,
|
||||
getAxisLineStyle,
|
||||
getAxisLabelStyle,
|
||||
getAxisTickStyle,
|
||||
getSplitLineStyle,
|
||||
getTooltipStyle,
|
||||
getLegendStyle,
|
||||
getGridWithLegend,
|
||||
isEmpty
|
||||
} = useChartComponent({
|
||||
props,
|
||||
checkEmpty: checkIsEmpty,
|
||||
watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
|
||||
onVisible: () => {
|
||||
// 当图表变为可见时，检查是否为空数据
|
||||
if (!isEmpty.value) {
|
||||
initChartWithAnimation()
|
||||
}
|
||||
},
|
||||
generateOptions: () => generateChartOptions(false)
|
||||
})
|
||||
// 使用新的图表组件抽象
|
||||
const {
|
||||
chartRef,
|
||||
initChart,
|
||||
getAxisLineStyle,
|
||||
getAxisLabelStyle,
|
||||
getAxisTickStyle,
|
||||
getSplitLineStyle,
|
||||
getTooltipStyle,
|
||||
getLegendStyle,
|
||||
getGridWithLegend,
|
||||
isEmpty
|
||||
} = useChartComponent({
|
||||
props,
|
||||
checkEmpty: checkIsEmpty,
|
||||
watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
|
||||
onVisible: () => {
|
||||
// 当图表变为可见时，检查是否为空数据
|
||||
if (!isEmpty.value) {
|
||||
initChartWithAnimation()
|
||||
}
|
||||
},
|
||||
generateOptions: () => generateChartOptions(false)
|
||||
})
|
||||
|
||||
// 图表渲染函数（优化：防止动画期间重复触发）
|
||||
const renderChart = () => {
|
||||
if (!isAnimating.value && !isEmpty.value) {
|
||||
initChartWithAnimation()
|
||||
}
|
||||
}
|
||||
// 图表渲染函数（优化：防止动画期间重复触发）
|
||||
const renderChart = () => {
|
||||
if (!isAnimating.value && !isEmpty.value) {
|
||||
initChartWithAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 VueUse 的 watchDebounced 优化数据监听（避免频繁更新）
|
||||
watch([() => props.data, () => props.xAxisData, () => props.colors], renderChart, { deep: true })
|
||||
// 使用 VueUse 的 watchDebounced 优化数据监听（避免频繁更新）
|
||||
watch([() => props.data, () => props.xAxisData, () => props.colors], renderChart, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearAnimationTimers()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
clearAnimationTimers()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user