问题标题
legend shape如何配置为带圆角的矩形？
问题描述
如下图：
解决方案
支持配置为 'rectRound' 类型
- Tooltip:
shapeType:"rectRound"
tooltip: {
mark: {
content: [
{
shapeType: 'rectRound',
key: datum => datum['type'],
value: datum => datum['value'] + '%'
}
]
}
}
- Legend:
legends: {
visible: true,
orient: 'right',
item: {
width: '15%',
shape: {
style: {
symbolType: 'rectRound'
}
}
}
},
代码示例
const spec = {
type: 'pie',
data: [
{
id: 'pie',
values: [
{ value: 10, category: 'One' },
{ value: 9, category: 'Two' },
{ value: 6, category: 'Three' },
{ value: 5, category: 'Four' },
{ value: 4, category: 'Five' },
{ value: 3, category: 'Six' },
{ value: 1, category: 'Seven' }
]
}
],
categoryField: 'category',
valueField: 'value',
legends: {
visible: true,
orient: 'right',
item: {
width: '15%',
shape: {
style: {
symbolType: 'rectRound'
}
}
}
},
tooltip: {
mark: {
content: [
{
shapeType: 'rectRound',
key: datum => datum['type'],
value: datum => datum['value'] + '%'
}
]
}
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
