EchartsReact，在react项目中使用ECharts的使用希望有帮助路过！！

import React from 'react';
import { connect } from 'dva';
import Information from "~/components/Information/Information";
import styles from './Management.less';
import ManagementJson from './ManagementJson';

// 引入 ECharts 主模块
import ReactEcharts from '~/components/Table/EchartsReact';

@connect(state => ({
  global: state.global,
}))
export default class Management extends React.Component {

  constructor(props){
    super(props);
    this.ajaxFlag = true;
    this.state = {

    }
  }
  getInitialState = ()=> ({
    option: this.getOption()
  })
  getOption = () => ({
    color:['#4472C5','#ED7C30','#80FF80','#FF8096','#800080'],
    title : {
      text: '某站点用户访问来源',
      subtext: '纯属虚构',
      x:'center'
    },
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)",
      backgroundColor : '#ccc',
      textStyle : {
        color : '#000'
      },
      borderColor : '#9933cc',
      borderWidth : 1,//边框
      position : function(a) {//悬浮窗到点的距离
        a[0] = a[0] - 63;
        return a;
      }
    },
    legend: {
      //orient: 'vertical',
      top:'bottom',
      left: 'center',
      data: ['直接访问qq','邮件营销','联盟广告','视频广告','搜索引擎'],
       itemWidth:10,//图例的宽度
      itemHeight:10,//图例的高度
      textStyle:{//图例文字的样式
        color:'#333',
        fontSize:16
      }
    },
    series : [
      {
        name: '访问来源',
        type: 'pie',
        radius : ['35%', '50%'],
        center: ['40%', '50%'],
        data:[
          {value:335, name:'直接访问qq'},
          {value:310, name:'邮件营销'},
          {value:234, name:'联盟广告'},
          {value:135, name:'视频广告'},
          {value:1548, name:'搜索引擎'}
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });

  componentDidMount() {

  }

  render(){
    return(
      <div>
        <Information>
          {/*团队管理*/}
          <p className={styles.title}>管理团队丨Management team</p>
            {
              ManagementJson.map((item,index)=>{
                return <div key={index}>
                    <div className={styles.folatImg}><img src={require("../../assets/about/information_company_default.png")} alt=""/></div>
                    <div className={styles.folatText}>
                      <p className={styles.textName}>{item.name}</p>
                      <p>{item.company}</p>
                      <p>{item.identity}</p>
                      <p className={styles.textEaucation}>{item.institutions}</p>
                    </div>
                  </div>

              })
            }
            <div className={styles.clear}></div>

            {/*组织架构*/}
            <p className={styles.title}>组织架构丨Organization structure</p>
            <div>组织架构</div>

            <p className={styles.title}>从业概况丨The situation of the practitioners</p>

            {/*echarts图表*/}

            <div className={styles.echartContainer}>
              <ReactEcharts
                option={this.getOption()}
                style={{height: 398,width:398}}
                onChartReady={this.onChartReady}
              />
            </div>
            <div className={styles.echartContainer}>
              <ReactEcharts
                option={this.getOption()}
                style={{height: 398,width:398}}
                onChartReady={this.onChartReady}
              />
            </div>
           
        </Information>
      </div>
    )
  }

}

效果如下：