开始使用HTML Canvas 绘制实时动态折线图嗯.......但是觉得不太完美。
然后我们老师说前端绘图为什么不用开源的百度Echart呢，哈哈后来用着发现真香😁（老师厉害👍）
Echart官网为：/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。
希望对大家有帮助，转载请注明出处呐哈👀！
