TypeError: dom.getAttribute is not a function about echarts-for-react HOT 34 CLOSED

import React from 'react';
import echarts from 'echarts';

var EchartsInit = React.createClass({
    getInitialState:function(){
        return {option:this.props.option};
    },
    componentDidMount:function(){
        this.drawCharts(this.state.option);
    },
    drawCharts:function(option){
        var myChart = echarts.init(document.getElementById('charts'));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    componentWillUpdate:function(){
        this.drawCharts(this.state.option);
    },
    render: function() {
        return  <div id="charts" style={{height: this.props.tableHeight-80, width: this.props.tableWidth-80, margin: '10px auto'}}></div>
    }
});

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import StatsStore from '../stores/StatsStore';
import StatsActions from '../actions/StatsActions';

class Stats extends React.Component {
  constructor(props) {
    super(props);
    this.state = StatsStore.getState();
    this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    StatsStore.listen(this.onChange);
    StatsActions.getStats(this.props.params.type);
  }

  componentWillUnmount() {
    StatsStore.unlisten(this.onChange);
  }

  componentDidUpdate(prevProps) {
    // Fetch new stats data when URL path changes
    if (prevProps.params.type !== this.props.params.type) {
      StatsActions.getStats(this.props.params.type);
    }
  }

  onChange(state) {
    this.setState(state);
  }

  getOption() {
    var option = {
          title : {
              text: '某站点用户访问来源',
              subtext: '纯属虚构',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'直接访问'},
                      {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)'
                      }
                  }
              }
          ]
      };

      return option;
  }

  render() {
    return (
      <div className='container'>
        <ReactEcharts
          option={this.getOption()}
          style={{height: '350px', width: '100%'}}>
        </ReactEcharts>
      </div>
    );
  }
}

export default Stats;

    /**
     * @param  {HTMLDomElement} dom
     * @return {echarts~ECharts}
     */
    echarts.getInstanceByDom = function (dom) {
        var key = dom.getAttribute(DOM_ATTRIBUTE_KEY); // <---- 出错
        return instances[key];
    };

Uncaught TypeError: _reactDom2.default.render is not a function

 import React from 'react';
 import _ from 'lodash';
 import FQN from '../utils/fqn';
 import ResultsPreviewStore from '../stores/ResultsPreviewStore';
 import ResultsPreviewActions from '../actions/ResultsPreviewActions';
 import UpdateWidthMixin from '../mixins/UpdateWidthMixin';
 import QueryActions from '../actions/QueryActions';
 import ReactEcharts from '../utils/echarts-for-react';

 // State actions
 function getStateFromStore() {
   return {
     query: ResultsPreviewStore.getPreviewQuery(),
     table: ResultsPreviewStore.getResultsPreview()
   };
 }

 function selectQuery(query, e) {
   e.preventDefault();
   QueryActions.selectQuery(query);
 }

 const EchartsTable = React.createClass({
   displayName: 'EchartsTable',
   mixins: [UpdateWidthMixin],

   getInitialState() {
     return getStateFromStore();
   },

   componentDidMount() {
     ResultsPreviewStore.listen(this._onChange);
   },

   componentWillUnmount() {
     ResultsPreviewStore.unlisten(this._onChange);
   },

   render() {
     if( this.state.table && this.state.table.data ) {
       return this._renderColumns();
     } else {
       return this._renderEmptyMessage();
     }
   },

   /* Internal Helpers ------------------------------------------------------- */
   _renderEmptyMessage() {
     return (
       <div className="panel-body text-light text-center">
         <p>请先查询语句.</p>
       </div>
     )
   },

   _renderColumns() {
     return (
       <div className='flex flex-column airpal-table'>
         <div className='editor-menu'>
           <div 
             style={{width: this.props.tableWidth - 20}} 
             className="text-overflow-ellipsis">
             <a href="#" onClick={selectQuery.bind(null, this.state.query)}>
               {this.state.query}
             </a>
           </div>
         </div>
         <ReactEcharts ref='echarts_react'
         option={this.state.option}
         style={{height: '400px', width:  '400px'}} />
       </div>
     );
   },
   /* Store events */
   _onChange() {
     this.setState(getStateFromStore());
   }
 });


 export default EchartsTable;

echarts.getInstanceByDom = function (dom) {
var key = dom.getAttribute(DOM_ATTRIBUTE_KEY); // <---- 出错
return instances[key];
};