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(

);

}

}//定义组件默认的属性值(如果父组见没有传递数据，使用默认数据)

ReactEcharts.defaultProps ={};//校验从父组件传递的属性值是否符合

ReactEcharts.propTypes ={};//将ReactEcharts组建开放，其他组件只要在文件开始引入改组件即可引用

export default ReactEcharts;