<html lang="ru-RU"> <head> <title></title> <style type="text/css"> *{padding:0;margin:0} .container{ margin-top:50px; display:flex; justify-content: space-around; /* justify-content: space-betwe*/ } fieldset{ padding:20px;} ul {;padding:20px;} li,input,button{height:35px;} </style> <meta charset="UTF-8"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div class='container'> <fieldset> <div id='app'></div> </fieldset> <fieldset> <div id='view' style="width:400px;height:400px;"> </fieldset> </div> <script type="text/javascript"> var data=[ {value:100, name:'AA'}, {value:200, name:'BB'} ]; </script> <script type="text/babel"> var Box = React.createClass({ getInitialState: function() { return {data: data}; }, clickHandler:function(){ this.state.data.push({name:this.refs.name.value,value:this.refs.price.value}); this.setState({data: this.state.data}); }, render:function(){ var LiNodes = this.state.data.map(function(item) { return ( <li > {item.name} {item.value} </li> ); }); return( <div> <input type="text" ref="name" placeholder='ccc'/> <input type="text" ref="price" placeholder='333' /> <input type="button" value="Add data" onClick={this.clickHandler} /> <ul> {LiNodes} </ul> </div> ) } }) ReactDOM.render(<Box />,document.getElementById('app') ) </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.1.6/echarts.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('view')); myChart.setOption({series : [{type: 'pie', data:data } ]}); </script> </body></html>xxxxxxxxxxxxxxxxxxxx