reactjs+echarts实现绘图

最近手头需要实现reactjs下echarts的绘图，发现不少坑，现整理如下。
首先贴好代码如下，注意其中数据传递

        var Hello = React.createClass({
         componentDidMount:function(){
           console.log(this.props.data);
           this.drawCharts(this.props.data);
         },
         drawCharts:function(dataSet){
         var myChart = echarts.init(document.getElementById('charts'));

           // 指定图表的配置项和数据
           var option = {
             title: {
               text: 'ECharts 入门示例'
             },
             tooltip: {},
             legend: {
               data:['销量']
             },
             xAxis: {
               data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
             },
             yAxis: {},
             series: [{
               name: '销量',
               type: 'bar',
               data: dataSet
             }]
           };
           // 使用刚指定的配置项和数据显示图表
           myChart.setOption(option);
         },
         /*注意return后面的js有自动加;的习惯*/
         render: function() {
           return <div>
              <h1>Hello {this.props.name}</h1>
              <div id="charts" data={dataSet}></div>
           </div>;
         }
       });
        /*props向组件内部传递*/
       var dataSet=[100,20,30,0,0,0];
       ReactDOM.render(
       <Hello name="World"data={dataSet}/>,
         document.getElementById('example')
       );

同时，注意echarts要求给定对应的标签的长宽，否则报错init Dom failed：

    <style>
      #charts{
        width:500px;
        height:500px;
      }
    </style>