Echarts 3.19 Making common graphics non-static

Recently Ali internal use of the chart also opened outward and Baidu seems to have a more conscience, echarts early open.

I learn echarts time to go a lot of detours, after all, who let their own dishes, more hit several times the south wall just know the pain to learn the way, novice on the road, please more magnanimous.

Attached http://echarts.baidu.com/download.html website address: http://echarts.baidu.com/

Pie chart:

Environment: Echarts 3.19 vs2013

Implementation mode: Ajax+ashx+json

Note: The required format for the official website is [{value:23,name: ' xxxx '}] Please do not write the key name wrong

Specific code, you crossing please move your eyes.

<!--Please refer to the file first--
<script src= ". /scripts/jquery-1.8.2.min.js "></script>    <script src=". /scripts/echarts/echarts.min.js "></script>

In the page section, just set up a div.

<div><input type= "button" id= "Btngo" value= "Pie"/> </div>    <div id= "Contanis" style= "width : 800px;height:800px "></div>

Next is the JS part   actually echarts with HTML5 in Canvans or have contact want to know can check data yo  

$ ("#btngo"). Click (function () {///here is the Click event below of course this is also a copy of your conditional query when the var dom = document.getElementById (' Contanis ');            var mycharts = Echarts.init (DOM);                    option = {title: {text: ' Departmental population ratio ', subtext: ' Test data ', X: ' Center '}, tooltip: {trigger: ' item ', Formatte                    R: "{A} <br/>{b}: {C} ({d}%)"}, Legend: {Orient: ' vertical ',                        Left: ' Left ', data: []}, Series: [{                        Name: ' 2012 degrees ', type: ' Pie ', radius: ' 55% ',                            Center: [' 50% ', ' 60% '], data: [], ItemStyle: {                    Emphasis: {shadowblur:10,            shadowoffsetx:0, Shadowcolor: ' Rgba (0, 0, 0, 0.5) '//How could there be a. 5?            It seems to be to see H5 yo}}]}; mycharts.setoption (option);

Next is the Ajax part of the dynamic loading data is the fundamental data fixed how boring, to dry this bowl of Mengpo soup in the Afterlife do UI design corpse

$.ajax ({type: "Get", async:true,// The asynchronous request (the synchronization request will lock the browser, the user's other actions must wait for the request to complete before it can be executed) URL: ". /handler/departmenthandler.ashx ", data: {},//demo no conditional dataType:" JSON ",//Return data form                    As JSON success:function (result) {for (var i = 0; i < result.length; i++)                                            {Name.push (result[i].name);                        } mycharts.setoption ({//Load data graph Legend:{data:name},                Series: [{Data:result}]}); }, Error:function (errormsg) {//The function is executed when the request fails Aler                                           T ("Chart request data failed!");   }            }); 

The ashx part is simpler than the simple serialization of the data

DataTable result =BLL.                      Department.getdeptnumber (); List<object> list =NewList<object>(); foreach (DataRow Drinchresult. Rows) {//attach the required format for echarts: [{value:335, Name: ' Direct Access '}]Deart D=NewDeart (); D.value= Convert.ToInt32 (dr["number"]); //his careless use of values echarts not recognized has been undefinedD.name = dr["D_name"].                                ToString (); List.            ADD (d); } JavaScriptSerializer JSS=NewJavaScriptSerializer (); String JSON=JSS. Serialize (list);p Ublic class Deart//Actually, you don't have to define your own insurance. value is int{ Publicintvalue {get; set;}                   public string name {get; set;} }

Attach it:

Bar chart:

Environment: Echarts 3.19 vs2013

Implementation mode: Ajax+ashx+json

Note: The required format for the official website is: [5,6,7,9,34] Array type

Specific code, you crossing please move your eyes.

<!--JS code--
<script src= ". /scripts/jquery-1.8.2.min.js "></script>  <script src=". /scripts/echarts/echarts.min.js "></script>

<div> <%--button Trigger--%> <input type= "button" id= "Btncanv" value= "Go to Pikachu"/> </div> <%--declares a div to be used for canvas-drawn pictures--%> <div id= "Contanis" style= "width:1000px;height:800px" > <sc Ript type= "Text/javascript" >                       $("#btncanv"). Click (function () {                //get to draw Dom                varDom = document.getElementById ("Contanis"); varMyChart =Echarts.init (DOM); Mychart.setoption ({title: {text:' Asynchronous Data loading example '//Picture Title}, tooltip: {}, Legend: {data: [' Departmental population ']}, Xaxis: {data: []}, YAxis: {}, Series: [{name:' 2015 ', type:' Bar ',//can change to line (polyline)Data: []//here, empty the back and use Ajax to assign him value .                    }]                });

The old rule is the Ajax part:

Mychart.showloading ();//display a simple loading animation before the data is loaded                varnames = [];//class Array (actually used to hold x-axis coordinate values)                varNums = [];//sales Array (actually used to hold y-coordinate values)$.ajax ({type:"POST", Async:true,//Asynchronous request (the synchronization request will lock the browser and the user must wait for the request to complete before it can be executed)URL: ".. /handler/departmenthandler.ashx ",//Request sent to: /handler/departmenthandler Placedata: {}, DataType:"JSON",//The returned data is in JSON formSuccessfunction(Result) {//The function contents are executed when the request succeeds, and result is the JSON object returned by the server                        if(Result) { for(vari = 0; i < result.length; i++) {Names.push (result[i].name); //Take out the category and fill in the category array                            }                             for(vari = 0; i < result.length; i++) {Nums.push (result[i].values); //Take out sales and fill in an array of sales} mychart.hideloading (); //Hide Load AnimationsMychart.setoption ({//Load Data GraphXaxis:{data:names}, Series: [{data:nums}]                        }); }}, Error:function(errormsg) {//execute the function when the request failsAlert ("Chart request data failed!"));                    Mychart.hideloading (); }                })            });

Attach it:

In fact, the option settings can be placed in the Ajax inside the same will be effective and easy to see

Just take the pie chart, that's what the code says.

$.ajax ({type:"Get", Async:true,//Asynchronous request (the synchronization request will lock the browser and the user must wait for the request to complete before it can be executed)URL: ".. /handler/departmenthandler.ashx ", data: {},//Demo No conditionsDataType: "JSON",//The returned data is in JSON formSuccessfunction(Result) { for(vari = 0; i < result.length; i++) {Name.push (result[i].name); }

             option = {title: {text: ' Departmental population ratio ', subtext: ' Test data ',                    X: ' Center '}, tooltip: {trigger: ' item ', Formatter: "{A} <br/>{b}: {C} ({d}%)"}, Legend: {Orient: ' V                    Ertical ', left: ' Left ', Data:name}, Series: [ {name: ' 2012 ', type: ' Pie ', Radius: ' 5  5% ', center: [' 50% ', ' 60% '], Data:result, ItemStyle: {emphasis: {shadowblur:10, sh                        adowoffsetx:0, Shadowcolor: ' Rgba (0, 0, 0, 0.5) '}           }         }                ]            }; 

function// request failed when executing the functions alert ("Chart request data failed!") 

If you want to learn this as a rookie who has eaten, tell you to take a good look at the official example and then clear your mind.

Do it all in your own mind. such as the required format, this type of parameter, the version of the file, and so on

　

Echarts 3.19 Making common graphics non-static