# 饼图 demo

* order: 2

饼图常见 demo

---

```js
'use strict';

/** @jsx createElement */
import { createElement, Component, render } from 'rax';

import { Page } from 'nuke';
import { PieChart } from 'nuke-biz-qn-chart';

var data = [
    { value: 5, label: 'Q1' },
    { value: 12, label: 'Q2' },
    { value: 3, label: 'Q3' }
];

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Page title="PieChart">
                <Page.Intro main="基本" />
                <PieChart
                    id="pie-chart-1"
                    showLegend={false}
                    animate={false}
                    rotationEnabled={true}
                    value={{ name: 'value' }}
                    label={{ name: 'label' }}
                    data={data}
                    width={500}
                    height={500}
                    ref="chart1"
                />
                <Page.Intro main="空心圈" />
                <PieChart
                    id="pie-chart-2"
                    showLegend={false}
                    rotationEnabled={true}
                    value={{ name: 'value' }}
                    label={{ name: 'label' }}
                    data={data}
                    width={500}
                    height={500}
                    inner={{
                        drawHoleEnabled: true,
                        radius: 0.58,
                        text: '一个饼',
                        fontSize: 12,
                        color: '#3089dc'
                    }}
                    ref="chart2"
                    showLegend={true}
                    legend={{ orientation: 'VERTICAL' }}
                />
            </Page>
        );
    }
};

const styles = {
    chart: {
        width: '700rem',
        marginLeft: '25rem',
        height: '700rem'
    },
    button: {
        margin: 10
    }
};

render(<App />);
```