/**

 * 封装 图表组件

 */

import React, { Component } from 'react';

import {

    StyleSheet,

    Text,

    View,

    Image,

    Platform,

    Dimensions,

    DeviceEventEmitter, // 通知

} from 'react-native';

import PropTypes from 'prop-types';

// 获取屏幕宽高

const {width, height} = Dimensions.get('window');

// 引入 echart组件

import Echarts from 'native-echarts';

export default class CommunalChart extends Component {

    // 定义成员属性

    static propTypes = {

        title:PropTypes.string, // 标题

        legend:PropTypes.array,

        statistics:PropTypes.array // 数据

    };

    onPressone(data){

        // 发送通知

        DeviceEventEmitter.emit('responseName', data);

    }

    // 渲染

    render() {

        const option = {

            title : {

                text: '',

                x:'center',

            },

            tooltip : {

                trigger: 'item',

                formatter: "{a} <br/>{b} : {c} ({d}%)"

            },

            legend: {

                orient: 'vertical',

                left: 'left',

                data: this.props.legend,

                y:'90'

            },

            series : [

                {

                    name: '人数',

                    type: 'pie',

                    radius : '55%',

                    center: ['50%', '60%'],

                    data: this.props.statistics,

                    itemStyle: {

                        emphasis: {

                            shadowBlur: 10,

                            shadowOffsetX: 0,

                            shadowColor: 'rgba(0, 0, 0, 0.5)'

                        }

                    }

                }

            ]

        };

        return (

            <Echarts option={option} height={height} onPressone={(data) => {this.onPressone(data)}} />

        );

    }

}