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 = React.createClass({
         getInitialState:function(){
            return {data:this.props.data};
         },
         componentDidMount:function(){
           //console.log(this.props.data);
           this.drawCharts(this.state.data);
           var that=this;
           setInterval(that.getData,1000)
         },
         getData:function(){
           var dataSet=this.props.data.map(function(ele){
             return Math.random()*ele;
           })
           console.log(dataSet);
           this.setState({
             data:dataSet
           });
         },
         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);
         },
         componentWillUpdate:function(){
           //var dataset=[10,20,30,50,30,70];
           console.log(this.state.data);
           this.drawCharts(this.state.data);
         },
       /*注意return后面的js有自动加;的习惯*/
         render: function() {
           return <div>
              <h1>Hello {this.props.name}h1>
              <div id="charts">div>
           div>;
         }
       });
        /*props向组件内部传递*/
       var dataSet=[100,20,30,0,0,0];
       ReactDOM.render(
       <Hello name="World"data={dataSet}/>,
         document.getElementById('example')
       );

head中的代码如下:

 <head>
  <meta charset="utf-8">
       <script src="http://cdn.bootcss.com/react/0.14.1/react.js">script>
       <script src="js/react-dom.js">script>
       <script src="http://cdn.bootcss.com/babel-core/5.8.32/browser.min.js">script>
      <script src="//cdn.bootcss.com/echarts/3.1.10/echarts.common.js">script>
    <style>
      #charts{
        width:500px;
        height:500px;
      }
    style>
head>

你可能感兴趣的:(web开发,js-demo)