在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是echarts了。平时用js加载echarts组件很方便，但是在react中就要费下神了。各种连蒙带猜实现了。edmo里的
这里我们要在自己搭建的react项目中使用echarts，我们可以在echarts官网上看到有一种方式是在 ，我们需要的就是这种方法。
我们在使用echarts之前要先安装echarts，在以往的开发模式中，我们很多使用就是把官网中的echarts的核心js文件导入到我们的html或者是jsp等文件里面，但是在react项目中，我们可以直接使用node.js的npm命令安装：
npm install echarts --save
echarts的例子就是echarts文档上介绍的最简单的应用。
我要评论
render:function() {
var info = 1;
return (
<div classname="mt15 xui-financialanalyse-page">
<div classname="xui-general">
<chart data={info} data-info={info} />
</div>
</div>
)
}
这是调用echarts组件的地方，给里面传了2个属性（data-开头是h5定义的规范）
var chart = react.createclass({
getinitialstate: function() {
this.token = store.addlistener(this.onchangedata);
return {}
},
componentwillmount: function() {
var info = this.props.data;
//html5规定自定义属性要以data-开头，这样的可以如下取
console.log(this.props['data-info'])
action.getinfo(info);
},
componentdidupdate: function() {
this.showchart(this.state.data)
},
onchangedata: function() {
var data = store.getdata();
this.setstate({
data: data['info']['data'] //后台返回的数据
});
},
showchart: function(dataset){
var mychart = echarts.init(document.getelementbyid('main'));
var option = {
title: {
text: 'echarts 入门示例'
},
color: ['#3398db'],
tooltip : {
trigger: 'axis',
axispointer : {
type : 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containlabel: true
},
xaxis : [
{
type : 'category',
data : ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
axistick: {
alignwithlabel: true
}
}
],
yaxis : [
{
type : 'value'
}
],
series : [
{
name:'你好',
type:'bar',
barwidth: '60%',
data: dataset
}
]
};
mychart.setoption(option);
},
render: function() {
return (
<div id="main" style={{width: 500, height:500}}></div>
)
}
});
上面是完整的demo echarts组件的代码，主要是利用了react根据不同状态（3种状态）提供的处理函数（一共有5种）。
1、componentwillmount：在插入真实dom之前发起action，向后端请求数据。
2、onchangestore：在数据变更的时候更新数据，并在getinitialstate中加入监听store中数据变化的监听器。
3、componentdidupdate：在数据被重新渲染之后，触发showchart()方法绘制canvas。
4、showchart：配置echarts，具体配置信息可以参考echarts文档
5、如果组件生命周期结束，那么要加上如下代码：
componentwillunmount: function() {
this.token.remove();
},
否则会报错： warning: setstate(...): can only update a mounted or mounting component. this usually means you called setstate() on an unmounted component. this is a no-op. please check the code for the undefined component.
最后附上效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
网友评论