최근에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 

              
Hello {this.props.name}
              
"charts" data={dataSet}>
           
;
         }
       });
        /*props       */
       var dataSet=[100,20,30,0,0,0];
       ReactDOM.render(
       "World"data={dataSet}/>,
         document.getElementById('example')
       );

또한, echarts는 대응하는 탭의 길이를 정해야 하며, 그렇지 않으면 init Dom failed를 잘못 보고해야 합니다.

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