reactjs+echarts绘图（二）

最新推荐文章于 2024-02-25 09:38:54 发布

tonyhzw

最新推荐文章于 2024-02-25 09:38:54 发布

阅读量6.5k

点赞数

分类专栏： web开发 js-demo 文章标签： reactjs echarts 数据传递

本文链接：https://blog.csdn.net/datou0529/article/details/51747474

版权

web开发同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

js-demo

5 篇文章 0 订阅

订阅专栏

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