echart数据实时监控——类似股票走势图

html:

<div id="main" style="width: 600px;height:400px;"></div>

js:

<script type="text/javascript" src="js/lib/echarts.min.js"></script>

<script type="text/javascript">

var apidata = {
params:[
["17/7/10","17/7/12","17/7/14","17/7/16","17/7/18","17/7/20"],
["11","15","8","33","55","21"]
]
}
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
//var myChart = echarts.init(document.getElementById('main'));


function addData(shift) {


date = apidata.params[0];
data = apidata.params[1];
    date.push(parseInt(Math.random()*10));
    data.push(parseInt(Math.random()*10));
    if (shift) {
        date.shift();
        data.shift();
    }


   
}


option = {
            title: {
                text: 'echart实时数据监控--类似股票走势图效果'
            },
            tooltip: {trigger: 'axis',//提示跟随鼠标位置显示
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: apidata.params[0]
            },
            yAxis: {boundaryGap: [0, '100%']},
            series: [{
                name: '销量',
                type: 'line',
                data: apidata.params[1]
            }]
        };


setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }]
    });
}, 2000);


//下面这段代码是必须要加的，否则会报 series.type should be specified.
    if (option && typeof option === "object") {
    myChart.setOption(option, true);
}


</script>