径向条形图

源码
import { Chart } from '@antv/g2';

const data = [
  { term: 'Zombieland', count: 9 },
  { term: 'Wieners', count: 8 },
  { term: 'Toy Story', count: 8 },
  { term: 'trashkannon', count: 7 },
  { term: 'the GROWLERS', count: 6 },
  { term: 'mudweiser', count: 6 },
  { term: 'ThunderCats', count: 4 },
  { term: 'The Taqwacores - Motion Picture', count: 4 },
  { term: 'The Shawshank Redemption', count: 2 },
  { term: 'The Olivia Experiment', count: 1 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
  padding: 50,
});

chart.options({
  type: 'view',
  data: data,
  coordinate: { type: 'radial', innerRadius: 0.2, endAngle: Math.PI },
  children: [
    {
      type: 'interval',
      encode: { x: 'term', y: 'count', size: 5 },
      axis: {
        y: false,
        x: {
          title: false,
        },
      },
    },
    {
      type: 'point',
      encode: { x: 'term', y: 'count', shape: 'point', size: 4 },
      tooltip: {
        title: (item) => item.term,
        items: [
          (item) => ({
            name: 'count',
            value: item.count,
          }),
        ],
      },
    },
    {
      type: 'text',
      style: {
        text: 'Music',
        x: '50%',
        y: '50%',
        textAlign: 'center',
        fontSize: 24,
      },
    },
  ],
});

chart.render();
全站搜索
文档与示例输入关键词开始搜索

输入关键词,查找文档、API 与示例

选择打开Esc关闭