Echarts2绘制动态曲线图并给出完整代码
2018-11-15 16:09
288 查看
分享一下我老师大神的人工智能教程!零基础,通俗易懂!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.t 4000 oLocaleTimeString().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
阅读更多相关文章推荐
- Echarts2绘制动态曲线图并给出完整代码
- Unity动态绘制曲线Mesh的代码
- pyqt中使用matplotlib绘制动态曲线
- 绘制参数曲线走势图的完整类
- 绘图控件第五讲——绘制动态曲线
- 动态数据曲线绘制控件
- R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)
- Android 动态绘制曲线等各种图形
- 纯jsp实现的倒计时动态显示效果完整代码
- MFC绘制动态曲线,用双缓冲绘图技术防闪烁
- MFC绘制动态曲线,用双缓冲绘图技术防闪烁
- SkylineGlobe 6.5 如何实现简单多边形的动态绘制 C#示例代码
- linux动态线程池--原理,这儿的代码不完整
- R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)
- python处理csv数据动态显示曲线实例代码
- iOS 中各种折线.曲线.图形绘制方法集锦(折线图.走势图.柱状图.动态曲线图.形状图.划线图)
- java分形绘制科赫雪花曲线(科赫曲线)代码分享
- linux动态线程池--原理,这儿的代码不完整
- iOS上动态绘制曲线
- 实现通用 Web CAPTCHA 图形验证码 JavaScript 脚本 API 服务 (JavaScript 脚本动态页面引用) 完整代码