react中想要实现折线图和饼图的功能，需要引入react-echarts包，然后再实现折线图的功能。我这里引用的版本是：0.1.1。其他的写法参echarts官网即可。下面详细讲解的是我在react+redux+router+webpack+antd脚手架上面完成的折线图和饼图。
这篇文章主要讲解的是折线图，折线图主要分为普通的折线图和大面积折线图，普通的折线图又分为三种获取单个折线图、两个折线图、多个每行两个折线图。
- 大面积折线图，echarts3官网大面积折线图官网实例如图，网址：http://echarts.baidu.com/demo.html#area-simple
将代码粘贴复制到自己的脚手架相对应的组件中即可，以下是我的一些功能实现，详细的讲解就在代码注释上面
import React, {PropTypes, Component} from 'react';//引入react包，用于编写react组件
import { Router, Route, browserHistory} from 'react-router';//引入react-router包，用于路由跳转
import {Row,Col} from 'antd';//引入蚂蚁金服的antUI组件中的row和col（栅格），管理布局
import ECharts from 'react-echarts';//引入react-echarts包，实现echarts实现
import '../../../common/sass/activity/activity.scss';//引入自己的scss文件
import '../../../common/sass/public/customButton.scss';
//设置全局变量
var optionDatas={},
converRate=null,
dateArray=[],
rateArray=[];
class ReactEcharts extends React.Component {
constructor(props) {
super(props);
//初始化修改状态属性
this.state = {
visible: false,
activityName:''
}
}
/*生命周期函数--->该方法在完成首次渲染之前被调用-》调用action中ajax方法，获取数据*/
componentWillMount() {
this.props.atyactions.queryAtyView();
}
/**
*条件：当组件确定要更新，在 render 之前调用
*用处：这个时候可以确定一定会更新组件，可以执行更新前的操作
*注意：方法中不能使用 setState ，setState 的操作应该在 componentWillReceiveProps 方法中调用
* @param nextProps
* @param nextState
*/
componentWillUpdate(nextProps, nextState) {
if(nextProps.atyViewDatas.queryAtyInfoById.status==="yes"){
dateArray.length=0;
rateArray.length=0;
const array=nextProps.atyViewDatas.queryAtyInfoById.returnDatas;
const converRateArray=array[0].converRateArray;
converRateArray.map((item, index) =>{
dateArray.push(item.activityDate);
rateArray.push(item.converRate);
converRate=array[0].converRate;
} );
}else{
converRate=null,
dateArray=[],
rateArray=[];
}
//echarts中获取数据的option设置
optionDatas ={
tooltip : {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
text: '整体转化率：'+ converRate*100+"%" +" "
+ '更多详情请点击>>',
//backgroundColor:'#278BDD',
//borderColor: '#ccc',
//borderWidth: 0,
padding: 10,
link:'/activityManage' ,
textStyle: {
fontFamily: '微软雅黑',
fontSize: 14,
fontStyle: 'normal',
fontWeight: 'normal',
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {}
}
},
//布局设置，类似于margin
grid: {
left: '3%',
right: '2%',
bottom: '10%',
containLabel: true
},
//X轴数据设置dateArray
xAxis : [
{
type : 'category',
boundaryGap : false,
data : dateArray
}
],
yAxis : [
{
type : 'value'
}
],
//大面积折线图最下面的伸拉条设置，展示30天数据
dataZoom: [{
type: 'inside',
start: 0,
end: 30
}, {
start: 0,
end: 30,
//handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
//折线图图标和线条设置以及Y轴数据设置rateArray
series : [
{
name:'转化率',
type:'line',
stack: '总量',
symbol:'star',//节点性状
itemStyle:{
normal:{
color: "#278BDD" //图标颜色
}
},
lineStyle:{
normal:{
width:3, //连线粗细
color: "#278BDD" //连线颜色
}
},
data:rateArray
}
]
};
}
render(){
return(
<div className="atyViewBg">
<Row style={{marginRight:-20}}>
<Col span={24} className="ehcharts">
<ECharts option={optionDatas} />
</Col>
</Row>
</div>
);
}
}
//定义组件默认的属性值(如果父组见没有传递数据，使用默认数据)
ReactEcharts.defaultProps = {};
//校验从父组件传递的属性值是否符合
ReactEcharts.propTypes = {};
//将ReactEcharts组建开放，其他组件只要在文件开始引入改组件即可引用
export default ReactEcharts;