An example of asp.net+echarts2.0 Line State column diagram linkage

For a long time did not write Echarts article, mainly has been the project has not been used to echarts. Echarts has been used in a recent project because it also has to consider the latest report style of echarts2.0, so it uses echarts2.0, support maps, waterfall charts, and so on. Today we'll share an example of a linear state and a columnar graph linkage.

Effect Chart:

When you click on the month, the first report data appears, click each node of the month, appear below according to the regional classification of the column chart, we become a report and B report bar.

The following step-by-step posting code and instructions

1, first of all, there is data, I defined a report 3 data: Total number of users, user authentication total, and X axis data. At the same time each date corresponds to a set of city data, I use an array of methods to store.

Take a look at the entity:


public partial class Monthweekcity


{


<summary>


Month Date


</summary>


Public DateTime monthdate {get; set;}


<summary>


Describe. For months or weeks and weeks


</summary>


public string Datetext {get; set;}


<summary>


Total


</summary>


public int Allcount {get; set;}


<summary>


Total Certification


</summary>


public int Authcount {get; set;}


<summary>


A list of city data in that time


</summary>


Public list<citydata> citylist {get; set;}


}


public partial class Citydata


{


Public city Cityinfo {get; set;}


public int Allcount {get; set;}


public int Authcount {get; set;}


}


Then I return the data through the general handler ashx, I this data is from the database, you can modify:

Return data collection:

Private list<monthweekcity> getmonthlist ()


{


list<monthweekcity> list = new list<monthweekcity> ();


DateTime date = Checkresponse.getdatetimeresponse ("DT");


Shopstay ds = new Shopstay ();


Try


{


Ianalysisservice Apservice = ktcontainer.instance.resolve<ianalysisservice> ();


Time of the first day of this month


DateTime Dt_first = date. AddDays (1-(date). Day));


To get the number of days of a month in a year


int year = date. Date.year;


int month = date. Date.month;


int daycount = Datetime.daysinmonth (year, month);





DateTime dt_last = dt_first.adddays (dayCount-1);


list<tb_statistic> listcity = new list<tb_statistic> ();


listcity = Apservice.getcitydaycount (Dt_first, dt_last, 0);


for (int i = 0; I <= daycount; i++)


{


Monthweekcity oneday = new monthweekcity ();


Oneday. Monthdate = Dt_first.adddays (i);


Oneday. CityList = new list<citydata> ();


Oneday. Authcount = 0;


Oneday. Allcount = 0;





List. ADD (oneday);


}


foreach (tb_statistic CD in listcity)


{


Monthweekcity temp = list. Singleordefault (a => a.monthdate = CD. Statisticdate);


if (temp = null)


{











}


Else


{


Temp. Authcount = temp. Authcount + CD. Authennum;


Temp. Allcount = temp. Allcount + CD. Allnum;


Temp. Citylist.add (new Citydata {allcount = CD. Allnum, Authcount = CD. Authennum, cityinfo = cd.city});


}


}


return list;


}


2, HTML structure

<%@ Page title= "" Language= "C # masterpagefile=" ~/content.master "autoeventwireup=" true "codefile=" MonthWeekGroup.aspx.cs "inherits=" Page_newstat_monthweekgroup "%>


<asp:content id= "Content1" contentplaceholderid= "Head" runat= "Server" >


</asp:Content>


<asp:content id= "Content2" contentplaceholderid= "ContentPlaceHolder1" runat= "Server" >


<div id= "Content" >


<!--content starts-->


<div>


<ul class= "breadcrumb" >


<li> home <span class= "Divider" >/</span>


</li>


<li><a href= "#" > Active user Analysis </a> </li>


</ul>


</div>


<div class= "Row-fluid sortable" >


<div class= "Box-content" >


<fieldset>


<div class= "Control-group" >


<div class= "Controls" >


Select month: <input type= "text" style= "width:100px" id= "Sdate"


Onfocus= "Wdatepicker ({datefmt: ' yyyy year MM month ', readonly:true,onpicked:btngetdata,maxdate: '%yyyy-%mm '})"/>





<span id= "Divlast" >


</span>


</div>


</div>


</fieldset>


<div class= "Clearfix" ></div>


<!--prepare a DOM--> with size (width and height) for echarts


<div id= "Mainmonth" style= "height:400px" ></div>


<div id= "mainmonthcity" style= "height:300px" ></div>


</div>


<div class= "Box-content" >


<fieldset>


<div class= "Control-group" >


