解决方案 Solution
VChart中提供了这样的配置,如果你需要同步轴的范围使0值对齐,可以参考文档中的配置:"https://visactor.io/vchart/option/barChart#axes-linear.sync.a..." (https://link.segmentfault.com/?enc=%2B9o4DiYvtTbx%2FySAFl7hYw%3D%3D.YMEQVQ2a%2BWZ8LtliYzU5g%2BU3h8Sr2lDe0X%2BZHIuFrAa4oVYZLZtiRgQmpiN5rjl9hqlCStdnzM3v25H534WTeAsnhHY7e%2Bpx8sakhuaQnJE%3D)
通过sync指定右轴向左轴对齐即可。需要注意的是:需要为左轴定义id,以便能够在其他轴中指定它。
代码示例 Code Example
spec.axes = [{
orient: 'left',
id: 'left_axis',
seriesIndex: [0],
},
{
orient: 'right',
seriesId: ['line'],
gird: {
visible: false,
},
sync: {
axisId: 'left_axis',
zeroAlign: true
}
},
结果展示 Results
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/28ef6283903517a2c9a17f3448ed4527.png)
Demo: "https://codesandbox.io/s/dual-axis-zero-align-9y49w3?file=/sr..." (https://link.segmentfault.com/?enc=bhg8ERLOafAqrxtGpn31%2FA%3D%3D.0se4qY8p6wTgNM8g%2FWaM2CSDQYynxn4NOL3yCJCMKqj7mtabdNP%2F%2Frt7bwG%2BaP73r%2BggJg2hGcUxFSjhtW9VgnLGK%2BBFuV5A6jKNqlOpkhU%3D)
相关文档 Quote
Axis option:"https://visactor.io/vchart/option/barChart#axes-linear.sync.a..." (https://link.segmentfault.com/?enc=XIVDZSbVsB6RTnfogJ%2BJHQ%3D%3D.ypSd5V5AjtlCN4clcm1hlxWm6AFa93WMfiJKZsnG06%2FPMS2lQ77EggzV%2FzOown4gDW4hKtd2O0WujVaJ22FjjkbU5kshRrx6fj1rIeOAU48%3D)
github:"https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=zsvdon1e4GWsYbi21g69ww%3D%3D.D4PlGu5HkceHfewjFEf1JirVIXVq9JfgcV%2F9kqpUbKoMAY7Cd83%2BSuLLMT9eRZo7)