1. 概述
1.1 应用场景
玉珏图是柱状图的一种变体，是关于笛卡尔坐标系转换到极坐标系的仿射变换。玉珏图中是用角度表示每个珏环数值的大小，即使外侧玉环的数值小于内侧的，外侧的珏环长度会相对比内侧的珏环更长，造成视觉上的误解，使用其更多的是美观性上的需求。
1.2 基本要求
图表 |
维度 |
度量 |
|---|---|---|
自定义绘图 |
1个或多个 |
1个或多个 |
2. 制作图表
➢举例：
现有的柱状图组件不支持设置为玉珏图，您可通过自定义绘图实现。
添加自定义绘图组件后，点击自定义JS代码，Chart选择AntV_G2Plot，在JS代码区域，粘贴以下代码。
import { RadialBar } from '@antv/g2plot';
const data = [
{ 产品种类: '柠檬水', 销量: 5 },
{ 产品种类: '白开水', 销量: 100 },
{ 产品种类: '可乐', 销量: 120 },
{ 产品种类: '雪碧', 销量: 150},
];
const bar = new RadialBar($container, {
data,
xField: '产品种类',
yField: '销量',
maxAngle: 270, //最大旋转角度,
radius: 0.8,
innerRadius: 0.2,
barStyle: {
lineCap: 'round',
},
colorField: '销量',
color: ({ 销量 }) => {
if (销量 > 100) {
return '#36c361';
} else if (销量 > 100) {
return '#2194ff';
}
return '#ff4d4f';
},
});
bar.render();
点击执行，预览图表效果，确认无误后，点击确定。
更多有关自定义绘图的使用，详情请参考自定义绘图。