Echarts Simple Application

After comparing the highcharts, I decided to use Echarts in the project to do the chart display because of the copyright issue.

Echarts update is fast, has been updated to ECHARTS3, feel 3 performance is more dazzling, cooler, said performance is better, but considering the overall style of the project, or the use of ECHARTS2 version.

Before the project started, do a simple demo, combined with the Easyui grid to present a histogram, and later consider the Echarts JS for two times encapsulation.

The use of echarts is similar to that of Highcharts, which was familiar with the basic usage of such a framework after a demo based on Highcharts.

The official demo and documentation are very detailed, and you can easily make all the graphics you want, according to the documentation and demo.

Some people in the garden are also using. NET to make it easier for. NET users to better use Echarts. Blog address: echarts. NET class Library Open source

The first step is to add a echarts reference

<type= "Text/javascript"  src= ": /echart/echarts.js "></script>

Step two, add a container

<id= "Mainmap"  style= "height:400px; width:55%; float: right; " ></ Div >

The third step, JS implementation

1<script type= "Text/javascript" >2 functionGetData (keyWord) {//ajax mode dynamically acquires JSON format data3 $.ajax ({4Type: "Get",5DataType: "JSON",6URL: "Xxxxx.ashx",7Data: {t: ' m ', Keyword:keyword},8Successfunction(data) {9                         if(Data.length = = 0) {TenAlert ("No data! "); One}Else { ADrawbar (data, "Mainmap")) -                         } -                     }, theErrorfunction () { -Alert ("Failed to load data, please try again!") "); -                     } -                 }); +             } -  functiondrawbar (data, id) { +                 varXData = []; A                 varDatas = []; at                 varWEIGHT = []; -                 varGrossweight = [] -                  for(vari = 0; i < data.length; i++) {//Convert JSON format to echarts array format -Xdata.push (Data[i]. Modifyon | | ","); -Datas.push ({name:data[i]. Modifyon, Value:data[i]. SUM | | 0 }); -Weight.push ({name:data[i]. WEIGHT, Value:data[i]. WEIGHT | | 0 }); inGrossweight.push ({name:data[i]. Grossweight, Value:data[i]. Grossweight | | 0 }); -                 } to                 //Path Configuration + Require.config ({ - packages: [{ theName: ' Echarts ', *Location: '/echart/echarts/src ', $Main: ' Echarts 'Panax Notoginseng                     }] -                 }); the                 //Use + require ( A                     [ the' Echarts ', +' Echarts/chart/line ', -' Echarts/chart/gauge ', $' Echarts/chart/bar ' $                     ], -                     function(EC) { -                         //Find div container, initialize echarts chart the                         varMyChart =Ec.init (document.getElementById (ID)); -                         varoption = {Wuyi tooltip: { theShowtrue -                             }, Wu title: { -Text: ' Daily weighing data ', AboutSubtext: ' I'm the subtitle ' $                             }, - legend: { -Data: [' Total number ', ' total net weight ', ' gross gross weight '] -                             }, A Toolbox: { +Showtrue, the feature: { -DataView: {show:true, ReadOnly:false }, $Magictype: {show:true, type: [' line ', ' Bar ', ' stack ', ' tiled '] }, theRestore: {show:true }, theSaveasimage: {show:true } the                                 } the                             }, - Xaxis: [ in                                 { theType: ' Category ', the Data:xdata About                                 } the                             ], the YAxis: [ the                                 { +Type: ' Value ' -                                 } the                             ],Bayi series: [ the                                 { the"Name": "Total number of pieces", -' type ': ' Bar ', -"Data": Datas the                                 }, { the"Name": "Total net Weight", the' type ': ' Bar ', the"Data": WEIGHT -                                 }, { the"Name": "Total gross weight", the' type ': ' Bar ', the"Data": Grossweight94                                 } the                             ] the                         }; the mychart.setoption (option);98                     } About                 ); -             }101</script>

Implemented by:

Echarts Simple Application