Fast Echarts-based Big data visualization

[Author]: Kwu

Fast Echarts-based Big Data visualization, Echarts pure JS Implementation of the charting tools, the steps for rapid development are as follows:

1, the introduction of Echarts-dependent JS Library

<script type= "Text/javascript" src= "js/esl/esl.js" ></script><script type= "Text/javascript" src= "js/ Echarts.js "></script><script type=" Text/javascript "src=" Js/jquery.js "></script>

2, set the display div

<!--prepare a DOM--><div id= "main" style= "height:300px" with size (wide height) for echarts ></div>

3, the plot JS

var mychart;var option;//drawing function Drawcharts (Echartshomepath) {//Path configuration require.config ({paths: {echarts: Echartshomepath + ' JS '}})//use require ([' echarts ', ' echarts/chart/bar ', ' echarts/chart/line '], function (EC) {MyChart =  Ec.init (document.getElementById (' main '));//Website copy option start option = {title: {text: ' Evaporation and precipitation in a region ', subtext:  ' Purely fictitious '}, tooltip: {trigger: ' Axis '}, Legend: {data:[' evaporation ']}, Toolbox: {Show            : True, Feature: {mark: {show:true}, DataView: {show:true, readonly:false}, Magictype: {show:true, type: [' line ', ' Bar ']}, restore: {show:true}, Saveasimage: {show:true }}}, Calculable:true, Xaxis: [{type: ' Category ', data: [' January ', ' February ', ' 3        Month ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '}], YAxis: [{type: ' value '           }], series: [{ Name: ' Evaporation ', type: ' Bar ', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],  Markpoint: {data: [{type: ' Max ', Name: ' Maximum value '}, {type : ' min ', Name: ' Minimum value '}]}, Markline: {data: [{                    Type: ' Average ', Name: ' Average '}]}}]}; Website Copy option end Myinterval (Restpath);}); Fill data function setresult (result, option, MyChart) {if (result) {Option.title.text = "Daily apputrack trend chart"; O Ption.title.subtext = "Apputrack"; option.legend.data[0] = "Apputrack"; option.xaxis[0].data = Result.day;o Ption.series[0].name = "Apputrack"; option.series[0].data = result.cnt;mychart.setoption (option);}}

4. Ajax gets RESTful data

Ajax gets Data function Myinterval (Restpath) {$.ajax ({type: ' Get ',//Jquey is not supported for post-way cross-domain Async:false,url:baseurl +restpath ,  //cross-domain request Urldatatype: ' Jsonp ', Jsonp: ' Callback ',//The server is used to receive the callback call of the function name of the parameter success:function (result) { Setresult (result, option, mychart);},error:function () {alert (' fail ');}});

5. Timing scheduling and parameter setting

Ajax gets Data function Myinterval (Restpath) {$.ajax ({type: ' Get ',//Jquey is not supported for post-way cross-domain Async:false,url:baseurl +restpath ,  //cross-domain request Urldatatype: ' Jsonp ', Jsonp: ' Callback ',//The server is used to receive the callback call of the function name of the parameter success:function (result) { Setresult (result, option, mychart);},error:function () {alert (' fail ');}});

Show:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Fast Echarts-based Big data visualization