SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>

            var echarts;
            var chart;
            var myChart;

            require([
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/component/legend',
                'echarts/component/grid',
                'echarts/component/tooltip',
                'echarts/component/dataZoom',
                'echarts/component/markLine'
            ], function (ec) {

                echarts = ec;

                chart = myChart = echarts.init(document.getElementById('main'), null, {
                    renderer: 'canvas'
                });

// -------------------------------------------------------------------
// -------------------------------------------------------------------
// -------------------------------------------------------------------

var app = {};

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : [{
        type: 'inside',
        start : 0,
        end : 100
    },
    {
        type: 'slider',
        start : 0,
        end : 100
    }
    ],
    xAxis : [
        {
            type : 'value',
            scale: true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    var n = [
                        len,
                        (Math.random()*10 + 5).toFixed(1)
                    ];
                    res.push({name: n[0], value: n});
                    len++;
                }
                return res;
            })(),
            animation: true,
            animationDurationUpdate: 500,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
    ]
};

myChart.setOption(option);

clearInterval(app.timeTicket);
app.count = 11;
app.timeTicket = setInterval(function (){

    var data0 = option.series[0].data;
    data0.shift();
    var lastData = data0[data0.length - 1].value;
    var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];

    data0.push({name: x[0], value: x});

    myChart.setOption({series: option.series});
}, 2100);


// -------------------------------------------------------------------
// -------------------------------------------------------------------
// -------------------------------------------------------------------


            });

        </script>
    </body>
</html>