reactjs+echarts绘图（二）

上一篇实现了一些基本的绘图，但是数据传递只能通过父组件props到子组件中。而子组件若对数据有更改时，无法实现再度更新re-render。

这里涉及到reactjs中两个基本的传递数据的属性state和props，其中分别对应生命周期方法。一般认为：

如果component的某些状态由外部所决定，并且会影响到component的render，那么这些状态就应该用props表示。

如果component的某些状态需要被改变，并且会影响到component的render，那么这些状态就应该用state表示。

此时结合以上特性，代码如下：

     <div id="example"></div>
     <script type="text/babel">
       var Hello = ({
         getInitialState:function(){
            return {data:this.};
         },
         componentDidMount:function(){
           //();
           this.drawCharts(this.);
           var that=this;
           setInterval(,1000)
         },
         getData:function(){
           var dataSet=this.(function(ele){
             return Math.random()*ele;
           })
           (dataSet);
           this.setState({
             data:dataSet
           });
         },
         drawCharts:function(dataSet){
           var myChart = (('charts'));

           // 指定图表的配置项和数据
           var option = {
             title: {
               text: 'ECharts 入门示例'
             },
             tooltip: {},
             legend: {
               data:['销量']
             },
             xAxis: {
               data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
             },
             yAxis: {},
             series: [{
               name: '销量',
               type: 'bar',
               data: dataSet
             }]
           };

           // 使用刚指定的配置项和数据显示图表。
           (option);
         },
         componentWillUpdate:function(){
           //var dataset=[10,20,30,50,30,70];
           (this.);
           this.drawCharts(this.);
         },
       /*注意return后面的js有自动加；的习惯*/
         render: function() {
           return <div>
              <h1>Hello {}</h1>
              <div id="charts"></div>
           </div>;
         }
       });
        /*props向组件内部传递*/
       var dataSet=[100,20,30,0,0,0];
       (
       <Hello name="World"data={dataSet}/>,
         ('example')
       );

head中的代码如下：

 <head>
  <meta charset="utf-8">
       <script src="/react/0.14.1/"></script>
       <script src="js/"></script>
       <script src="/babel-core/5.8.32/"></script>
      <script src="///echarts/3.1.10/"></script>
    <style>
      #charts{
        width:500px;
        height:500px;
      }
    </style>
</head>

秒客网

reactjs+echarts绘图（二）

相关文章