datagod/src/charts/Trend.js

import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import React from 'react';




class Trend extends React.Component {



    constructor(props) {
        super(props);

        this.state = {
            data: []
        };
    }


    componentDidMount() {
        fetch('http://localhost:6123/api/data').then(function (response) {
            console.log(response);
            if (response.ok) {
                response.json().then(function (response) {
                    console.log(response)
                    this.setState({ data: response.data.trends })
                })
            }
        }
        )
    }

    getOption(data) {





        var option = {
            tooltip: {
                trigger: 'axis',
                // position: function (pt) {
                //     console.log(pt);
                //     return [pt[0], '10%'];
                // }
            },
            title: {
                left: 'center',
                text: '趋势数据',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'time',
                boundaryGap: false,
                // interval: 10,
                // data: tsdata
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            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: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [

                // {
                //     name: '模拟数据2',
                //     type: 'line',
                //     smooth: true,
                //     symbol: 'none',
                //     sampling: 'average',
                //     itemStyle: {
                //         color: 'rgb(164, 158, 131)'
                //     },
                //     areaStyle: {
                //         color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [{
                //             offset: 0,
                //             color: 'rgb(164, 158, 158)'
                //         }, {
                //             offset: 1,
                //             color: 'rgb(164, 158, 131)'
                //         }])
                //     },
                //     data: data2
                // }
            ]
        };

        for (var d of data) {
            var sdata = {
                name: d.name,
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    color: 'rgb(64, 158, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(64, 158, 158)'
                    }, {
                        offset: 1,
                        color: 'rgb(64, 158, 131)'
                    }])
                },
                data: d.values
            }
            option.series.push(sdata)
        }

        return option;
    }

    render() {

        const { data } = this.state;
        // console.log("123");



        // var data1 = [];
        // var now = new Date();

        // data1.push([new Date(now.getTime() + 3600 * 1000), 100])
        // data1.push([new Date(now.getTime() + 3600 * 2000), 120])
        // data1.push([new Date(now.getTime() + 3600 * 3000), 140])


        // var data2 = [];
        // data2.push([new Date(now.getTime() + 3600 * 1000), 110])
        // data2.push([new Date(now.getTime() + 3600 * 2000), 130])
        // data2.push([new Date(now.getTime() + 3600 * 3000), 150])


        return (

            <ReactEcharts
                notMerge={true}
                lazyUpdate={true}
                option={this.getOption(data)}
                style={{ width: "100%", height: "100%" }}
            />

        )
    }
}

export default Trend;