Echarts Dynamic Data Graph usage

Echarts Pure JS Graphical report control, specifically please Baidu, here in the project used in the implementation of a dynamic chart chart.

Taking the dynamic CPU usage as an example, the data is obtained by AAJX request, and the server returns the value.

Official Demo:http://echarts.baidu.com/demo.html#dynamic-data

First step: Download Echart.min.js

Step two: Copy the files to the Project Scripts folder

Step three: Create a new test page

Fourth step: Look at the code

Front:

Html:
<script type= "Text/javascript" src= ". /.. /scripts/echarts.min.js "></script><div>
<div id= "Cpumain" style= "width:800px;height:500px;" >//Chart Container </div>
</div>

Js:

Function cpuchart ()  {        var dom =  document.getElementById ("Cpumain");     var mychart = echarts.init (DOM);     var app = {};    option = null;     option = {        title: {             text:  ' CPU usage ',             subtext:  ' servers: '  + ip         },        tooltip: {             trigger:  ' axis '          },        legend: {             data: [' CPU utilization ']        },         toolbox: {            show:  true,            feature: {                 dataView: {  readonly: false },                 restore: {},                 saveAsImage: {}             }        },         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--) &NBsp {                         //res.push (len + 1);                     }                     return res;                 }) ()              }         ],        yAxis: [             {                 type:  ' value ',                 scale: true,                 name:  ' occupancy rate ',                 max: 100,                 min: 0,                 boundaryGap: [0.2, 0.2]             }        ],         series: [            {                 name:  ' occupancy rate ',                 type:  ' Line ', &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBsp;          data:  (function  ()  {                      var res = [];                     var len = 0;                     while  (len < &NBSP;5)  {                         res.push ((Math.random ()  * 10 + 5). ToFixed (1)  - 0);                         len++;                     }                     return res;                 }) ()              }        ]     };    clearinterval (App.timeticket);    app.count = 11;     app.timeticket = setinterval (function  ()  {         axisData =  (New date ()). toLocaleTimeString (). Replace (/^\d*/,  ");         $.ajax ({             url: //Request Address,             type:  ' Post ', &NBSP;&NBsp;          data: { ip: ip },             success: function  (msg)  {                 var data0  = option.series[0].data;                 var datas = msg.split (' | ');                 if  (datas [0] ==  "-1")  {                     data0.shift ();                     data0.push ( -1);                 }                else {                      data0.shift ();                     data0.push (datas[1]);                 }              }         })          option.xaxis[0].data.shift ();         option.xaxis[0].data.push ( Axisdata);         mychart.setoption (option);     },  2100);    ;    if  (option && typeof  option ===  "OBject ")  {        var starttime = +new date ();         mychart.setoption (option, true);         var endtime = +new date ();         var updateTime = endTime - startTime;         // console.log ("time used:",  updatetime);     }}


For a complete example, please leave a message if necessary.

Echarts Dynamic Data Graph usage