| <%@ Page language= "C #" autoeventwireup= true "codebehind=" EchartDemo.aspx.cs "inherits=" at. Web.Demo.EchartDemo "%>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
Example of <title>echart diagram </title>
<script src= ". /themes/scripts/jquery-1.8.2.min.js "></script>
<link href= ". /themes/styles/site.css "rel=" stylesheet "type=" Text/css "/>"
<script src= ". /themes/scripts/functionjs.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
Class
$ (function () {
$ (' #table2 '). Hide ();
})
Click on the Switch panel
var isfixedtableload = 1;
function Panel (obj) {
if (obj = = 1) {
$ (' #table1 '). Show ();
$ (' #table2 '). Hide ();
else if (obj = = 2) {
$ (' #table1 '). Hide ();
$ ("#table2"). Show ();
}
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div class= "Frmtop" >
<table style= "padding:0px; margin:0px; height:100% "cellpadding=" 0 "cellspacing=" 0 ">
<tr>
<TD id= "Menutab" style= "Vertical-align:bottom;" >
<div id= "tab0" class= "Tabsel" onclick= "Gettabclick (This);p anel (1)" >
Energy consumption dynamic
</div>
<div id= "Tab1" class= "Tabremovesel" onclick= "Gettabclick" (This);p anel (2); >
Fill in dynamic
</div>
</td>
</tr>
</table>
</div>
<div class= "div-frm" style= "height:275px;" >
Dynamic--%> of <%--energy consumption
<div id= "Table1" >
<div id= "Divenergy" style= "width:610px; height:220px; " ></div>
</div>
<%--Fill Dynamic--%>
<div id= "Table2" >
<div id= "Divreport" style= "width:750px; height:250px; " ></div>
</div>
</div>
</form>
</body>
<script src= ". /themes/scripts/echarts/echarts.js "></script>
<script src= ". /themes/scripts/echarts/theme/macarons.js "></script>
<script type= "Text/javascript" >
var cityclick = ';
function Getunitenergy (unitname) {
Getcityenergy (Unitname, 2);
}
Require.config ({
Paths: {
Echarts: '.. /themes/scripts/echarts '
}
});
Require
[
' Echarts ',
' Echarts/chart/bar ',
' Echarts/chart/line ',
' Echarts/chart/pie ',
' Echarts/chart/funnel '
],
Drawechart//Asynchronously loaded callback function drawing chart
);
var Myenergychart;
var Myreportchart;
Create a Echarts chart method
function Drawechart (EC) {
---folded column---
Myenergychart = Ec.init (document.getElementById (' Divenergy '), macarons);
Define Chart Options
var options = {
Title: {
Text: "",
Subtext: ""
},
/*color: [' #0099FF ', ' #00CC00 ', ' #008080 ', ' #CC6600 ', ' #CC00CC ', ' #0033CC ', ' #003300 ', ' #FF0000 '],*/
ToolTip: {
Trigger: ' axis '
},
Legend: {
Data: ["]
},
Toolbox: {
Show:true,
Feature: {
Mark: {Show:false},
DataView: {show:false, readonly:false},
Magictype: {show:true, type: [' line ', ' Bar ']},
Restore: {show:true},
Saveasimage: {Show:false}
}
},
Grid: {
X:60,
Y:30,
X2:5,
Y2:30
},
Calculable:true,
Xaxis: [
{
Type: ' Category ',
Data: ["]
}
],
YAxis: [
{
Type: ' Value ',
Axislabel: {
Fomatter: "."
},
Splitarea: {show:true}
}
],
Series: [{
Name: "",
Type: "Line",
Data: [0]
}]
};
Select an empty chart
Myenergychart.setoption (options);
Myreportchart = Ec.init (document.getElementById (' Divreport '), macarons);
Select an empty chart
Myreportchart.setoption (options);
Default Load Fill
Getreport ("1");
Default Load Provincial
Getunitenergy (' 34 ');
}
Click on the button to get the chart data using Ajax method
function Getcityenergy (Citycode, level) {
Get the Options object for a chart
var options = Myenergychart.getoption ();
Get data through Ajax
$.ajax ({
Type: "Post",
Async:false,//Synchronous execution
URL: "Getchartdata.aspx?type=energydata",
DataType: "JSON",//return data in the form of JSON
Success:function (Result) {
if (result) {
Assigns the returned category and series objects to the category and series within the options object
Because Xaxis is an array here needs to be a form of xaxis[i]
Options.xaxis[0].data = result.category;
Options.series = result.series;
Options.legend.data = Result.legend;
Myenergychart.setoption (options);
Myenergychart.refresh ();
}
},
Error:function (errormsg) {
Alert ("Chart data loading failed!") ");
}
});
}
Click on the button to get the chart data using Ajax method
function Getreport (code) {
Get the Options object for a chart
var options = Myreportchart.getoption ();
Get data through Ajax
$.ajax ({
Type: "Post",
Async:false,//Synchronous execution
URL: "Getchartdata.aspx?type=reportdata",
DataType: "JSON",//return data in the form of JSON
Success:function (Result) {
if (result) {
Assigns the returned category and series objects to the category and series within the options object
Because Xaxis is an array here needs to be a form of xaxis[i]
Myreportchart.clear ();
Options.xaxis[0].data = result.category;
Options.series = result.series;
Options.legend.data = Result.legend;
Myreportchart.setoption (options);
}
},
Error:function (errormsg) {
Alert ("Chart data loading failed!") ");
}
});
}
Initial Load Chart data
$ (function () {
Getcityenergy ("", "");
Getunitenergy ("");
});
</script> |
