解决方案 Solution
轴范围的配置在 "axes" 配置项里，并不是在 "series" 上。你可以根据需要配置最小值（"min"）和最大值（"max"）, 例如：
axes: [
{ orient: 'left', max: 100 },
{ orient: 'right', min:0, max:2 },
],
代码示例 Code Example
代码参考 Code Example
const spec = {
type: 'common',
seriesField: 'color',
data: [
{
id: 'id0',
values: [
{ x: '2021-10-22', type: 'A', y: 10 },
{ x: '2021-10-23', type: 'B', y: 22 },
]
},
{
id: 'id1',
values: [
{ x: '2021-10-22', type: 'TA', y: 0.5 },
{ x: '2021-10-22', type: 'TB', y: 1.1 },
{ x: '2021-10-23', type: 'TA', y: 1 },
{ x: '2021-10-23', type: 'TB', y: 1.6 },
]
}
],
series: [
{
type: 'bar',
id: 'bar',
dataIndex: 0,
label: { visible: true ,position:'inside'},
seriesField: 'type',
xField: 'x',
yField: 'y'
},
{
type: 'line',
id: 'line',
dataIndex: 1,
label: { visible: true },
seriesField: 'type',
xField: 'x',
yField: 'y',
stack: false
}
],
axes: [
{ orient: 'left', seriesIndex: [0], max: 100 },
{ orient: 'right', seriesId: ['line'], gird: { visible: false }, min:0, max:2 },
{ orient: 'bottom', label: { visible: true }, type: 'band' }
],
};
结果展示 Results
在线效果参考："https://codesandbox.io/s/dual-axis-custom-range-9r93h9" (https://link.segmentfault.com/?enc=mqrCnXId2iiU2LmHL9vM8Q%3D%3D.%2Bh%2FhLsekhpoeKVO%2FVt0KVffm2txM4UXn3Wk34R7IY8ymW%2BK%2BSHLvwc7tA6E7XAgIgn1%2B%2FZNsIOqeDC%2F516%2BWQw%3D%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/4f2ec5f5880f14190c9efc3d6d788152.png)
相关文档 Related Documentation
更多 demo："https://visactor.io/vchart/demo/combination/dual-axis" (https://link.segmentfault.com/?enc=b3YUQKEAqP3nOrUTOXIwpg%3D%3D.A0i5lzf2x0fbPkoLECxTPRWFCNgiJmUGl%2Fg1ZrXwhXFGuYDayta6%2F1gvQL7tP2S7KryDOZQ95wUYrfhnulFCKA%3D%3D)
轴教程："https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts..." (https://link.segmentfault.com/?enc=Ejb8cPJjWBNu3iamnajBwA%3D%3D.GJNre43wDpI9JkRp9RlUfDStMt6UvvzNPNVF98k1pXXwJvL0ArEcrG64pyVmdpbzt0%2FMQAdZylUv0xWy9QyiaEtPKo2ePiGcGbE9Lumy9Zc%3D)
相关api："https://visactor.io/vchart/option/lineChart#axes-linear.min" (https://link.segmentfault.com/?enc=4fynpc1OFyaiTq20RoispQ%3D%3D.Ml1m7ttHVl3UoUUGpY%2FAsN8by%2FWMEzS4sEQI4zt%2F1jf5so3oqPOk8d3zstTc5cINfnXXENPJkyuhQku0kbI%2Frg%3D%3D)
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=aGgcWoUOTc6CYUMwyvxIAg%3D%3D.uWJu1xFd3MyxA7dcCUuYj8gm%2BaqGTh526ikL3EvJLaGD4OY7TZjx9qwti9I6Axzt)
导师小jio
Frank的私人司机