【BizCharts】可视化图表使用（3）——环形图（使用极坐标来实现）

效果图

描述

• 多重圆环重叠
• 颜色
• 环形带背景
• 环形开头的坐标（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, // 作为背景颜色，保持和下面Interval的size一样
          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>