reactjs+echarts实现绘图

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

<style>
#charts{
width:500px;
height:500px;
}
</style>