Echarts Dynamic Data Display

You will be able to use it later.

First, the introduction of jquery, and then introduce Echarts.js

Second, the Configuration container

Third, configuration path and data options, etc.

<script type= "Text/javascript" >//Path Configurationrequire.config ({paths: {echarts:'/scripts/dist '        }    }); //Userequire ([' Echarts ',                ' Echarts/chart/line ',//load the line module with a straight graph and load it on demand' Echarts/chart/bar '            ],            function(EC) {varMychart=ec.init (document.getElementById (' main '))); varoption ={tooltip:{trigger:' Axis '}, Toolbox: {show:true, x:' Right ', BorderWidth:0, feature:{mark:{show:true}, Dataview:{show:true, ReadOnly:false}, Magictype:{show:true, type:[' line ', ' Bar ']}, Restore:{show:true}, Saveasimage:{show:true}} , calculable:true, Legend: {data:[' Online numbers ']}, Xaxis: [{name:Time, type:' Category ', data: []}], YAxis: [ {Name:Number, type:' Value ', Splitarea:{show:true}}], series: [{ Name:"Online People", type:"Line", data:[], markpoint:{data:[ {type:' Max ', Name: ' Max '}, {type:' min ', Name: ' Minimum value '}]}, markline:{ data:[{type:' Average ', Name: ' Average '}]}, itemstyle:{ normal:{label:{Show: true, textstyle:{color:' Black '                                           }                                      }                                  }            }                        }                    ]                }; varTime=NewDate (); $.getjson (".. /.. /ajax/getchartdata.aspx?time= "+time,function(data) {//Use Post,get, but you need to note that it is JSON type $.each (data,function(Num,val) {}); varlen=data.length; varXarr=NewArray (); varSarr=NewArray ();  for(vari=1;i<=len;i++) {//press the JSON data into the corresponding array xarr[i-1]=data[i-1].date; Sarr[i-1]=data[i-1].num;                     }; option.xaxis[0].data=Xarr; option.series[0].data=Sarr;            Mychart.setoption (option)});    }        ); </script>

Echarts Dynamic Data Display