xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 趋势最大值锚定

master
xjs 2025-06-13 10:19:42 +08:00
parent 8d43083d71
commit e28acf474d
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/components/chartsComponents/OperatingTrendsChart.vue
View File

@ -233,6 +233,19 @@ function svgToPercentEncodedDataUrl(svg: string) {
// 初始化图例图标
initLegendIcons();
// 计算y轴最大值
const calculateMaxValue = () => {
let maxValue = 0;
chartData.value.seriesData.forEach(series => {
const seriesMax = Math.max(...series.data);
maxValue = Math.max(maxValue, seriesMax);
});
// 将最大值向上取整到最接近的100的倍数
return Math.ceil(maxValue / 100) * 100;
};
const maxYValue = calculateMaxValue();
// 按钮的SVG背景 - 使用Base64编码
const buttonSvgBase64 = encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="72" height="28" viewBox="0 0 72 28"><defs><filter id="master_svg0_104_04023" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8" dx="0"/><feGaussianBlur stdDeviation="6"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.08237092196941376 0 0 0 0 0.17847032845020294 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-8" dx="0"/><feGaussianBlur stdDeviation="6"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.08235294371843338 0 0 0 0 0.18039216101169586 0 0 0 1 0"/><feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/></filter></defs><g><g filter="url(#master_svg0_104_04023)"><path d="M0,14.5113C0,8.31958,0,6.07937,0.871948,4.36808C1.63894,2.86278,2.86278,1.63893,4.36808,0.871948C6.07937,0,8.31958,0,14.5113,0L72,0L72,13.4887C72,19.6804,72,21.9206,71.1281,23.6319C70.3611,25.1372,69.1372,26.3611,67.6319,27.1281C65.9206,28,63.6804,28,57.4887,28L0,28L0,14.5113Z" fill="#061E3A" fill-opacity="1"/></g><g><path d="M0,14.5113C0,8.31958,0,6.07937,0.871948,4.36808C1.63894,2.86278,2.86278,1.63893,4.36808,0.871948C6.07937,0,8.31958,0,14.5113,0L72,0L72,13.4887C72,19.6804,72,21.9206,71.1281,23.6319C70.3611,25.1372,69.1372,26.3611,67.6319,27.1281C65.9206,28,63.6804,28,57.4887,28L0,28L0,14.5113ZM14.5113,1L71,1L71,13.4887Q71,18.6574,70.8935,20.1702Q70.753,22.1653,70.237,23.1779Q69.2045,25.2045,67.1779,26.237Q66.1653,26.753,64.1702,26.8935Q62.6574,27,57.4887,27L1,27L1,14.5113Q1,9.34262,1.10652,7.82977Q1.247,5.83468,1.76295,4.82207Q2.79553,2.79553,4.82207,1.76295Q5.83468,1.247,7.82977,1.10652Q9.34262,1,14.5113,1Z" fill-rule="evenodd" fill="#2A8EFE" fill-opacity="1"/></g></g></svg>
@ -431,8 +444,8 @@ function svgToPercentEncodedDataUrl(svg: string) {
},
type: "value",
min: 0,
max: 500,
interval: 100,
max: maxYValue,
interval: Math.ceil(maxYValue / 5),
axisLabel: {
color: "#C0EEFF",
fontSize: 14,
@ -457,10 +470,9 @@ function svgToPercentEncodedDataUrl(svg: string) {
{
type: "bar",
id: "axisOverlayBar",
// zlevel: 1,
silent: false,
barWidth: "100%",
data: chartData.value.dates.map(() => 500), // 使用y轴的最大值
data: chartData.value.dates.map(() => maxYValue),
itemStyle: {
color: "transparent",
},
@ -501,11 +513,10 @@ function svgToPercentEncodedDataUrl(svg: string) {
type: "bar",
barWidth: 40,
barGap: "-100%",
// zlevel: 10,
silent: true,
animation: true,
data: chartData.value.dates.map((_: any, index: number) => {
return index === dataIndex ? 500 : "-";
return index === dataIndex ? maxYValue : "-";
}),
itemStyle: {
color: {