zoukankan      html  css  js  c++  java
  • native-echarts 组件封装

    CommunalChart.js

    /**
     * 封装 图表组件
     */
    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)}} />
            );
        }
    }
    

    .

  • 相关阅读:
    【SpringCloud】工程分类概况
    【Spring Alibaba】Sentinel/Nacos/RocketMQ/Seata/
    【Eureka】服务架构类知识点
    求车速
    尼科彻斯定理
    Tom数
    弟弟的作业
    汽水瓶
    POJ-2533-Longest Ordered Subsequence(LIS模板)
    HDU-1331-Function Run Fun(动态规划3)
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7476134.html
Copyright © 2011-2022 走看看