occ-mobile/app/components/echarts/EchartsComponent.js

import React, { Component } from 'react'
import { Dimensions, Text, View } from 'react-native'
import Echarts from 'native-echarts'
import { PieOptions } from './PieConfig'
import { ScaleUtil, accSub } from '../../utils/utils'

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

const color = [
  '#FF7772',
  '#FF9C68',
  '#FFD75B',
  '#93E05C',
  '#56DBD4',
  '#65BEFF',
  '#84A2FF',
]
class EchartsComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { pieOptions: PieOptions, option: {} }
  }
  componentWillReceiveProps(nextProps) {
    if (
      nextProps.data.proTitle == true &&
      nextProps.data.creditBalance !== this.props.data.creditBalance &&
      nextProps.data.creditBalance
    ) {
      // if (
      //   nextProps.parentState.activeSection ||
      //   nextProps.parentState.dateActive
      // ) {
      this.index = Math.round(Math.random() * color.length)
      const { creditBalance, creditLimit } = nextProps.data
      let pieOptions = JSON.parse(JSON.stringify(this.state.pieOptions)),
        creditBalanceIf = creditBalance
      // let Balance = Quota - Occupancy;
      if (creditBalance <= 0) {
        creditBalanceIf = 0
      }
      if (
        ScaleUtil(creditBalance, CURRENCY.currencyAmountScale).toString()
          .length >= 10 &&
        ScaleUtil(creditBalance, CURRENCY.currencyAmountScale).toString()
          .length < 12
      ) {
        pieOptions.series[0].radius = ['80%', '90%']
      } else if (
        ScaleUtil(creditBalance, CURRENCY.currencyAmountScale).toString()
          .length >= 12
      ) {
        pieOptions.series[0].radius = ['90%', '100%']
      }
      pieOptions.series[0].data = [
        ScaleUtil(creditLimit, CURRENCY.currencyAmountScale),
        ScaleUtil(
          accSub(creditLimit, creditBalanceIf),
          CURRENCY.currencyAmountScale
        ),
      ]
      pieOptions.series[0].label.normal.formatter = `${
        CURRENCY.currencySign
      }${ScaleUtil(creditBalance, CURRENCY.currencyAmountScale)}`
      pieOptions.series[0].label.normal.textStyle.fontSize =
        this.props.fontSize || 20
      if (this.props.color && Array.isArray(this.props.color)) {
        pieOptions.color = this.props.color
      } else {
        pieOptions.color[0] = color[0]
      }
      this.setState({ option: pieOptions })
    }
  }

  componentDidMount() {
    if (this.props.data) {
      let colorIndex = this.props.index % 7
      const { creditBalance, creditLimit } = this.props.data
      let pieOptions = JSON.parse(JSON.stringify(this.state.pieOptions)),
        creditBalanceIf = creditBalance
      // let Balance = Quota - Occupancy;
      if (creditBalance <= 0) {
        creditBalanceIf = 0
      }
      if (
        ScaleUtil(creditBalance, CURRENCY.currencyAmountScale).toString()
          .length >= 10 &&
        ScaleUtil(creditBalance, CURRENCY.currencyAmountScale).toString()
          .length < 12
      ) {
        pieOptions.series[0].radius = ['80%', '90%']
      } else if (
        ScaleUtil(creditBalance, CURRENCY.currencyAmountScale).toString()
          .length >= 12
      ) {
        pieOptions.series[0].radius = ['90%', '100%']
      }
      pieOptions.series[0].data = [
        ScaleUtil(creditLimit, CURRENCY.currencyAmountScale),
        ScaleUtil(
          accSub(creditLimit, creditBalanceIf),
          CURRENCY.currencyAmountScale
        ),
      ]
      pieOptions.series[0].label.normal.formatter = `${
        CURRENCY.currencySign
      }${ScaleUtil(creditBalance, CURRENCY.currencyAmountScale)}`
      pieOptions.series[0].label.normal.textStyle.fontSize =
        this.props.fontSize || 20
      if (this.props.color && Array.isArray(this.props.color)) {
        pieOptions.color = this.props.color
      } else {
        pieOptions.color[0] = color[colorIndex || 0]
      }
      this.setState({ option: pieOptions })
    }
  }

  render() {
    return (
      <View
        style={{
          alignSelf: 'center',
        }}
      >
        <Echarts
          option={this.state.option}
          width={width}
          height={this.props.height || 160}
        />
        <View
          style={{
            position: 'absolute',
            alignSelf: 'center',
            bottom: this.props.bottom || '22%',
          }}
        >
          <Text
            style={{
              fontSize: 14,
              lineHeight: 20,
              letterSpacing: 0.17,
              color: '#999',
            }}
          >
            {this.props.bottomText}
          </Text>
        </View>
      </View>
    )
  }
}

export default EchartsComponent