nuke-biz-custom-chart/demo/pie-percent.md

custom-chart

# Chart Demo

- order: 0


Pie percent demo

---

````js
/** @jsx createElement */

'use strict';

import { createElement, Component, PropTypes,render } from 'rax';
import Chart, { Pie, Coord } from 'nuke-biz-custom-chart';
import { View, Text, Env } from 'weex-nuke';

const { isWeex } = Env;

const $PIE_WIDTH = 375;
const $PIE_HEIGHT = 320;

const styles = {
  pieChart: {
    width: $PIE_WIDTH,
    height: $PIE_HEIGHT,
    backgroundColor: 'rgba(255, 255, 255, 1)',
    position: 'relative',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  chartCanvas: {
    width: isWeex ? 262 : $PIE_WIDTH,
    height: isWeex ? 262 : $PIE_HEIGHT,
  },
  pieChartTitle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: $PIE_WIDTH,
    position: 'absolute',
    top: isWeex ? 25 : 32,
  },
  pieChartTitleText: {
    fontFamily: 'PingFangSC-Light',
    fontSize: 26,
    color: '#333333',
  },
  pieChartNumberIsWeex: {
    position: 'absolute',
    top: 78,
    left: 106,
    width: isWeex ? 164 : $PIE_WIDTH,
    borderRadius: 82,
    height: isWeex ? 164 : $PIE_HEIGHT,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  pieChartNumber: {
    position: 'absolute',
    top: 140,
    width: $PIE_WIDTH,
    // top: 160,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  pieChartPre: {
    fontFamily: 'PingFangSC-Medium',
    fontSize: 40,
    color: '#333333',
    lineHeight: 40,
  },
  pieChartIcon: {
    fontSize: 22,
    marginLeft: 5,
  },
};

class Mod extends Component {
  render() {
    const { color, data, label } = this.props;

    const percentage = data[0].value * 100;

    return (
      <View style={styles.pieChart}>
        <Chart style={styles.chartCanvas} data={data}>
          <Coord type="polar" inner={0.9} transposed />
          <Pie position="title*value" color={color} inner={0.2} />
        </Chart>

        <View style={styles.pieChartTitle}>
          <Text style={styles.pieChartTitleText}>{label}</Text>
        </View>
        <View style={isWeex ? styles.pieChartNumberIsWeex : styles.pieChartNumber}>
          <Text style={styles.pieChartPre}>{percentage.toFixed(2)}</Text>
          <Text style={styles.pieChartIcon}>%</Text>
        </View>
      </View>
    );
  }
}

Mod.propTypes = {
  style: PropTypes.object,
  data: PropTypes.array,
  color: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
};
Mod.defaultProps = {
  // label: 'IOPS',
  style: {},
  // color: 'color',
  color: ['color', ['#00C1DE', '#C1C3C4']],
  data: [{ title: '使用', value: 0.21, color: '1' }, { title: '使用', value: 0.79, color: '2' }],
};


render(<Mod />);


````