newICSS/src/components/AssessResult/ChartItem/index.jsx

import React, { Component } from "react";
import style from "../index.less";
import { Radio} from '@commonComp';
import echarts from 'echarts';
import config from "@config";
import 'zrender/lib/svg/svg';
/**
 * 来源于后台数据
 * 图表类型
 *
 *
 * **/
class ChartItem extends Component {
  constructor(props) {
    super(props);
    this.getContainers = this.getContainers.bind(this);
    this.rangChange = this.rangChange.bind(this);
    this.getXAxisArr = this.getXAxisArr.bind(this);
  }
  getXAxisArr(type){
    const endDate = this.props.endDate;
    let now = endDate?new Date(endDate).getTime():new Date().getTime();
    let arr = [],temp=0;
    //近一周
    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,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='';
    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)+":00:00");
      }
      return arr;
    }else{
      return str;
    }
  }
  rangChange(type,i){
    const {initFn,handleChange,data,pindex} = this.props;
    const times = this.getXAxisArr(type);
    const startTime=times[0];
    const endTime=times[times.length-1];
    const range = [startTime,endTime];
    const temp=this.props.timeTypes;
    if(!data[startTime+endTime]){
      initFn&&initFn({range,rangeType:type,index:i,pindex,getNew:false});
    }
    handleChange&&handleChange(Object.assign(temp,{[i]:type}));
  }
  getContainers(){
    const timeTypes = this.props.timeTypes;
    const range = this.getXAxisArr(config.chartDismen);
    const obj = this.props.data[range[0]+range[range.length-1]];
    const {endDate} = this.props;
    let arr = [];
    for(let i in obj){
      arr.push(<Chart data={obj[i]} endDate={endDate} type={timeTypes&&timeTypes[i]} index={i} getXAxisArr={this.getXAxisArr} handleRangeChange={this.rangChange}/>)
    }
    return arr;
  }
  componentDidMount(){
    const {initFn,pindex} = this.props;
    const type = config.chartDismen;
    const times = this.getXAxisArr(config.chartDismen);
    const startTime=times[0];
    const endTime=times[times.length-1];
    const range = [startTime,endTime];
    initFn&&initFn({range,rangeType:type,pindex,getNew:true});
  }
  render() {
    const {title} = this.props;
    return <div className={style['assess-item']}>
      <h2>{title}</h2>
      <div className={style['item-content']}>
        {this.getContainers()}
      </div>
    </div>;
  }
}

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,data,getXAxisArr,type,endDate} = this.props;
    const xAxis = getXAxisArr(type);
    const id = endDate?'chart'+endDate+index:'chart'+index;
    let series = [],names=[],inx=-1;
    let myChart = echarts.init(document.getElementById(id) ,null, {renderer: 'svg'});
    let xAxisArr = [...xAxis];

    const interval = {
      week:23,
      month:4,
      sixMonth:9,
      year:60
    };
    data&&data.map((it)=>{
      let values=new Array();
      let name='';
      it&&it.creatTime.map((x,i)=>{
        inx=xAxis.findIndex((a)=>{
          name=type=='week'?x.substr(0,13):x.substr(0,10);
          return a.substr(0,13)==name;
        });     //日期对应横坐标的位置
        if(inx!=-1){
          if(type=='week'){
            xAxisArr[inx] = x;
          }
          values[inx] = it.indexValue[i];       //值对应横坐标的位置
        }
      });
      names.push(it.itemName);
      series.push({
        name: it.itemName,
        type: 'line',
        data: values,
        showAllSymbol:true
      });
    });
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'axis',
        textStyle:{
          fontSize:12
        }
      },
      legend: {
        type:'scroll',
        /*formatter: function (name) {
          return name.split("-")[name.split("-").length-1];
        },*/
        data:names,
        padding:0,
        itemHeight:16,
      },
      grid:{
        top:80
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisArr,
        splitLine:{
          show:true
        },
        axisPointer:{
          //show:false
        },
        axisTick:{
          show:false,
          interval:interval[type]
        },
        axisLabel:{
          show:true,
          showMaxLabel:true,
          interval:interval[type],
          rotate:65,
          fontSize:10,
          formatter: function(value,index){
            return value.substr(0,10);
          }
        }
      },
      yAxis: {
        type: 'value',
        axisTick:{
          show:false
        },
        axisLabel:{
          show:true,
          showMaxLabel:true
        }
      },
      series: series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  timeSwitch(type){
    const {handleRangeChange,index} = this.props;

    handleRangeChange&&handleRangeChange(type,index);

    const that=this;
    setTimeout(()=>{
      that.drawChart();
    },300);

  }
  componentDidMount(){
    this.drawChart();
  }
  render(){
    const {type,index,endDate} = this.props;
    return <div className={style['cont']}>
              <div className={style['time-range']}>
                <span className={type=='year'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("year")}>近一年</span>
                <span className={type=='sixMonth'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("sixMonth")}>近六个月</span>
                <span className={type=='month'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("month")}>近一个月</span>
                <span className={type=='week'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("week")}>近一周</span>
              </div>
              <div className={style["chart-box"]} id={endDate?'chart'+endDate+index:'chart'+index}></div>
            </div>;
  }
}

export default ChartItem;