线图和堆积柱状图组合，如何定义轴的映射关系？-灵析社区
横刀立马007在一个柱线组合图中，有2条线，我希望下面的线与柱子都是对应左轴，顶部的线对应右轴。在 vchart 里应该如何配置呢？
Kapp啊$0920解决方案
在 VChart 中轴和系列可以灵活的配置对应关系，在轴上有配置 seriesId 可以配置为一个系列 id 的数组或者单个系列id
1. 将线的数据分成，如果已经是2份可以不处理，假设他们的id分别是 line0 和 line1 , 同时柱子的id是 bar0
2. 将左轴的 seriesId 设置为 ['line0','bar0']，将右轴的seriesId 设置为['line1']。
代码示例
const spec = {
type: 'common',
seriesField: 'color',
data: [
{
id: 'data0',
values: [
{ x: '周一', type: '早餐', y: 15 },
{ x: '周一', type: '午餐', y: 25 },
{ x: '周二', type: '早餐', y: 12 },
{ x: '周二', type: '午餐', y: 30 },
{ x: '周三', type: '早餐', y: 15 },
{ x: '周三', type: '午餐', y: 24 },
{ x: '周四', type: '早餐', y: 10 },
{ x: '周四', type: '午餐', y: 25 },
{ x: '周五', type: '早餐', y: 13 },
{ x: '周五', type: '午餐', y: 20 },
{ x: '周六', type: '早餐', y: 10 },
{ x: '周六', type: '午餐', y: 22 },
{ x: '周日', type: '早餐', y: 12 },
{ x: '周日', type: '午餐', y: 19 }
]
},
{
id: 'data1',
values: [
{ x: '周一', type: '酒水', y: 22 },
{ x: '周二', type: '酒水', y: 23 },
{ x: '周三', type: '酒水', y: 13 },
{ x: '周四', type: '酒水', y: 12 },
{ x: '周五', type: '酒水', y: 10 },
{ x: '周六', type: '酒水', y: 20 },
{ x: '周日', type: '酒水', y: 10 }
]
},
{
id: 'data2',
values: [
{ x: '周一', type: '饮料', y: 132 },
{ x: '周二', type: '饮料', y: 143 },
{ x: '周三', type: '饮料', y: 143 },
{ x: '周四', type: '饮料', y: 132 },
{ x: '周五', type: '饮料', y: 130 },
{ x: '周六', type: '饮料', y: 130 },
{ x: '周日', type: '饮料', y: 150 },
]
}
],
series: [
{
type: 'bar',
id: 'bar',
dataIndex: 0,
seriesField: 'type',
dataIndex: 0,
xField: ['x', 'type'],
yField: 'y'
},
{
type: 'line',
id: 'line0',
dataId: 'data1',
seriesField: 'type',
xField: 'x',
yField: 'y',
stack: false
},
{
type: 'line',
id: 'line1',
dataId: 'data2',
seriesField: 'type',
xField: 'x',
yField: 'y',
stack: false
}
],
axes: [{ orient: 'left', seriesId: ['line0','bar'] }, { orient: 'right', seriesId: 'line1' }, , { orient: 'bottom', label: { visible: true }, type: 'band' }],
legends: {
visible: true,
orient: 'bottom'
}
};
结果展示
在线效果参考："https://codesandbox.io/s/tooltip-multiline-forked-jrh3t9" (https://link.segmentfault.com/?enc=0Xwego8tHxU6x%2BWEFnhCcA%3D%3D.ufBtGdT6loJJgDC0cASTvnDGlaVBisdm7l5O9ANbbUN6uvAxuOq0qOishXy3NMqEgTzvAzox7Xzx9mRx%2F2MKtA%3D%3D)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/49ae21b0759aa75082c4a54fa19ad233.png)
相关文档
"轴配置" (https://link.segmentfault.com/?enc=CTut54kWqE%2FuVqIhlgJZLw%3D%3D.bzl%2FREhsfxygGpjpf6Ap9Y9ld4HN2hXo%2B%2Fjw4yxCoV2SAX%2BKnXGGEJJracKLxqNlbSyJtZyPhBOV1ywyfxwkYA%3D%3D)