0.0.5 • Published 6 years ago
nuke-biz-custom-chart v0.0.5
custom-chart
- category: UI
- chinese: 图表
- type: UI组件
API
Demos
Pie demo
/** @jsx createElement */
'use strict';
import { createElement, Component, PropTypes,render } from 'rax';
import { View, Text, Env ,Dimensions,Page} from 'weex-nuke';
import Chart, { Pie, Coord } from 'nuke-biz-custom-chart';
const CHART_WIDTH = 300;
const CHART_HEIGHT = 300;
class Demo extends Component {
constructor(){
super();
this.state = {
pieData1 : [
{ circle: 'wallet', val: 0.7, part: 'deposited'},
{ circle: 'wallet', val: 0.08, part: 'refunds'},
{ circle: 'wallet', val: 0.22, part: 'rebates'}
]
}
}
render() {
return (
<View style={{width:CHART_WIDTH,height:CHART_HEIGHT,backgroundColor:'#f0d4d9'}}>
<Chart style={{width: CHART_WIDTH,height: CHART_HEIGHT}} data={this.state.pieData1} margin={12}>
<Coord type="polar" inner={0.62} transposed />
<Pie position="circle*val" color={'part'} inner={0.3} theme={['#1A9CB7','#F44336','#FECC05']} />
</Chart>
</View>
);
}
}
render(<Demo />);