import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {MapChart} from 'amos-viz/lib/echarts';
import {chainMapData} from './data';
class Statistics extends Component {
  render() {
    return (
      <div className='statistics-view common-margin'>
        <div className='statistics-title  statistics-title-content'>全国</div>
        <div className='statistics-banner'>
          <div className='statistics-banner-content'>
            <div className='statistics-banner-item'>
              <div className='statistics-banner-itemblock'>
                <div className='statistics-text-number'>20<span>5↑</span></div>
                <p>现有告警</p>
              </div>
              <div className='statistics-banner-itemblock'>
                <div className='statistics-text-number'>20<span>5↑</span></div>
                <p>累计告警</p>
              </div>
              <div className='statistics-banner-itemblock'>
                <div className='statistics-text-number'>20<span>5↑</span></div>
                <p>消缺告警</p>
              </div>
            </div>
          </div>
          <div className='statistics-banner-content'>
          <div className='statistics-banner-item'>
              <div className='statistics-banner-itemblock'>
                <div className='statistics-text-number'>20<span>5↑</span></div>
                <p>现有隐患</p>
              </div>
              <div className='statistics-banner-itemblock'>
                <div className='statistics-text-number'>20<span>5↑</span></div>
                <p>累计隐患</p>
              </div>
              <div className='statistics-banner-itemblock'>
                <div className='statistics-text-number'>20<span>5↑</span></div>
                <p>治理隐患</p>
              </div>
            </div>
          </div>
        </div>
        <MapChart option={chainMapData}  style={{ height: '100%', width: '100%' }} />
      </div>
    );
  }
}

Statistics.propTypes = {};

export default Statistics;
