|
@@ -2,6 +2,7 @@ import React, { Component } from "react";
|
|
|
import style from "../index.less";
|
|
|
import { Radio} from '@commonComp';
|
|
|
import echarts from 'echarts';
|
|
|
+import config from "@config";
|
|
|
/**
|
|
|
* 来源于后台数据
|
|
|
* 图表类型
|
|
@@ -12,55 +13,92 @@ class ChartItem extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state={
|
|
|
- weekArr:[],
|
|
|
- oneMonthArr:[],
|
|
|
- threeMonthArr:[],
|
|
|
- yearMonthArr:[]
|
|
|
+ timeDismen:props.timeTypes
|
|
|
};
|
|
|
this.getContainers = this.getContainers.bind(this);
|
|
|
+ this.rangChange = this.rangChange.bind(this);
|
|
|
+ this.getXAxisArr = this.getXAxisArr.bind(this);
|
|
|
}
|
|
|
- getXAxisArr(){
|
|
|
+ getXAxisArr(type){
|
|
|
let now = new Date().getTime();
|
|
|
let arr = [],temp=0;
|
|
|
- for(let i=0;i<7;i++){
|
|
|
- temp=i*1000*60*60*24;
|
|
|
- arr.unshift(...this.getDayHours(now-temp));
|
|
|
- }console.log(arr)
|
|
|
+ //近一周
|
|
|
+ switch(type){
|
|
|
+ case 'week':
|
|
|
+ for(let i=0;i<7;i++){
|
|
|
+ temp=i*1000*60*60*24;
|
|
|
+ arr.unshift(...this.getDayHours(now-temp,true));
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'month':
|
|
|
+ for(let i=0;i<30;i++){
|
|
|
+ temp=i*1000*60*60*24;
|
|
|
+ arr.unshift(this.getDayHours(now-temp));
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'sixMonth':
|
|
|
+ for(let i=0;i<180;i++){
|
|
|
+ temp=i*1000*60*60*24;
|
|
|
+ arr.unshift(this.getDayHours(now-temp));
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 'year':
|
|
|
+ for(let i=0;i<365;i++){
|
|
|
+ temp=i*1000*60*60*24;
|
|
|
+ arr.unshift(this.getDayHours(now-temp));
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+
|
|
|
return arr;
|
|
|
}
|
|
|
- getDayHours(time){
|
|
|
+ getDayHours(time,isHour){
|
|
|
const year = new Date(time).getFullYear();
|
|
|
const month = new Date(time).getMonth()+1;
|
|
|
const date = new Date(time).getDate();
|
|
|
const hour = new Date(time).getHours();
|
|
|
let arr=[],temp='';
|
|
|
- for(let i=0;i<24;i++){
|
|
|
- temp = hour-i>-1?hour-i:hour-i+24;
|
|
|
- arr.unshift(year+'-'+(month<10?'0'+month:month)+'-'+(date<10?'0'+date:date)+" "+(temp<10?'0'+temp:temp));
|
|
|
+ const str= year+'-'+(month<10?'0'+month:month)+'-'+(date<10?'0'+date:date);
|
|
|
+ if(isHour){
|
|
|
+ for(let i=0;i<24;i++){
|
|
|
+ temp = hour-i>-1?hour-i:hour-i+24;
|
|
|
+ arr.unshift(str+" "+(temp<10?'0'+temp:temp));
|
|
|
+ }
|
|
|
+ return arr;
|
|
|
+ }else{
|
|
|
+ return str;
|
|
|
}
|
|
|
- return arr;
|
|
|
+ }
|
|
|
+ rangChange(type,index){
|
|
|
+ const {initFn} = this.props;
|
|
|
+ const times = this.getXAxisArr(type);
|
|
|
+ const range = [times[0],times[times.length-1]];
|
|
|
+ const temp=this.state.timeDismen;
|
|
|
+ this.setState({
|
|
|
+ timeDismen:Object.assign(temp,{[index]:type})
|
|
|
+ });
|
|
|
+ initFn&&initFn({range,rangeType:type,index});
|
|
|
}
|
|
|
getContainers(){
|
|
|
- const {nameObj,obj} = this.props.data;
|
|
|
- const {weekArr} = this.state;
|
|
|
+ const timeTypes = this.state.timeDismen;
|
|
|
+ const range = this.getXAxisArr(config.chartDismen);
|
|
|
+ const obj = this.props.data[range[0]+range[range.length-1]];
|
|
|
let arr = [];
|
|
|
for(let i in obj){
|
|
|
- arr.push(<Chart data={obj[i]} index={i} xAxis = {weekArr}/>)
|
|
|
+ arr.push(<Chart data={obj[i]} type={timeTypes&&timeTypes[i]} index={i} getXAxisArr={this.getXAxisArr} handleRangeChange={this.rangChange}/>)
|
|
|
}
|
|
|
return arr;
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
const {initFn} = this.props;
|
|
|
- initFn&&initFn();
|
|
|
- this.setState({
|
|
|
- weekArr:this.getXAxisArr(),
|
|
|
- oneMonthArr:[],
|
|
|
- threeMonthArr:[],
|
|
|
- yearMonthArr:[]
|
|
|
- });
|
|
|
+ const type = config.chartDismen;
|
|
|
+ const times = this.getXAxisArr(config.chartDismen);
|
|
|
+ const range = [times[0],times[times.length-1]];
|
|
|
+ initFn&&initFn({range,rangeType:type});
|
|
|
}
|
|
|
render() {
|
|
|
- const {title,data } = this.props;
|
|
|
+ const {title} = this.props;
|
|
|
return <div className={style['assess-item']}>
|
|
|
<h2>{title}</h2>
|
|
|
<div className={style['item-content']}>
|
|
@@ -73,19 +111,43 @@ class ChartItem extends Component {
|
|
|
class Chart extends Component{
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
+ this.state={
|
|
|
+ chartObj:null,
|
|
|
+ timeRange:'year',
|
|
|
+ week:props.getXAxisArr('week'),
|
|
|
+ month:props.getXAxisArr('month'),
|
|
|
+ sixMonth:props.getXAxisArr('sixMonth'),
|
|
|
+ year:props.getXAxisArr('year')
|
|
|
+ };
|
|
|
this.drawChart = this.drawChart.bind(this);
|
|
|
+ this.timeSwitch = this.timeSwitch.bind(this);
|
|
|
}
|
|
|
drawChart(){
|
|
|
- const {index,xAxis,data} = this.props;
|
|
|
+ const {index,data,getXAxisArr,type} = this.props;
|
|
|
+ const xAxis = getXAxisArr(type);
|
|
|
const id = 'chart'+index;
|
|
|
let series = [],names=[],inx=-1;
|
|
|
- var myChart = echarts.init(document.getElementById(id));
|
|
|
-
|
|
|
- data.map((it)=>{
|
|
|
- let values=new Array(168);
|
|
|
+ let myChart = echarts.init(document.getElementById(id));//this.state['chartObj'+index];
|
|
|
+ /*if(!myChart){
|
|
|
+ this.setState({
|
|
|
+ ['chartObj'+index]:echarts.init(document.getElementById(id))
|
|
|
+ });
|
|
|
+ }*/
|
|
|
+ const interval = {
|
|
|
+ week:24,
|
|
|
+ month:4,
|
|
|
+ sixMonth:9,
|
|
|
+ year:60
|
|
|
+ };
|
|
|
+ data&&data.map((it)=>{
|
|
|
+ let values=new Array();
|
|
|
+ let name='';
|
|
|
//values[24]=10;
|
|
|
- it.creatTime.map((x,i)=>{
|
|
|
- inx=xAxis.findIndex((a)=>{return a==x.substr(0,13)}); //日期对应横坐标的位置
|
|
|
+ it&&it.creatTime.map((x,i)=>{
|
|
|
+ inx=xAxis.findIndex((a)=>{
|
|
|
+ name=type=='week'?x.substr(0,13):x.substr(0,10);
|
|
|
+ return a==name;
|
|
|
+ }); //日期对应横坐标的位置
|
|
|
if(inx!=-1){
|
|
|
values[inx] = it.indexValue[i]; //值对应横坐标的位置
|
|
|
}
|
|
@@ -118,12 +180,12 @@ class Chart extends Component{
|
|
|
},
|
|
|
axisTick:{
|
|
|
show:false,
|
|
|
- interval:24
|
|
|
+ interval:interval[type]
|
|
|
},
|
|
|
axisLabel:{
|
|
|
show:true,
|
|
|
showMaxLabel:true,
|
|
|
- interval:24,
|
|
|
+ interval:interval[type],
|
|
|
rotate:45,
|
|
|
fontSize:10
|
|
|
}
|
|
@@ -144,11 +206,33 @@ class Chart extends Component{
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
+ timeSwitch(type){
|
|
|
+ const {handleRangeChange,index} = this.props;
|
|
|
+ this.setState({
|
|
|
+ timeRange:type
|
|
|
+ });
|
|
|
+ handleRangeChange&&handleRangeChange(type,index);
|
|
|
+ //
|
|
|
+ const that=this;
|
|
|
+ setTimeout(()=>{
|
|
|
+ that.drawChart();
|
|
|
+ },300);
|
|
|
+
|
|
|
+ }
|
|
|
componentDidMount(){
|
|
|
this.drawChart();
|
|
|
}
|
|
|
render(){
|
|
|
- return <div className={style["chart-box"]} id={'chart'+this.props.index}></div>
|
|
|
+ const {timeRange} = this.state;
|
|
|
+ return <div className={style['cont']}>
|
|
|
+ <div className={style['time-range']}>
|
|
|
+ <span className={timeRange=='year'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("year")}>近一年</span>
|
|
|
+ <span className={timeRange=='sixMonth'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("sixMonth")}>近六个月</span>
|
|
|
+ <span className={timeRange=='month'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("month")}>近一个月</span>
|
|
|
+ <span className={timeRange=='week'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("week")}>近一周</span>
|
|
|
+ </div>
|
|
|
+ <div className={style["chart-box"]} id={'chart'+this.props.index}></div>
|
|
|
+ </div>;
|
|
|
}
|
|
|
}
|
|
|
|