'use strict';

/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import {View,Page} from 'nuke';
import {RadarChart} from 'nuke-biz-qn-chart';

var  data = [
{name: '张飞',props: '智力', value: 65},
{name: '张飞',props: '武力', value: 97},
{name: '张飞',props: '政治', value: 50},
{name: '张飞',props: '统帅', value: 92},
{name: '张飞',props: '忠诚', value: 100},
{name: '关羽',props: '智力', value: 80},
{name: '关羽',props: '武力', value: 94},
{name: '关羽',props: '政治', value: 70},
{name: '关羽',props: '统帅', value: 95},
{name: '关羽',props: '忠诚', value: 99}
];

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

        return (
            <Page title="RadarChart">
                <Page.Intro main="基本"></Page.Intro>
                <RadarChart id="pie-chart-1" lineSeperator="name" rotationEnabled={true}  xAxis={{name:"props"}} yAxis={{name:"value"}}  data={data} width={700} height={800} ref="chart1" showLegend={true}>
                </RadarChart>
                <Page.Intro main="定制"></Page.Intro>
                <View style={{backgroundColor:'#3089dc'}}>
                    <RadarChart id="pie-chart-2" opacity="0.7" lineSeperator="name" rotationEnabled={true}  xAxis={{name:"props",style:{fontSize:14,color:'#ff6600'}}} yAxis={{name:"value",style:{fontSize:16,color:'blue'}}} grids={{lineWidth:1,color:'#ffffff',lineAlpha:0.8}} data={data} width={700} labels={{fontSize:14,color:'#ffffff'}} height={800} ref="chart2" showLegend={true}>
                    </RadarChart>
                </View>
                
                

            </Page>
        );
    }
}

const styles = {

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



render(<App/>);