vchart多线图能否限制默认渲染的线条?

61 阅读1分钟

问题标题

vchart多线图能否限制默认渲染的线条?

问题描述

在使用vchart的时候,我碰到了一个问题。我正在制作一个多线图,我想问一下这个多线图可以限制默认渲染的线条吗?比如我只想让它默认渲染一条线条,这个可以实现吗?

解决方案

可以实现这个功能。需要使用配置项legends.defaultSelected来设置图例初始化时默认选中的图例项。数组中的元素为图例项的 name。比如你可以设置defaultSelected: ['Type D'],表示默认渲染图例项名为'Type D' 的线条。以下是一个完整的代码示例:

const spec = {
type: 'line',
data: [
{
id: 'line',
values: data
}
],
xField: 'year',
yField: 'value',
seriesField: 'name',
legends: {
orient: 'right',
selectMode: 'single', // Configure legend selection mode
defaultSelected: ['Type D'],
title: {
visible: true,
text: 'Single Select'
}
},
axes: [
{
orient: 'left',
label: {
inside: true,
space: 2,
style: {
textBaseline: 'bottom',
textAlign: 'start',
fontWeight: 'bold'
}
},
tick: {
visible: false
},
domainLine: {
visible: false
},
title: {
visible: true,
text: 'Axis Title'
}
}
]
};

结果展示

代码运行后,多线图将默认只渲染出了'Type D'的线条。

在线demo:codesandbox.io/p/sandbox/l…

相关文档