nuke-biz-qn-chart/theme/pie.jsx

weex 版本千牛业务图表库，基于weex + rax,包含线图、柱状图、饼图、雷达图等，其他类型的图表正在按业务需求陆续接入。其中 native 端由客户端插件实现，h5 端使用 g2-mobile

'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: 'Q1qqeeqweqwe'},
    {value: 12, label: 'Q2fwefwef'},
    {value: 3, label: 'Q3fwefwe'}
];

let App = class NukeDemoIndex extends Component {
    constructor(props) {
        super(props);
    }
    render() {

        return (
            <Page title="PieChart">
                <Page.Intro main="基本"></Page.Intro>
                <PieChart id="pie-chart-1" showLegend={false} rotationEnabled={true} value={{name:"value"}} label={{name:"label"}} data={data} width={500} height={500} ref="chart1">
                </PieChart>
                <Page.Intro main="空心圈"></Page.Intro>
                <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'}}>
                </PieChart>
                

            </Page>
        );
    }
}

const styles = {

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



render(<App/>);