<div class= "Controls" >


Select Week:


<input type= "text" style= "width:100px;" id= "SDate2"


Onfocus= "Wdatepicker ({datefmt: ' yyyy year WW Week ', readonly:true,onpicked:btngetdata,maxdate: '%yyyy-%ww '})"/>





</div>


</div>


</fieldset>


<div class= "Clearfix" ></div>


<div id= "Divtishi" style= "Display:none;" > is counting please ......</div> later


<!--prepare a DOM--> with size (width and height) for echarts


<div id= "Mainweek" style= "height:400px" ></div>


<div id= "mainweekcity" style= "height:300px" ></div>


</div>





<!--/row-->


<!--content ends-->


</div>


</div>


<!--/#content .span10-->


<script src= ". /.. /js/echart2.2.1/build/dist/echarts.js "></script>


<script src= ". /.. /businessjs/newstat/monthweek.js "></script>


</asp:Content>


<div id= "Mainmonth" style= "height:400px" ></div> a reporting container

<div id= "mainmonthcity" style= "height:300px" ></div> B report Container

<script src= ". /.. /js/echart2.2.1/build/dist/echarts.js "></script> This paragraph is a reference to Echarts. This is one of the newest ways of echarts2.0.

Http://echarts.baidu.com/doc/doc.html# introduced into ECharts2

3, the key JS code:

Digression: Generate the most recent date

function Loadlastmonth () {
var html = "";
var thismonth = new Date ();
for (var i = 1;i < i++) {
var months = Thismonth. DateAdd (' m ',-i);
html = html + &nbsp;&nbsp;&nbsp;&nbsp; <a onclick= ' Clickgetdata (\ "" + months. Format ("yyyy mm month") + "\"); ' > "+ months. Format ("YYYY year mm month") + "</a>";
}
$ ("#divlast"). HTML (HTML);
}
JS date format Please see: [Javacript formatting and converting date dates]

Configuration parameters:

Path configuration
Require.config ({
Paths: {
Echarts: '.. /.. /js/echart2.2.1/build/dist '
}
});

JS Ajax to get the data, and binding a report, binding a report When set click Events, because the code is not good completely separate open write, I will be all posted out

var STATICSDT;


$ (document). Ready (function () {


$ ("#SDate"). Val (new Date ()). Format ("YYYY year mm month"));


Loadlastmonth ();


Btngetdata ();


});


function Loadlastmonth () {


var html = "";


var thismonth = new Date ();


for (var i = 1;i &lt; i++) {


var months = Thismonth. DateAdd (' m ',-i);


html = html + &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;a onclick= ' Clickgetdata (\ "" + months. Format ("yyyy mm month") + "\"); ' &gt; "+ months. Format ("YYYY year mm month") + "&lt;/a&gt;";


}


$ ("#divlast"). HTML (HTML);


}


function Clickgetdata (datee) {


$ ("#SDate"). Val (datee);


Btngetdata ();


}


function Btngetdata () {





STATICSDT = $ ("#SDate"). Val ();


Use


Require


[


' Echarts ',


' Echarts/chart/line '//loading bar module with column graph, loading on demand


],


Showdatacllback


);


}


var echarts;


function Showdatacllback (EC) {


echarts = EC;


Getdetaildata (EC);


}


var monthdata;


