Using Echarts 3.19 to make common graphics (non-static) _javascript techniques

Pie chart:

Environment: Echarts 3.19 vs2013

Implementation mode: Ajax+ashx+json

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

Specific code, you reader please move your eyes.

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

Page section to set up a div just fine

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

The next is the JS part of the fact that Echarts and HTML5 in the Canvans still have links to know that you can look up the information yo

$ ("#btngo"). Click (function () {//Here is the Click event below of course this is also the time to imitate your conditional query.
var dom = document.getElementById (' Contanis ');
var mycharts = Echarts.init (DOM);
option = {
title: {
text: ' Departmental population ratio ',
subtext: ' Test data ',
x: ' Center '
},
tooltip: {
trigger: ' Item ',
formatter: ' {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 a look at 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 to do UI design corpse

$.ajax ({
type: "Get",
async:true,//asynchronous request (Sync request will lock the browser, other actions must wait for the request to complete before executing)
URL: ". /handler/departmenthandler.ashx ", data 
: {},//demo not conditional
dataType:" JSON ",//return data in the form of
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) {
//request failed to execute this function
alert ("Failed chart request data!");
}
};

The ashx part is much simpler. Simple serialization of data

DataTable result = BLL. Department.getdeptnumber (); 
list<object> list = new list<object> ();
foreach (DataRow dr in result. Rows)
{
//enclose the format required by echarts: [{value:335, Name: ' Direct Access '}]
Deart d = new Deart ();
D.value = Convert.ToInt32 (dr["number"]);
Oneself careless with values echarts not always be undefined 
d.name = dr["D_name"]. ToString (); 
List. ADD (d);
}
JavaScriptSerializer JSS = new JavaScriptSerializer ();
String json = JSS. Serialize (list);
public class Deart//In fact, you don't have to define your own insurance. value is int
{public
int value {get; set;}
public string name {get; set;} 
}

Please attach an effect chart:

Column chart:

Environment: Echarts 3.19 vs2013

Implementation mode: Ajax+ashx+json

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

Specific code, you reader 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 triggers--%>
<input type=" Button "id=" Btncanv "value=" Go Pikachu "/> 
</div>
<%--declare a div to be used to install canvas painted pictures--%> <div id=
" Contanis "style=" width:1000px;height:800px >
<script type= "Text/javascript" > 
$ ("#btncanv"). Click (function () {
//Get to draw dom
var dom = document.getElementById ("Contanis");
var MyChart = Echarts.init (DOM);
Mychart.setoption ({
title: {
Text: ' Asynchronous data Load sample '//Picture title
},
tooltip: {},
legend: {
data: [ ' Departmental population ' 
},
Xaxis: {
data: []
},
YAxis: {},
series: [{
name: ' 2015 ',
type: ' Bar ',//can be changed to line (polyline)
data: []//Here give the empty back with Ajax to assign to him
}]
});

The old rule is the Ajax section:

Mychart.showloading (); Before the data is loaded, a simple loading animation
var names = [];//class array (actually used to hold the x-axis coordinate value)
var nums = [];//sales array (actually used to hold the y-coordinate value)
$.ajax ({ C4/>type: "Post",
Async:true,//asynchronous request (Sync request will lock the browser, other actions must wait for the request to complete before it can be executed)
URL: ". /handler/departmenthandler.ashx ",//request sent to ... /handler/departmenthandler at
data: {},
DataType: "JSON",//returns the form of the JSON
success:function (result) { 
When the request succeeds, the function content is executed, and result is the JSON object returned by the server (result
) {for
(var i = 0; i < result.length; i++) {
Names.push ( Result[i].name); Remove the category and fill in the category array
} for
(var i = 0; i < result.length; i++) {
nums.push (result[i].values); Take out the sales and fill in the sales array
}
mychart.hideloading ();//Hide Load animation
mychart.setoption ({//Load data graph
Xaxis:{data: Names},
series: [{data:nums}]}}
,
error:function (errormsg) {
//request failed to execute this function
alert ("Chart request data failed!");
Mychart.hideloading ();}}
);

Please attach an effect chart:

In fact, option settings can be put in the Ajax inside the same effect and easy to see

Just take the pie chart, and the code can write that.

$.ajax ({
type: "Get",
async:true,//asynchronous request (Sync request will lock the browser, other actions must wait for the request to complete before executing)
URL: ". /handler/departmenthandler.ashx ", data 
: {},//demo not conditional
dataType:" JSON ",//return data in the form of
JSON success: function (Result) {for (var i = 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: ' Vertical ', Left
: ' Left ',
data:name
},
series: [
{
name: ' 2012 ',
type: ' Pie '
, Radius: ' 55% ',
Center: [' 50% ', ' 60% '],
data:result,
itemstyle: {emphasis
: {
shadowblur:10 ,
shadowoffsetx:0,
shadowcolor: ' rgba (0, 0, 0, 0.5) '}}}} 
, Error: Function alert ("Failed graph request data!") {////request failed errormsg});

If you want to learn this, as a rookie who has suffered a loss, tell you to take a good look at the official examples and then sort out the idea.

The above mentioned is a small set of Echarts 3.19 based on the production of commonly used graphics (non-static) related knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!