echarts-for-react/demo/DynamicChartComponent.jsx

baidu Echarts(v3.0) components for react

import React from 'react';
import ReactEcharts from '../lib/echarts-for-react';

const DynamicChartComponent = React.createClass({
    propTypes: {
    },
    timeTicket: null,
    count: 51,
    getInitialState: function() {
        return {option: this.getOption()};
    },
    fetchNewDate: function() {
        let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
        let option = this.state.option;
        let data0 = option.series[0].data;
        let data1 = option.series[1].data;
        data0.shift();
        data0.push(Math.round(Math.random() * 1000));
        data1.shift();
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

        option.xAxis[0].data.shift();
        option.xAxis[0].data.push(axisData);
        option.xAxis[1].data.shift();
        option.xAxis[1].data.push(this.count++);
        this.setState({option: option});
    },
    componentDidMount: function() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
        this.timeTicket = setInterval(this.fetchNewDate, 1000);
    },
    componentWillUnmount: function() {
        if (this.timeTicket) {
            clearInterval(this.timeTicket);
        }
    },
    getOption: function() {
        const option = {
            title: {
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['最新成交价', '预购队列']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                top: 60,
                left: 30,
                right: 60,
                bottom:30
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            visualMap: {
                show: false,
                min: 0,
                max: 1000,
                color: ['#BE002F', '#F20C00', '#F00056', '#FF2D51', '#FF2121', '#FF4C00', '#FF7500', 
                        '#FF8936', '#FFA400', '#F0C239', '#FFF143', '#FAFF72', '#C9DD22', '#AFDD22',
                        '#9ED900', '#00E500', '#0EB83A', '#0AA344', '#0C8918', '#057748', '#177CB0']
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function (){
                        let now = new Date();
                        let res = [];
                        let len = 50;
                        while (len--) {
                            res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                            now = new Date(now - 2000);
                        }
                        return res;
                    })()
                },
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function (){
                        let res = [];
                        let len = 50;
                        while (len--) {
                            res.push(50 - len + 1);
                        }
                        return res;
                    })()
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '价格',
                    max: 20,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '预购量',
                    max: 1200,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }
            ],
            series: [
                {
                    name:'预购队列',
                    type:'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 4,
                        }
                    },
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return idx * 10;
                    },
                    animationDelayUpdate: function (idx) {
                        return idx * 10;
                    },
                    data:(function (){
                        let res = [];
                        let len = 50;
                        while (len--) {
                            res.push(Math.round(Math.random() * 1000));
                        }
                        return res;
                    })()
                },
                {
                    name:'最新成交价',
                    type:'line',
                    data:(function (){
                        let res = [];
                        let len = 0;
                        while (len < 50) {
                            res.push((Math.random()*10 + 5).toFixed(1) - 0);
                            len++;
                        }
                        return res;
                    })()
                }
            ]
        };

        return option;
    },
    render: function() {
        let code = "<ReactEcharts ref='echartsInstance' \n" +
                    "    option={this.state.option} />\n";
        return (
            <div className='examples'>
                <div className='parent'>
                    <label> use React state to render dynamic chart</label>
                    <ReactEcharts ref='echarts_react'
                        option={this.state.option} 
                        style={{height: 300}} />
                    <label> code below: use state of react to render dynamic chart</label>
                    <pre>
                        <code>{code}</code>
                    </pre>
                </div>
            </div>
        );
    }
});

export default DynamicChartComponent;