Use the echart pie chart to pass the time ., Echart pie pass time
The new company has just been idle for a few days. The leaders asked me to do some irrelevant work and optimize the report statistics !!! Previously, flash was used. Now we need to change it to echart. Well, I have never used it before. I studied it with my learning attitude. Writing something to pass the time can help your friends better. Okay, let's talk about it!
Step 1: Create a page:
Part 2: add relevant js references. Refer to the api to initialize js and functions.
<Script src = ".../../resources/js/echarts. js">
</Script> <script type = "text/javascript">
Var identity = 0;
Var chart_bar;
Require. config ({paths: {echarts: '.../../resources/js/echarts '}});
Require (['echarts', 'echarts/chart/bar',], DrawEChart );
Function DrawEChart (ec)
{
Chart_bar = ec. init (document. getElementById ('mainbar1 '));
Getdata ();
}
Function Getdata ()
{Ption =
{
Title: {text: 'elders statistical report', subtext: '', x: 'center', y: 'top', zlevel: 0, textStyle: {fontSize: 18, fontWeight: 'bolder', color: '#333 ',}},
Tooltip: {trigger: 'item '},
Legend: {data: [], x: 'center', orient: 'horizontal ', height: '100px', zlevel: 0, y: 'bottom ',},
Grid: {x: 80, y: 50, y2: 120 ,},
Calculable: true,
XAxis: [{type: 'category ', data: [],}],
YAxis: [{type: 'value', axisLabel: {formatter: '{value}'}, name: "Total",}],
Series: []
};
// Obtain data through Ajax
$. Ajax ({
Async: false, // synchronous execution url: 'sahandler. ashx? T = "related parameters, // here we use a general processing program to process data, and return the json format
DataType: "json", // The returned data format is json.
Type: "post ",
Success: function (result ){
If (result ){
If (result. series! = ""){
Chart_bar.clear ();
Option. legend. data = result. legend; // waiting for return
Option. series = result. series; // you need to extract the name, type, and lable style from the background dynamically to achieve the desired effect. For details, refer to the following general processing program for processing the returned data.
Option. xAxis [0]. data = result. AgeList; // waiting for return
Chart_bar.refresh (true );
} Else {Ext. example. msg ('', 'this query condition has no statistics! ');}
}
}, Error: function (errorMsg)
{
Ext. example. msg ('hs', 'Sorry, the chart failed to request data! ');
}});
Chart_bar.setOption (option );
</Script>
Step 3: Generally, the processing program processes data. You need to consider the items that you need to return, and the format or type of data that you need to return based on the api case.
Here I need to return the legend, series, and xAxis of the three things chart. Okay. To return the corresponding json string, we create a jsonhelp class (to help return Series)
Public class SeriesJson {
/// <Summary> /// sereis sequence group id ///
</Summary>
Public int id {get; set ;}
/// <Summary> // series sequence group name ///
</Summary>
Public string name {get; set ;}
/// <Summary> // The chart type (line, column, bar, etc.) of the series sequence group)
/// </Summary>
Public string type {get; set ;}
/// <Summary> // the data of the series sequence group is an array of data types /// </summary>
Public List <int> data {get; set ;}
// This is the processing Style
Public object itemStyle {get; set ;}}
Step 4 is to do the data, assign a value, and then the output is OK.
What the front-end needs, we want to define the returned results: (the following data is not the same as the running data, for reference only)
List <string> legend = new List <string> () {"Test 1", "Test 2", "Test 3"}; // the source code is too messy, you can assign values randomly, but note that the names in legend must be consistent in the actual project.
List <string> AgeList = new List <string> () {"60 and below", "60-69", "70-99 ",};
List <SeriesJson> SeriesJosn = new List <SeriesJson> ();
For (int I = 0, I <= legend. length, I ++ ){
SeriesJson json = new SeriesJson (); json. id = I; json. type = "bar"; json. data = new List <int> () {1, 2, 3}
Json. name = legend [I];
Json. itemStyle = new {normal = new {label = new {show = true, position = "top "}}};
}
}
Var newObj = new {series = SeriesJosn, legend = legend, AgeList = AgeList ,};
Final Output: Output (JsonConvert. SerializeObject (newObj ));
Background output, reception at the front end, OK, no unexpected chart is displayed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
