feat: add rounded corners to weekly bar chart for improved aesthetics and Safari compatibility

This commit is contained in:
jxxghp
2026-06-30 13:37:00 +08:00
parent fa32ac9f48
commit 39ce8d93dd
@@ -9,6 +9,28 @@ import { useI18n } from 'vue-i18n'
const { t } = useI18n() const { t } = useI18n()
const vuetifyTheme = useTheme() const vuetifyTheme = useTheme()
const WEEKLY_BAR_RADIUS = 8
/**
* 将入库统计柱形重绘为仅顶部圆角,规避 Safari 下 ApexCharts 禁用柱形圆角的问题。
*/
function roundWeeklyBarTops(chartContext: { el: HTMLElement }) {
const barPaths = chartContext.el.querySelectorAll<SVGPathElement>('.apexcharts-bar-area')
barPaths.forEach(barPath => {
const { x, y, width, height } = barPath.getBBox()
if (width <= 0 || height <= 0) return
const radius = Math.min(WEEKLY_BAR_RADIUS, width / 2, height / 2)
const right = x + width
const bottom = y + height
barPath.setAttribute(
'd',
`M ${x} ${bottom} L ${x} ${y + radius} Q ${x} ${y} ${x + radius} ${y} L ${right - radius} ${y} Q ${right} ${y} ${right} ${y + radius} L ${right} ${bottom} Z`,
)
})
}
const options = controlledComputed( const options = controlledComputed(
() => vuetifyTheme.name.value, () => vuetifyTheme.name.value,
@@ -31,14 +53,17 @@ const options = controlledComputed(
zoom: { enabled: false, allowMouseWheelZoom: false }, zoom: { enabled: false, allowMouseWheelZoom: false },
selection: { enabled: false }, selection: { enabled: false },
animations: { enabled: false }, animations: { enabled: false },
events: {
mounted: roundWeeklyBarTops,
updated: roundWeeklyBarTops,
},
}, },
plotOptions: { plotOptions: {
bar: { bar: {
borderRadius: 9, borderRadius: WEEKLY_BAR_RADIUS,
borderRadiusApplication: 'end',
distributed: true, distributed: true,
columnWidth: '40%', columnWidth: '40%',
endingShape: 'rounded',
startingShape: 'rounded',
}, },
}, },
stroke: { stroke: {
@@ -107,7 +132,9 @@ const animatedTotalCount = useAnimatedDashboardNumber(totalCount, {
}) })
const animatedTotalCountText = computed(() => formatDashboardCount(animatedTotalCount.value)) const animatedTotalCountText = computed(() => formatDashboardCount(animatedTotalCount.value))
// 调用API接口获取数据近7天数据 /**
* 调用 API 接口获取近 7 天入库数据。
*/
async function getWeeklyData() { async function getWeeklyData() {
try { try {
const res: number[] = await api.get('dashboard/transfer') const res: number[] = await api.get('dashboard/transfer')