7 changed files with 1627 additions and 322 deletions
File diff suppressed because it is too large
@ -0,0 +1,257 @@ |
|||
<template> |
|||
<div ref="chartContainer" class="comparison-bar-chart-container"></div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' |
|||
import * as echarts from 'echarts' |
|||
|
|||
// 定义组件属性 |
|||
interface Props { |
|||
chartData?: Array<{ |
|||
name: string |
|||
currentValue: number |
|||
previousValue: number |
|||
}> |
|||
title?: string |
|||
currentColor?: string |
|||
previousColor?: string |
|||
showYAxis?: boolean |
|||
yAxisName?: string |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<Props>(), { |
|||
chartData: () => [], |
|||
title: '', |
|||
currentColor: '#1296db', |
|||
previousColor: '#ff6b6b', |
|||
showYAxis: true, |
|||
yAxisName: '数值' |
|||
}) |
|||
|
|||
// 图表容器引用和实例 |
|||
const chartContainer = ref<HTMLDivElement | null>(null) |
|||
let chartInstance: echarts.ECharts | null = null |
|||
|
|||
// 初始化图表 |
|||
const initChart = () => { |
|||
if (chartContainer.value) { |
|||
chartInstance = echarts.init(chartContainer.value) |
|||
updateChart() |
|||
} |
|||
} |
|||
|
|||
// 更新图表 |
|||
const updateChart = () => { |
|||
if (!chartInstance || !props.chartData.length) return |
|||
|
|||
const option = { |
|||
title: { |
|||
text: props.title, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
}, |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
}, |
|||
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
|||
borderColor: 'rgba(30, 120, 255, 0.4)', |
|||
borderWidth: 1, |
|||
textStyle: { |
|||
color: '#fff' |
|||
}, |
|||
formatter: function (params: any) { |
|||
const currentData = params[0] |
|||
const previousData = params[1] |
|||
|
|||
const growthRate = previousData.value > 0 |
|||
? ((currentData.value - previousData.value) / previousData.value * 100).toFixed(2) |
|||
: '∞' |
|||
|
|||
return `${currentData.name}<br/> |
|||
${currentData.seriesName}: ${currentData.value}<br/> |
|||
${previousData.seriesName}: ${previousData.value}<br/> |
|||
增长率: ${growthRate}%` |
|||
} |
|||
}, |
|||
legend: { |
|||
data: ['本期', '上期'], |
|||
textStyle: { |
|||
color: '#fff' |
|||
}, |
|||
top: 30 |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
top: '25%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: props.chartData.map(item => item.name), |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: 'rgba(255, 255, 255, 0.7)', |
|||
rotate: 0, |
|||
interval: 0, |
|||
margin: 15 |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
show: props.showYAxis, |
|||
name: props.yAxisName, |
|||
nameTextStyle: { |
|||
color: 'rgba(255, 255, 255, 0.7)' |
|||
}, |
|||
axisLine: { |
|||
show: props.showYAxis, |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: props.showYAxis, |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.1)' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: props.showYAxis, |
|||
color: 'rgba(255, 255, 255, 0.7)' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '当前期', |
|||
type: 'bar', |
|||
data: props.chartData.map(item => item.currentValue), |
|||
barWidth: '35%', |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: props.currentColor |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: props.currentColor + '80' |
|||
} |
|||
] |
|||
}, |
|||
borderRadius: [4, 4, 0, 0] |
|||
}, |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: props.currentColor |
|||
} |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
color: '#fff', |
|||
formatter: '{c}', |
|||
fontSize: 12 |
|||
} |
|||
}, |
|||
{ |
|||
name: '对比期', |
|||
type: 'bar', |
|||
data: props.chartData.map(item => item.previousValue), |
|||
barWidth: '35%', |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: props.previousColor |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: props.previousColor + '80' |
|||
} |
|||
] |
|||
}, |
|||
borderRadius: [4, 4, 0, 0] |
|||
}, |
|||
emphasis: { |
|||
itemStyle: { |
|||
color: props.previousColor |
|||
} |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
color: '#fff', |
|||
formatter: '{c}', |
|||
fontSize: 12 |
|||
} |
|||
} |
|||
] |
|||
} |
|||
|
|||
chartInstance.setOption(option) |
|||
} |
|||
|
|||
// 监听数据变化 |
|||
watch( |
|||
() => props.chartData, |
|||
() => { |
|||
updateChart() |
|||
}, |
|||
{ deep: true } |
|||
) |
|||
|
|||
// 窗口大小改变时重绘图表 |
|||
const handleResize = () => { |
|||
if (chartInstance) { |
|||
chartInstance.resize() |
|||
} |
|||
} |
|||
|
|||
// 组件挂载时初始化图表 |
|||
onMounted(() => { |
|||
setTimeout(() => { |
|||
initChart() |
|||
}, 2000) |
|||
window.addEventListener('resize', handleResize) |
|||
}) |
|||
|
|||
// 组件销毁前清理资源 |
|||
onBeforeUnmount(() => { |
|||
window.removeEventListener('resize', handleResize) |
|||
if (chartInstance) { |
|||
chartInstance.dispose() |
|||
chartInstance = null |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.comparison-bar-chart-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue