Echarts2绘制动态曲线图并给出完整代码

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

标签式单文件引入

http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>ECharts</title></head><body><!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--><!--Step:1 为ECharts准备一个具备大小(宽高)的Dom--><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div><!--Step:2 Import echarts-all.js--><!--Step:2 引入echarts-all.js<script src="js/echarts-all.js"></script>--><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><script type="text/javascript">// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.// Step:3 echarts和zrender被echarts-plain.js写入为全局接口var timeTicket;var myChart = echarts.init(document.getElementById('main'));option = {    title : {        text: '动态数据',        subtext: '纯属虚构'    },    tooltip : {        trigger: 'axis'    },    legend: {        data:['最新成交价', '预购队列']    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}        }    },    dataZoom : {        show : false,        start : 0,        end : 100    },    xAxis : [        {            type : 'category',            boundaryGap : true,            data : (function (){                var now = new Date();                var res = [];                var len = 10;                while (len--) {                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));                    now = new Date(now - 2000);                }                return res;            })()        },        {            type : 'category',            boundaryGap : true,            data : (function (){                var res = [];                var len = 10;                while (len--) {                    res.push(len + 1);                }                return res;            })()        }    ],    yAxis : [        {            type : 'value',            scale: true,            name : '价格',            boundaryGap: [0.2, 0.2]        },        {            type : 'value',            scale: true,            name : '预购量',            boundaryGap: [0.2, 0.2]        }    ],    series : [        {            name:'预购队列',            type:'bar',            xAxisIndex: 1,            yAxisIndex: 1,            data:(function (){                var res = [];                var len = 10;                while (len--) {                    res.push(Math.round(Math.random() * 1000));                }                return res;            })()        },        {            name:'最新成交价',            type:'line',            data:(function (){                var res = [];                var len = 10;                while (len--) {                    res.push((Math.random()*10 + 5).toFixed(1) - 0);                }                return res;            })()        }    ]};var lastData = 11;var axisData;clearInterval(timeTicket);timeTicket = setInterval(function (){    lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);    lastData = lastData.toFixed(1) - 0;    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');        // 动态数据接口 addData    myChart.addData([        [            0,        // 系列索引            Math.round(Math.random() * 1000), // 新增数据            true,     // 新增数据是否从队列头部插入            false     // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头        ],        [            1,        // 系列索引            lastData, // 新增数据            false,    // 新增数据是否从队列头部插入            false,    // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头            axisData  // 坐标轴标签        ]    ]);}, 2100);myChart.setOption(option);</script></body></html>


           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_43680030/article/details/84106064