Description of stacked column charts using asp.net + ashx

First look at the figure:

Stacked column charts achieve diagonal lines, comparison, drag and drop effects. Big data can be reproduced in multiple dimensions.

Demo Baidu online storage download address:

Http://pan.baidu.com/s/10A5Hk

Process:

1. The data is provided by ashx, and the serialized array string.

The code is as follows:

Copy code

Var   Datajs = "{Tooltip: {show: true, axisPointer: {type: 'shadow'}, trigger: 'item'}, title: {text: 'Test analytics ', x: 'right', y: 'bottom '}, legend: {data: ['test 2', 'Test 1', 'Test 3', 'Test 44']}, series: [{name: 'Test 2', type: 'bar', itemStyle: {barWidth: 40, normal: {label: {show: true, position: 'inside '}}, stack: 'total', data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 14, 4, 2, 2, 2, 2, 2, 2, 2]}, {name: 'Test 1', type: 'bar ', itemStyle: {normal: {label: {show: true, position: 'Inside '}}, stack: 'total', data: [1, 1, 1, 1, 1, 1, 1, 1, 7, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]}, {name: 'Test 3', type: 'bar', itemStyle: {normal: {label: {show: true, position: 'Inside '}}}, stack: 'total', data: ['-', 2, 1 ,'-','-','-','-','-', '-','-','-','-','-','-','-','-','-','-', '-', '-']}, {name: 'Test 44', type: 'bar ', itemStyle: {normal: {label: {show: true, position: 'Inside '}}, stack: 'total', data :['-','-', '-','-','-','-','-','-','-','-','-','-', '-','-','-','-','-','-','-','-','-','-', 2, 1]}], xAxis: [{type: 'Category ', data: ['0', '1', '2', '3', '4 ', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14 ', '15', '16', '17', '18', '19', '20', '21', '22', '23']}], yAxis: [{type: 'value'}]}"

;
I put the above string in js to facilitate modification.

2. Custom Logic plug-in: jquery-time_analysis.js

Read and return parameters, configure the ashx address, and configure the paths of echarts src and zrender src;

   

The code is as follows:	Copy code
$. Fn. time_analysis.defaults = {         Query_url: 'Test. Ashx' ,         Echarts_path: './Echarts/src' ,         Zrender_path: './Zrender/src'     };

Complete event binding. Click the mouse button;

The code is as follows:

Copy code

// Define the chart object             Require. config ({                 Packages :[{                     Name: 'Echarts' ,                     Location: settings. echarts_path,                     Main: 'Echarts'                 },{                     Name: 'Zrender' ,                     Location: settings. zrender_path,                     Main: 'Zrender'                 }]             });             Var   Option_data = _ getOption (settings );             $ This . Data ( 'Option' , Option_data );             Require (               [ 'Echarts' , 'Echarts/chart/bar' ],               Function   (Ec ){                   Echarts = ec;                   If   (Chart & chart. dispose ){                       Chart. dispose ();                   }                   Chart = echarts. init ($ This [0]);                   Chart. setOption (option_data );                   // Mouse click event                   EcConfig = require ( 'Echarts/config' );                   Chart. on (ecConfig. EVENT. CLICK, _ clickHandler );                   Window. onresize = chart. resize;               });

Key code: the data object is the string returned by the server.

The code is as follows:

Copy code

Function   _ GetOption (settings ){         Var   Option = {};         $. Ajax ({             Type: "Post" ,             DataType: "Text" ,             Data: settings. query_param,             Async: False ,             Url: settings. query_url,             Success: Function   (Data ){                                   If   (Data) {option = eval ( '('   + Data + ')' );}             }         });         Return   Option;     };

3. Call:

The code is as follows:

Copy code

<Script src = Js/jquery-1.9.1.js" > </Script>     <Script src = "Js/esl. js" > </Script>     <Script src = "BusinessJs/jquery-time_analysis.js" > </Script>     <Script>         Var   Query = {query_param: {condition: "Bar" , SeId: 1, mobile: "" , QueryTime: "" , Slot: 1 }};         Var   Legend_check = {message: 0, call: 0, power_on: 0, power_off: 0 };         $ (Document). ready ( Function   (){             Init ();         });         Function   Init (){                        $ ( '# Time_behavior_bar' ). Time_analysis (query );         }         Var   PhoneList = [];         Var   Suspect = {};         Var   MonthList = [];         Function   _ ClickHandler (param ){             Var   Option = $ ( '# Time_behavior_bar' ). Time_analysis ( 'Option' );             Var   Relation_type;             Alert (param. seriesIndex + "Representative :"   + Option. series [param. seriesIndex]. name + "Data :"   + Option. series [param. seriesIndex]. data. length );         }     </Script>

Pay attention to referencing jquery. js and esl. js;

Description of objects: echarts provides an opertion object, which stores everything related to reports in js.

Var option = $ ('# time_behavior_bar'). time_analysis ('option ');

Param. seriesIndex is the object of the mouse click event, representing the legend clicked. We can obtain this object through option. series [param. seriesIndex.

Option. series [param. seriesIndex]. name represents legend names such as test 1 and test 2. Other people can try again.

Original from: Http://www.suchso.com/projecteactual/echarts-aspnet-ashx-demo-download-duiji-bar.html