function Getdetaildata (EC) {


var ajaxurl = ". /.. /service/monthweekstat.ashx ";





if (Staticsdt.length = = 0) {


Alert ("Please select month for statistics"); Return


}


$.ajax ({


Type: "Post",


DataType: ' JSON ',


Url:ajaxurl,


Data: {


DT:STATICSDT,


Oper: "Month"


},


Success:function (data, textstatus) {


if (data!= null) {


var customfre = eval (data);


Set Click events


var ecconfig = require (' Echarts/config ');


if (customfre!= null &amp;&amp; customfre!= "undefined") {





var Xdata = new Array ();


var monthallcount = new Array ();


var monthrenzhengcount = new Array ();


var MyChart = ec.init (document.getElementById (' mainmonth '));


Customfre.sort ();


$.each (Customfre, function (i, Val) {


Xdata.push (New Date (Val. monthdate)). Format ("Yyyy-mm-dd"));


Monthrenzhengcount.push (Val. Authcount);


Monthallcount.push (Val. Allcount);


});

Monthdata = Customfre;


Oneday. Monthdate = CD. Statisticdate;


Oneday. CityList = new list&lt;citydata&gt; ();


Oneday. Authcount = Oneday. Authcount + CD. Authennum;


Oneday. Allcount = Oneday. Allcount + CD. Allnum;


Oneday. Citylist.add (new Citydata {ALLCOUNT=CD). Allnum, AUTHCOUNT=CD. Authennum, cityinfo=cd.city});


//------------------------------------------------------------------------------------------------------------- --





var option = {


Title: {


TEXT:STATICSDT + '-month analysis ',


Subtext: ' Active user '


},


ToolTip: {


Trigger: ' axis '


},


Legend: {


Data: [' Total number of users ', ' Total user authentication ']


},


Toolbox: {


Show:false,


Feature: {


Mark: {Show:true},


DataView: {show:true, readonly:false},


Magictype: {show:true, type: [' line ']},


Restore: {show:true},


Saveasimage: {show:true}


}


},


Calculable:true,


Xaxis: [


{


Type: ' Category ',


Boundarygap:false,


Data:xdata


}


],


YAxis: [


{


Type: ' Value ',


Axislabel: {


Formatter: ' {value} '


}


}


],


Series: [


{


Name: ' Total users ',


Type: ' line ',


Data:monthallcount,


Markline: {


Data: [


{type: ' Average ', Name: ' Average '}


]


}


},


{


Name: ' Total user authentication ',


Type: ' line ',


Data:monthrenzhengcount,


Markline: {


Data: [


{type: ' Average ', Name: ' Average '}


]


}


}


]


};


mychart.setoption (option);


Mychart.on (EcConfig.EVENT.CLICK, function (param) {


var selected = param;


var date = Selected.name;


Openpage (date);


})


//------------------------------------------------------------------------------------------------------------- --


}


else {


Alert ("Load data failed!") "); Return


}


}


},


Complete:function (XMLHttpRequest, Textstatus) {


},


Error:function (e) {


Alert ("Load data failed!") "); Return


}


});


}


function Openpage (datet) {


Selectedmonthdate = Datet;


Use


Require


[


' Echarts ',


' Echarts/chart/bar '//loading bar module with column graph, loading on demand


],


Showdatacllback2


);


}


var selectedmonthdate;


function Showdatacllback2 (EC) {


var onday = null;


$.each (Monthdata, function (i, Val) {


if (New Date (Val. monthdate)). Format ("yyyy-mm-dd") = = Selectedmonthdate) {


Onday = val;


}


});


if (Onday = = null) {return;}


var Xdata = new Array ();


var monthallcount = new Array ();


var monthrenzhengcount = new Array ();


var MyChart = ec.init (document.getElementById (' mainmonthcity '));


Onday. Citylist.sort ();


$.each (Onday. CityList, function (i, Val) {


Xdata.push (Val. Cityinfo.name);


Monthrenzhengcount.push (Val. Authcount);


Monthallcount.push (Val. Allcount);


});


var option = {


Title: {


Text:selectedmonthdate + '-according to City ',


Subtext: ' City users '


},


ToolTip: {


Trigger: ' Axis ',


Axispointer: {//Axis indicator, axis trigger valid


Type: ' Shadow '//default line, Optional: ' Lines ' | ' Shadow '


}


},


Legend: {


Data: [' Total number of users ', ' number of authenticated users ']


},


Toolbox: {


Show:false,


Orient: ' Vertical ',


x: ' Right ',


Y: ' Center ',


Feature: {


Mark: {Show:true},


DataView: {show:true, readonly:false},


Magictype: {show:true, type: [' Bar ']},


Restore: {show:true},


Saveasimage: {show:true}


}


},


Calculable:true,


Xaxis: [


{


Type: ' Category ',


Data:xdata


}


],


YAxis: [


{


Type: ' Value '


}


],


Series: [


{


Name: ' Total users ',


Type: ' Bar ', stack: ' Number of authenticated users ',


Data:monthallcount


},


{


Name: ' Number of authenticated users ',


Type: ' Bar ',


Stack: ' Total users ',


Data:monthrenzhengcount


}


]


};


mychart.setoption (option);


Mychart.on (EcConfig.EVENT.CLICK, function (param) {


var selected = param;


var date = Selected.name;


Openpage (date);


//})


}


1





Binding Echarts events, you must refer to the Config file:


var ecconfig = require (' Echarts/config ');


And then according to the event you want to deal with:

Mychart.on (EcConfig.EVENT.CLICK, function (param) {
var selected = param;
var date = Selected.name;
Openpage (date);
})