datagod/src/charts/Trend.js

import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import React from 'react';
import { Button, DatePicker, Row } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';  // 引入中文包
import {dateFormat, defaultDateFormat, TrendType} from './Base.js';
import config from '../Config.js';

const { RangePicker } = DatePicker;


class Trend extends React.Component {

    state = {
        data: [],
        type: {
            current: TrendType.OneDate,


        }
    };

    componentDidMount() {
        var now = new Date()
        this.selectDate( defaultDateFormat(now) )
    }

    getOption(trendtype, data) {
        
        var interval;
        var fm ;
        if(trendtype.current === TrendType.OneDate) {
            interval = 3600 * 1000;
            fm =   function (value, index) {
                var tp = new Date(value)
                return tp.getFullYear() + "-" + (tp.getMonth() + 1) + "-" + tp.getDate() + " " + tp.getHours()
            };        
        } else {
            interval = 3600 * 1000 * 24;
            fm = function (value, index) {
                var tp = new Date(value)
                return tp.getFullYear() + "-" + (tp.getMonth() + 1) + "-" + tp.getDate()
            };
        }

        var option = {
            tooltip: {
                trigger: 'axis',
                // position: function (pt) {
                //     console.log(pt);
                //     return [pt[0], '10%'];
                // }
            },
            title: {
                left: 'center',
                text: '趋势数据',
            },
            legend: {
                left: 'right',
                data: [],
            },
            // toolbox: {
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none'
            //         },
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {
                type: 'time',
                boundaryGap: false,
                interval: interval,
                // data: tsdata
                axisLabel: {
                    formatter: fm,
                },
            },
            aria: {
                show: true
            },
            yAxis: {
                type: 'value',
                // boundaryGap: [0, '100%']
                axisLabel: {
                    formatter: function (value, index) { 
                        if( typeof value == "number") {
                            if(value >= 100000000) {
                                return (value / 10000).toFixed(4) + "亿"
                            } else if(value >= 10000) {
                                return (value / 10000).toFixed(2) + "万"
                            } else {
                                return value
                            }
                        }
 
                    }
                }
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 100
            }, {
                start: 0,
                end: 100,
                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: '100%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
            ]
        };


        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            // var color = colors[i];

            var tvalues = []
            for (var value of d.values) {
                tvalues.push([value.time_point * 1000, value.value])
            }

            tvalues.sort()
            option.legend.data.push(d.name);

            var sdata = {
                name: d.name,
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                areaStyle: {
                },
                data: tvalues
            }
            option.series.push(sdata)
        }

        return option;
    }

    selectDate(date) {
        fetch(`${config.trendurl}?date=${date}`).then((response) => {
            if (response.ok) {
                response.json().then((response) => {
                    if (response.code === 0) {
                        this.setState({ data: response.data.trends, type: {current: TrendType.OneDate}  })
                    }
                })
            }
        });
    }

    selectRangeDate(start, end) {
        fetch(`${config.trendurl}?start=${start}&end=${end}`).then((response) => {
            if (response.ok) {
                response.json().then((response) => {
                    if (response.code === 0) {
                        this.setState({ data: response.data.trends, type: {current: TrendType.RangeDate }})
                    }
                })
            }
        });
    }

    render() {

        const { data, type  } = this.state;
        return (
            <div style={{height: "100%"}}>
                <Row style={{marginLeft: "6%", marginBottom: "10px"}}>
                    <Button onClick={ () => this.selectDate(defaultDateFormat(new Date()))} >今天</Button>
                    <Button onClick={ () =>  {
                        var now = new Date(); 
                        var end = defaultDateFormat(now)
                        now -= 3600 * 24 * 1000 * 7
                        var start = defaultDateFormat(new Date(now))
                        this.selectRangeDate(start, end);
                    } }>7天</Button>
                    <Button >30天</Button>
                    <RangePicker size="small" style={{marginLeft: "5px"}} />
                    <DatePicker size="small" style={{marginLeft: "5px"}} /> 
                </Row>
            
            <ReactEcharts
                notMerge={true}
                lazyUpdate={true}
                option={this.getOption(type, data)}
                style={{ width: "100%", minHeight: "90vh" }}
            />
   
            </ div>

        )
    }
}

export default Trend;