<!DOCTYPE HTML>
<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>