"Example Tutorial" Echarts Java wrapper class Library

Source: Internet
Author: User

Echarts Java wrapper class Library: Http://www.oschina.net/p/echarts-java

Did not expect to like Echarts Java Encapsulation Class Library of people quite a lot, in the source code test example general purpose is to construct the structure of the official website example, here write a more practical simple example to show how to write a chart.

First look at the prompt for option.

Option description
    1. OptionUsed in formal code and does not require any dependencies.

    2. GsonOptionFormal code can be used, need to introduce the Gson package, the use toString() of methods can be converted to JSON structure of the data (support function , the details of the following function Description ), the next version will be added view() to the method, easy to view in the browser.

    3. EnhancedOptionTest-specific, add view() methods and exportToHtml() methods, the main convenience in the browser directly see the effect.

The following example uses the EnhancedOption JSON tool to convert option to a JSON string when it is actually used.

Simple example

This example mimics the "Project Access Statistics" chart in "Management" in Oscgit, a simple chart. For example, the statistical chart for this project is as follows:

Let's start with this example.

To create an access date, access the number of objects:

Data Object class AccessData {    //date    private String date;    Access Volume    private Integer nums;    AccessData (String date, Integer nums) {        this.date = date;        This.nums = nums;    }    Public String getDate () {        return date;    }    Public Integer getnums () {        return nums;    }}

Then there is a way to simulate getting the data:

/** * Simulate fetching data from a database * * @return */public list<accessdata> getweekdata () {    list<accessdata> List = new Arrayli St<accessdata> (7);    List.add (New AccessData ("09-16", 4));    List.add (New AccessData ("09-17", 7));    List.add (New AccessData ("09-18", +));    List.add (New AccessData ("09-19", 304));    List.add (New AccessData ("09-20");    List.add (New AccessData ("09-21", +));    List.add (New AccessData ("09-22", 205));    return list;}

The following is the start of constructing the option object:

Get data list<accessdata> datas = Getweekdata ();//Create option object enhancedoption option = new Enhancedoption ();//Set chart title, and center display Option.title (). Text ("Last 7 days Traffic graph"). x (X.center);//set legend, center bottom display, display Border Option.legend (). Data ("Traffic"). x (x.center). Y (Y.bottom). BorderWidth (1);//Set the Y axis as the value axis, and do not display the y-axis, the maximum setting of 400 (in fact this property does not have to be set, the default) Option.yaxis (new Valueaxis (). Name ("IP")    . Axisline (New Axisline (). Show (True). LineStyle (New LineStyle (). Width (0)). Max (400));//Create a class axis, And does not display the vertical split line categoryaxis categoryaxis = new Categoryaxis (). Splitline (New Splitline (). Show (false));//Do not display the table border, Is the box around the icon Option.grid (). BorderWidth (0);

After processing the above basic configuration, the data is processed below.

To create line data, smooth ("traffic"). +//Based on the obtained data assignment for (AccessData data:datas) {    //increment class, value is Date    Categoryaxis.data (Data.getdate ());    Date corresponding data    Line.data (Data.getnums ());} Set the x axis to Option.xaxis axis (categoryaxis);//Set Data option.series (line);

With a For loop, you put a class and data at a time, and finally assign the class and line to option

The last execution view() method can be viewed.

Open Browser preview Option.view ();

The effect is as follows:

Judging from the effect of smooth, the smoothing effect of highcharts is better. In addition, the location of the IP cannot be centered, but this is not necessary.

"Example Tutorial" Echarts Java wrapper class Library

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.