react-echarts之折线图的显⽰
react中想要实现折线图和饼图的功能，需要引⼊react-echarts包，然后再实现折线图的功能。我这⾥引⽤的版本是：0.1.1。其他的写法参echarts官⽹即可。下⾯详细讲解的是我在react+redux+router+webpack+antd脚⼿架上⾯完成的折线图和饼图。 
  这篇⽂章主要讲解的是折线图，折线图主要分为普通的折线图和⼤⾯积折线图，普通的折线图⼜分为三种获取单个折线图、两个折线图、多个每⾏两个折线图。
⼤⾯积折线图，echarts3官⽹⼤⾯积折线图官⽹实例如图，⽹址：echarts.baidu/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.urnDatas;
const converRateArray=array[0].converRateArray;
converRateArray.map((item, index) =>{
dateArray.push(item.activityDate);
rateArray.verRate);
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;
⼤⾯积折线图
效果图如下：
普通折线图，echarts3官⽹普通折线图官⽹实例如图，⽹址：echarts.baidu/demo.html#area-stack
在这⾥我讲解两种折线图动态获取，⼀个是每次获取两个折线图（除了数据不⼀样，其他⼀样），另⼀个是获取多个两个折线图。主要⽤到的⽅法是ES6中的map循环，想了解该语法，请访问如下⽹址：es6.ruanyifeng/#docs/set-map
1. 每次获取两个折线图（除了数据不⼀样，其他⼀样），详细讲解在代码中，和上⾯重复的部分就不再详细讲解。
1 import React, {PropTypes, Component} from 'react';
2 import ECharts from 'react-echarts';
3 import {Row, Col} from 'antd';
4 import '../../../../common/sass/evaluate/evaluate.scss';
5
6 export default class OverallConverRate extends React.Component {
7//
8    constructor(props) {
9        super(props);
10        let d = new Date();
11this.state = {
12            echartsFlag: false,
13            queryParam: {
14                'activityId': this.props.evaluateData.activity.activityId,//活动ID
15                'statisDate': d.getFullYear() + "" + (d.getMonth() + 1) + "" + d.getDate(),//查询⽇期默认当天
16                'userType': 1,//⽤户类型：1是全部⽤户，2是注册⽤户
17            }
18        }
19    }
20    componentWillMount() {
21//调⽤action中的ajax⽅法，获取数据
22this.props.actions.overAllConverRateData(this.state.queryParam);
23    }
24
25    componentWillReceiveProps(nextProps) {
26if (nextProps.evaluateData.allConverRateData.dateArr.length > 0) {
27this.setState({echartsFlag: true});
28        }
29    }
30//echart⽅法
31    echarts() {
32        const optionUsers = {
33            tooltip: {
34                trigger: 'axis'
35            },
36            grid: {
37                left: '5%',
38                right: '5%',
39                top:'10px',
40                bottom: '5%',
41                containLabel: true
42            },
43            xAxis: [
44                {
45                    type : 'category',
46                    boundaryGap : false,
47                    axisTick:{
48                        show:false,//是否显⽰坐标轴刻度
49                    },
50/*设置X轴字体样式*/
51                    axisLabel: {
52                        show: true,
53                        interval: 0,
54                        rotate: 20,//倾斜30度
55                        textStyle: {
56                            color: '#666',
57                            fontSize: 12,
58                            fontFamily: '微软雅⿊'
59                        }
60                    },
61                    axisLine: {
62                        lineStyle:{
63                            color:'#999'
64                        }
65                    },
66                    data: this.props.evaluateData.allConverRateData.dateArr
67                }
68            ],
69            yAxis: [
70                  {
71                    type : 'value',
72                    axisTick:{
73                        show:false,//是否显⽰坐标轴刻度
74                    },
75//splitNumber:10,//增加Y轴刻度变多
76/*设置y轴字体样式*/
77                    axisLabel: {
78                        show: true,
79                        formatter: '{value}%',
80                        textStyle: {
81                            color: '#666',
82                            fontSize: 12,
83                            fontFamily: '微软雅⿊'
84                        }
85                    },
86                    axisLine: {
87                        lineStyle:{
88                            color:'#999'
89                        }
90                    }
91                }
92            ],
93            series: [
94                {
95                    name: '推荐⼈次转化率',
96                    type: 'line',
97                    stack: '总量',
98                    symbol: 'star',//节点性状
99                    itemStyle: {
100                        normal: {
101                            color: "#278BDD" //图标颜⾊
102                        }
103                    },
104                    lineStyle: {
105                        normal: {
106                            width: 2,  //连线粗细
107                            color: "#278BDD"  //连线颜⾊
108                        }
109                    },
110                    smooth: true,//折线图是趋缓的
111                    data: this.props.evaluateData.allConverRateData.userRateArr 112                }
113            ]
114        };
115        const optionItems = {
116            tooltip: {
117                trigger: 'axis'
118            },
119            grid: {
120                left: '5%',
121                right: '0',
122                top:'10px',
123                bottom: '5%',
124                containLabel: true
125            },
126            xAxis: [
127                {
128                    type : 'category',
129                    boundaryGap : false,
130                    axisTick:{
131                        show:false,//是否显⽰坐标轴刻度
132                    },
133/*设置X轴字体样式*/
134                    axisLabel: {
135                        show: true,
136                        interval: 0,
137                        rotate: 20,//倾斜30度
138                        textStyle: {
139                            color: '#666',
140                            fontSize: 12,
141                            fontFamily: '微软雅⿊'
142                        }
143                    },
144                    axisLine: {
145                        lineStyle:{
146                            color:'#999'
147                        }
148                    },
149                    data: this.props.evaluateData.allConverRateData.dateArr 150                }
151            ],
152            yAxis: [
153                {
154                    type : 'value',
155                    axisTick:{
156                        show:false,//是否显⽰坐标轴刻度
157                    },
158//splitNumber:10,//增加Y轴刻度变多
159/*设置y轴字体样式*/
160                    axisLabel: {
161                        show: true,
162                        formatter: '{value}%',
163                        textStyle: {
164                            color: '#666',
165                            fontSize: 12,
166                            fontFamily: '微软雅⿊'
167                        }
168                    },
169                    axisLine: {
170                        lineStyle:{
171                            color:'#999'
172                        }
173                    }
174                }
175            ],
176            series: [
177                {
178                    name: '推荐内容转化率',
179                    type: 'line',
180                    stack: '总量',
181                    symbol: 'star',//节点性状
182                    itemStyle: {
183                        normal: {
184                            color: "#278BDD" //图标颜⾊
185                        }
186                    },
187                    lineStyle: {
188                        normal: {
189                            width: 2,  //连线粗细
190                            color: "#278BDD"  //连线颜⾊
191                        }
192                    },
193                    smooth: true,//折线图是趋缓的
194                    data: this.props.evaluateData.allConverRateData.itemRateArr
195                }
196            ]
197        };
198//推荐⼈次转化率和推荐内容转化率数组中的最后⼀个数据，在echart标题上（）显⽰
199        const userRateLast = (this.props.evaluateData.allConverRateData.userRateArr[this.props.e
valuateData.allConverRateData.userRateArr.length-1]) ? (this.props.evaluateData.allConverRateData.userRateArr[this.props.evaluateData.allCon 200        const itemRateLast = (this.props.evaluateData.allConverRateData.itemRateArr[this.props.evaluateData.allConverRateData.itemRateArr.length-1]) ? (this.props.evaluateData.allConverRateData.itemRateArr[this.props.evaluateData.allCon 201if (hartsFlag) {
202return <div className="common-echart-body-div">
203                <Col span={11} className="commont-small-ehcharts">
204                    <Col span={14} offset={1}><h2 className="common-echart-title">推荐⼈次转化率({userRateLast})</h2></Col>
205                    <ECharts option={optionUsers} />
206                </Col>
207                <Col span={2} ><div className="common-echart-border"></div></Col>
208              <Col span={11} className="commont-small-ehcharts">
209              <Col span={14} offset={1}><h2 className="common-echart-title">推荐内容转化率({itemRateLast})</h2></Col>
210                    <ECharts option={optionItems} />
211              </Col>
212            </div>;
213        } else {
214return '没有折线图';
215        }
216    }
217
218    render() {
219return (
220            <div className="sceneEvaluateRate">
221                {harts()}{/*调⽤echarts()⽅法*/}
222            </div>
223        );
224    }
225 }
效果图如下：
  2.获取多个两个折线图，代码如下：
1 import React, {PropTypes, Component} from 'react';
2 import ECharts from 'react-echarts';
3 import {Row,Col,Modal} from 'antd';
4 import SceneConverRateModal from './SceneConverRateModal';
5 import '../../../../common/sass/public/echarts.scss';
6
7 export default class SceneConverRate extends React.Component {
8    constructor(props) {
9        super(props);
10        let d = new Date();
11//初始化修改状态属性
12this.state = {
13            visible: false,
14            queryParam: {
15                'activityId': this.props.evaluateData.activity.activityId,//活动ID
16                'statisDate': d.getFullYear() + "" + (d.getMonth() + 1) + "" + d.getDate(),//查询⽇期默认当天
17                'userType': 1,//⽤户类型：1是全部⽤户，2是注册⽤户
18                'channelId':null,//渠道ID
19                'operpId':null,//运营位ID
20                'rows':3,// 每页总条数据
21                'page':1//  当前页
22            }
23        }
24    }
25//组件渲染之前调⽤⽅法获取数据
26    componentDidMount() {
27//调⽤redux中action中的ajax⽅法，调⽤相对应的java的⽅法获取返回数据
28this.props.actions.sceneEvaluateRate(this.state.queryParam);
29    }
30    render() {
31        const sceneEvaluateRateData = this.props.evaluateData.sceneEvaluateRateData.data;
32return (
33            <div>
34                    <h2 className="common-echart-title-mn">分场景转化率</h2>
35                    {/*map⽅法循环获取echart折线图*/}
36                    {react native
37                        sceneEvaluateRateData.map((item, index) => {
38return <div><EchartsCom item={item} index={index}></EchartsCom></div>
39                    })

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。