开始使用HTML Canvas 绘制实时动态折线图 嗯.......但是觉得不太完美。
然后我们老师说前端绘图为什么不用开源的百度Echart呢，哈哈后来用着发现真香😁（老师厉害👍）
Echart官网为：https://echarts.apache.org/zh/index.html
然后重新写了一个实时绘制的demo，注意这里需要下载Echart，教程在这，由于要是使用js绘制动态图，所以还需要引用jquery-1.12.4.min.js。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> <script src="jquery-1.12.4.min.js"></script> <script type="text/javascript"> </script> <script> var interval; var x = 0; var y = 10; var data = []; var list = []; function Line_append(x_value,y_value) { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); data.push(y_value); // 指定图表的配置项和数据 var option = { title: { text: 'Line Chart' }, backgroundColor: '#FFFFFF', legend: { data:['Loss'] }, tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置 trigger: 'axis' }, calculable : true, xAxis : [ { // 让x轴自适应 <!--axisLabel:{--> <!--rotate: 30,--> <!--interval:0--> <!--},--> axisLine:{ lineStyle :{ color: '#CCCCCC' } }, type : 'category', boundaryGap : true, //不从0刻度开始 // data:[] X轴的定义 data : function (){ list.push(x_value); return list; }() } ], yAxis : [ { type : 'value', axisLine:{ lineStyle :{ color: '#CCCCCC' } } } ], series : [ { name:'Loss', type:'line', // symbol:'none',//原点 smooth: 0,//弧度 color:['#66AEDE'], // data:Y轴数据 data:data }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } var interval; $(function(){ $("#start").click(function(){ interval = setInterval(refresh,1000); }); }); function refresh(){ y = Math.round(Math.random()*100*100)/100; Line_append(x,y); x = x + 1; } </script> </head> <body> <button id="start">开始绘制</button> <div id="main" style="width: 100%;height:400px;"></div> </body> </html>
绘制结果如下：
嗯，多了俩优点：
Echart会自动缩放横纵坐标显示的值，不会挤在一起；
将鼠标放在每个折线点都会显示其具体信息值。
相关的其他Echart图表例子可在这里下载：主要有动态折线图、饼状图和柱状图，并包含相关引用：echarts.min.js和jquery-1.12.4.min.js。
希望对大家有帮助，转载请注明出处呐哈👀！
