【实例教程】Echarts 的 Java 封装类库

原创
2014/09/22 12:04
阅读数 11.2W

Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-java

没想到喜欢Echarts 的 Java 封装类库的人还挺多,在源码中的测试例子一般目的只是构造官网例子的结构,这里写个比较实际的简单例子来演示如何写出一个图表。

首先看看Option的提示。

##Option说明

  1. Option正式代码中使用,不需要任何依赖。

  2. GsonOption正式代码中可以使用,需要引入Gson包,使用toString()方法可以转换为JSON结构的数据(支持function,详情看下面的<b>function说明</b>),下个版本会加入view()方法,方便在浏览器中查看。

  3. EnhancedOption测试专用,增加了view()方法和exportToHtml()方法,主要方便在浏览器中直接查看效果。

下面的例子使用的EnhancedOption,实际使用时,用json工具将Option转换为JSON字符串即可。

##简单例子

这个例子模仿的OSCGIT中的【管理】中的【项目访问统计】图表,这个图表很简单。例如本项目的统计图表如下:

项目访问统计

下面开始本例。

创建访问日期,访问数对象:

 //数据对象
class AccessData {
    //日期
    private String date;
    //访问量
    private Integer nums;

    AccessData(String date, Integer nums) {
        this.date = date;
        this.nums = nums;
    }

    public String getDate() {
        return date;
    }

    public Integer getNums() {
        return nums;
    }
}

然后是一个模拟获取数据的方法:

/**
 * 模拟从数据库获取数据
 *
 * @return
 */
public List<AccessData> getWeekData() {
    List<AccessData> list = new ArrayList<AccessData>(7);
    list.add(new AccessData("09-16", 4));
    list.add(new AccessData("09-17", 7));
    list.add(new AccessData("09-18", 14));
    list.add(new AccessData("09-19", 304));
    list.add(new AccessData("09-20", 66));
    list.add(new AccessData("09-21", 16));
    list.add(new AccessData("09-22", 205));
    return list;
}

下面开始构造Option对象:

//获取数据
List<AccessData> datas = getWeekData();

//创建Option对象
EnhancedOption option = new EnhancedOption();

//设置图表标题,并且居中显示
option.title().text("最近7天访问量图表").x(X.center);

//设置图例,居中底部显示,显示边框
option.legend().data("访问量").x(X.center).y(Y.bottom).borderWidth(1);

//设置y轴为值轴,并且不显示y轴,最大值设置400,最小值-100(OSC为什么要有-100呢?)
option.yAxis(new ValueAxis().name("IP")
        .axisLine(new AxisLine().show(true).lineStyle(new LineStyle().width(0)))
        .max(400).min(-100));

//创建类目轴,并且不显示竖着的分割线,onZero=false
CategoryAxis categoryAxis = new CategoryAxis()
        .splitLine(new SplitLine().show(false))
        .axisLine(new AxisLine().onZero(false));

//不显示表格边框,就是围着图标的方框
option.grid().borderWidth(0);

处理好上面的基本配置后,下面处理数据。

//创建Line数据
Line line = new Line("访问量").smooth(true);

//根据获取的数据赋值
for (AccessData data : datas) {
    //增加类目,值为日期
    categoryAxis.data(data.getDate());

    //日期对应的数据
    line.data(data.getNums());
}

//设置x轴为类目轴
option.xAxis(categoryAxis);

//设置数据
option.series(line);

上面通过for循环,一次放入一个类目和数据,最后将类目和Line赋值给option

最后执行view()方法即可查看。

//打开浏览器预览
option.view(); 

效果如下:

echarts效果

从smooth的效果来看,还是highcharts的平滑效果更好。另外IP的位置不能那样居中,不过这都不是必须的。

展开阅读全文
加载中
点击加入讨论🔥(30) 发布并加入讨论🔥
打赏
30 评论
68 收藏
7
分享
返回顶部
顶部