Echarts-java using Java to develop Echarts diagrams quickly

Echarts-java Class Library Address: Http://git.oschina.net/free/ECharts

Baidu Echarts Address: http://echarts.baidu.com/

About 5 months ago , there is a project need to use the chart, Baidu Echarts is very good, the choice of echarts.

My project is SPRINGMVC + Mybatis, when I get the data from the database, I do not know how to deal with this data, is to the foreground to spell echarts the option structure or in the background of the JSON structure of the option?

I've tried both of these ways:

The first kind in the foreground spell will lead to logic is very messy, JS a lot of trouble, very bad maintenance.

The second is to construct the JSON structure in the background, which is still a hassle, because I just need a diagram of what it looks like, so I create some data structures I need, and then all sorts of messy classes come out. Think of what to write, still very messy, still difficult to maintain.

What to do?

To solve this problem, I wrote a basic data structure of the Echarts-java class library in my spare time and one evening. the next day I tried it on the project, but it was not important to say that the chart didn't have to be written. After that, I didn't use the Echarts-java class library in my project.

But I've been thinking about simpler coding, so adding chained calls makes writing Java code as easy and fast as the JS code, and it's a lot more efficient.

By now (2015-01-27) This project suddenly needed a few charts, I finally was the first time to use the Echarts-java class library, the development of Echarts-java class library when writing a lot of tests, so I use it very handy, write quickly, really very convenient.

A lot of people who use the Echarts-java class library Ask me if there is any practical example, I always say look at the test code and the official website example to go. I didn't really have a practical example, and then I wrote a simple example ("Example Tutorial" Echarts Java wrapper class library), but the data was simulated.

Now we can finally come up with a practical example to illustrate.

System: Springmvc+mybatis

First look at the final:

This is followed by code to explain briefly:

first get the data through MyBatis, from also can see, I need data one is the medicine name, one is the amount, a simple statistic SQL can complete.

Because the data is simple, I use MyBatis to return the value directly with the list<map<string,object>>.

Then construct the option structure at the service layer with the following code:

@Overridepublic Option selectremovecauses () throws businessexception {//query before Pagehelper.startpage (1, +, false);    Database query get statistic data list<map<string, object>> List = kc22mapper.selectremovecauses ();        In order to arrange the data from large to small, this requires a flashback collections.sort (list, new comparator<map<string, object>> () {@Override        public int Compare (map<string, object> O1, map<string, object> O2) {return-1;    }    });    Create option option = new Option ();    Option.title ("Reject drugs"). ToolTip (Trigger.axis). Legend ("Amount (yuan)");    The horizontal axis is the value shaft option.xaxis (new Valueaxis (). Boundarygap (0d, 0.01));    Create class axis Categoryaxis category = new Categoryaxis ();    Column data Bar bar = new Bar ("Amount (yuan)");    Pie chart Data Pie pie = new Pie ("Amount (yuan)");        Cyclic data for (map<string, object> objectmap:list) {//Set class Category.data (Objectmap.get ("NAME"));        The column chart corresponding to the Bar.data (Objectmap.get ("Total")); Pie chart Data pie.data (new PieDATA (Objectmap.get ("NAME"). ToString (), Objectmap.get ("Total"));    }//Set the category axis Option.yaxis (category);    The center and radius of the pie chart Pie.center (900,380). RADIUS (100);    Set Data option.series (bar, PIE);    Since the name of the drug is too long, the chart is set 180 from the left, and the official document Option.grid () on the grid can be seen echarts. x (180); return option return option;

The comments in the code are very detailed.

After the service returns option, the controller layer code is returned at the controller layer, as follows:

@RequestMapping ("/removecauses") Public@responsebodywebresult removecauses () throws Exception {    Webresult result = new Webresult ();    try {option        option = injuryservice.selectremovecauses ();        Result.isok ();        Result.setdata (option);    } catch (Businessexception e) {        result.setexception (e);    }    return result;}

SPRINGMVC configuration of the return JSON, where the webresult without much consideration, is a layer of unified packaging, and Echarts chart Independent.

Then the front page, using jquery's Getjson method to get the data, the complete page code is as follows:

<body style= "padding:0" ><div style= "Padding:10px;clear:both;" >    <div id= "Psline" style= "height:600px;" ></div></div></body><script src= "Jslib/echarts/echarts-all.js" ></script>< Script type= "Text/javascript" >    //Chart    var Pslinechar = echarts.init (document.getElementById (' psline '));    Query    function loaddrugs () {        pslinechar.clear ();        Pslinechar.showloading ({text: ' Trying to read data ... '});        $.getjson (' analysis/removecauses.html ', function (data) {            if (data.success) {                pslinechar.setoption ( Data.data, true);                Pslinechar.hideloading ();            } else {                alert (' Hint ', data.msg);}}        );    }    Load Chart    loaddrugs ();</script>

according to the echarts documentation, <script> is placed behind </body>.

The code is simple, defines a div that id= "psline", and then uses Echarts.init to get the chart object.

Use $.getjson to get the data, and then call Pslinechar.setoption (Data.data, true); load the data in.

The whole process of implementing such a chart is quite simple, as long as there is data, what kind of chart is needed, it is easy to write it out.

Is it convenient to use the Echarts-java class library?

Echarts-java Class Library Address: Http://git.oschina.net/free/ECharts

Echarts-java using Java to develop Echarts diagrams quickly