效果图
描述
- 多重圆环重叠
- 颜色
- 环形带背景
- 环形开头的坐标(1月,2月…)
数据
const data = [{
month: '01',
value: 0.25,
},
{
month: '02',
value: 0.5,
},
{
month: '03',
value: 0.75,
},
{
month: '04',
value: 0.75,
}];
const colors = {
'01': '#6fdfe1',
'02': '#3a8fff',
'03': '#ff6200',
'04': '#ffe573',
};
实现
<Chart
height={250}
autoFit
data={data}
scale={{
value: {
min: 0,
max: 1,
},
month: {
formatter: (val) => `${val.replaceAll('0', '')}月`,
},
}}
>
<Axis
name="month"
grid={null}
label={{
offset: 4,
style: {
textAlign: 'end',
fill: '#fff',
fontSize: 10,
},
}}
line={null}
tickLine={null}
/>
<Coordinate
type="theta"
radius={1}
innerRadius={0.272}
startAngle={-Math.PI / 2}
/>
{
data.map((item, index) => <Annotation.Arc
key={index}
start={[index, index + Number(item.value)]}
end={[0, 0]}
style={{
lineWidth: 12,
stroke: '#0B274C',
width: 18,
textAlign: 'center',
opacity: 0.5,
}}
/>)
}
<Interval
size={12}
position="month*value"
color={['month', (month) => colors[month]]}
/>
<Legend itemName={{
style: {
textAlign: 'start',
fill: '#fff',
fontSize: 10,
},
}}/>
<Tooltip visible={false} />
</Chart>