bizcharts example : Doughnut Chart

Chart UI

key codes explaintion:

<Coord type='theta' innerRadius={0.45} />
without 'innerRadius={0.45}', UI will looks like:

without below codes, UI will looks like:

<Geom select={[false,{}]} type='intervalStack' position='percent' 

  color={['type', ['rgba(255, 255, 255, 0)']]} 

  style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}> 

</Geom> 

Codes

ChartComponent.js

import React, { Component } from 'react';
import {Chart, Axis, Tooltip, Geom, Coord, Label} from 'bizcharts';
import DataSet from '@antv/data-set';
const { DataView } = DataSet;

export class ScoreChart extends Component {
  render() {
    const { width, height, score } = this.props;
    const scoreData = [
      { type: 'Score', value: score },
      { type: '', value: 10 - score },
    ];
    const scoreDv = new DataView();
    scoreDv.source(scoreData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const scoreColor = (type) => {
      if (type === 'Score')
        return 'rgb(152,191,182)';
      return 'white';
    };
    return (
      <Chart data={scoreDv} width={width} height={height} padding='auto'>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', ['rgba(255, 255, 255, 0)']]}
          style={{stroke: 'rgba(152,191,182,1)', lineWidth: 1}}>
        </Geom>
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', scoreColor]}>
        </Geom>
      </Chart>
    )
  }
};

export class StarChart extends Component {
  render() {
    let { width, height, situation, action, task, result } = this.props;
    if (width < 200)
      width = 200;
    if (height < 200)
      height = 200;
    const starData = [
      { type: 'Situation', value: situation },
      { type: 'Action', value: action },
      { type: 'Task', value: task },
      { type: 'Result', value: result },
    ];
    const starDv = new DataView();
    starDv.source(starData)
      .transform({
      type: 'percent',
      field: 'value',
      dimension: 'type',
      as: 'percent'
    });
    const starColor = (type) => {
      if (type === 'Situation')
        return 'rgb(208,210,211)';
      if (type === 'Action')
        return 'rgb(151,191,182)';
      if (type === 'Task')
        return 'rgb(236,142,91)';
      if (type === 'Result')
        return 'rgb(64,43,74)';
      return 'transparent';
    };
    return (
      <Chart data={starDv} width={width} height={height} padding={['10%', '22%']}>
        <Coord type='theta' innerRadius={0.45} />
        <Geom select={[false,{}]} type='intervalStack' position='percent'
          color={['type', starColor]}>
          <Label content='type' offset={20}/>
        </Geom>
      </Chart>
    )
  }
}

App.js

import React, { Component } from 'react';
import {ScoreChart, StarChart} from './ChartComponent';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <StarChart width={200} height={200}
          situation={20} action={40} task={40} result={20}>
        </StarChart>
        <ScoreChart width={120} height={120}
          score={7}>
        </ScoreChart>
      </div>
    );
  }
}

export default App;

Dependences

yarn add bizcharts yarn add @antv/data-set 

Refers

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/g2/clock
https://github.com/alibaba/BizCharts/tree/master/doc/tutorial