reactjs+echarts绘图（二）

来源：互联网发布：梦幻手游猜拳表情源码编辑：程序博客网时间：2024/06/15 23:15

上一篇实现了一些基本的绘图，但是数据传递只能通过父组件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>

0 0