文档章节

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

Liuzh_533
 Liuzh_533
发布于 2014/09/22 12:04
字数 760
阅读 26768
收藏 68

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的位置不能那样居中,不过这都不是必须的。

© 著作权归作者所有

共有 人打赏支持
Liuzh_533

Liuzh_533

粉丝 755
博文 21
码字总数 40530
作品 5
石家庄
程序员
私信 提问
加载中

评论(30)

xiejinjie
xiejinjie
@Liuzh_533 这个没有和百度地图结合的接口或类啊嘛
xiejinjie
xiejinjie
@Liuzh_533 这个没有和百度地图结合的接口或类吗
xiejinjie
xiejinjie
@Liuzh_533 echarts-java没有和百度地图结合的接口或类吗
xiejinjie
xiejinjie
echarts-java没有和百度地图结合的接口或类吗
futurevip
futurevip
Liuzh_533想请教你一个问题,柱状形在实时动态更新时,根据增长的柱状形顶部,做一个动画冒烟火之类的动画,我是初学者,找了一个多星期了没解决。
haswhere
haswhere
你好,已经解决了。一段时间不用maven管理项目有点晕乎。resourse里面找到了。
haswhere
haswhere
/**
* 读取模板并写入数据
*/
private static List<String> readLines(Option option) {
String optionStr = GsonUtil.format(option);
InputStream is = null;
InputStreamReader iReader = null;
BufferedReader bufferedReader = null;
List<String> lines = new ArrayList<String>();
String line;
try {
is = OptionUtil.class.getResourceAsStream("/template");

//这块模版应该怎么设置,求助
Liuzh_533
Liuzh_533

引用来自“六月心悸”的评论

楼主,你好!我是根据OSC找到这里的,我想问问例子中的 var psLineChar = echarts.init(document.getElementById('psLine'));
其中的echarts 是怎么定义的呀?我根据官网的有一大串
require.config({
    paths:{ echarts: '../js'}
  });
  //获得后台传过来的JSON数据
  var opt =${option};
  //设置主要样式
  require([
       'echarts',  
       'echarts/chart/bar',
       'echarts/chart/line',
       'echarts/chart/pie'
     ],
     function(ec){
  //初始化echart对象
       var chart =ec.init(document.getElementById('main'));//ec.init( $("#main"));
  chart.setOption(opt);
         });
您能不能给我解释一下这个呀?有实例最好了。

引用来自“Liuzh_533”的评论

js部分的内容可以看echartsjs的文档和例子,有很多。

引用来自“bohe2005”的评论

楼主,我碰到的是和“六月心悸”一样的问题,echarts没有定义,要怎样定义,还是引入什么js就可以了。如果能有一个完整的示例代码版本就好了,osc上只有一些java代码,下载后都不能直接运行。
使用require的情况我不了解,如果是直接引入js,试试echarts-all.js
bohe2005
bohe2005

引用来自“六月心悸”的评论

楼主,你好!我是根据OSC找到这里的,我想问问例子中的 var psLineChar = echarts.init(document.getElementById('psLine'));
其中的echarts 是怎么定义的呀?我根据官网的有一大串
require.config({
    paths:{ echarts: '../js'}
  });
  //获得后台传过来的JSON数据
  var opt =${option};
  //设置主要样式
  require([
       'echarts',  
       'echarts/chart/bar',
       'echarts/chart/line',
       'echarts/chart/pie'
     ],
     function(ec){
  //初始化echart对象
       var chart =ec.init(document.getElementById('main'));//ec.init( $("#main"));
  chart.setOption(opt);
         });
您能不能给我解释一下这个呀?有实例最好了。

引用来自“Liuzh_533”的评论

js部分的内容可以看echartsjs的文档和例子,有很多。
楼主,我碰到的是和“六月心悸”一样的问题,echarts没有定义,要怎样定义,还是引入什么js就可以了。如果能有一个完整的示例代码版本就好了,osc上只有一些java代码,下载后都不能直接运行。
Liuzh_533
Liuzh_533

引用来自“nidafghoho”的评论

这个后台测试代码写上以后执行的时候,html文件在哪里啊。。。怎么引入js?直接执行弹出的是空白页啊。

引用来自“Liuzh_533”的评论

如果遇到空白页,一般是echarts.js版本不对,自己替换一个合适版本的Js试试。

引用来自“nidafghoho”的评论

我有点笨,不太明白echarts.js在哪里引入?我下载了你的jar包,api可以用,但是从代码里没有看到页面文件在哪里。
代码中不包含页面文件。。。在src/test/中有测试的页面,引用的js是百度提供的一个echarts.js地址,版本不一定对。
ECharts-Java 类库 2.1.8 版本发布

本项目是一个为了便于在Java中使用ECharts的类库,不是ECharts本身,也不是官方提供的Java类库。 双11的时候ECharts更新到了2.1.8版本,更新增加了大量内容。 为了便于使用对应版本的ECchart...

Liuzh_533
2014/12/02
8.5K
11
ECharts-Java 类库 2.2.0.3 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

Liuzh_533
2015/06/03
2.7K
6
ECharts-Java 类库 2.2.6 版本发布

ECharts - Java类库 当前版本2.2.6 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Serie...

Liuzh_533
2015/07/16
4.6K
13
ECharts - Java 类库 1.0.0 发布

这是一个针对 ECharts 2.0 版本的Java类库,实现了所有ECharts中的Json结构对应的Java对象,并且可以很方便的创建Option 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Jav...

Liuzh_533
2014/09/19
6K
24
ECharts-Java —— Echarts 的 Java 封装类库

这是一个针对 ECharts 2.0 版本的Java类库,实现了所有ECharts中的Json结构对应的Java对象,并且可以很方便的创建Option

oschina
2014/09/22
43
0

没有更多内容

加载失败,请刷新页面

加载更多

Ruby中的继承、原型、面向对象、访问域

先有类还是先有对象 从鸡蛋悖论解决可以悟到一个道理,不要从常识上假设非此即彼和绝对静止。 Ruby中的类和对象正是这么个东西 我们创建一个类,那它就是Class这个对象的实例,而Class,于是...

可数局部基
35分钟前
3
0
什么时候使用字节流、什么时候使用字符流,二者的区别

在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成。 InputStream 和OutputStream,...

watermelon11
今天
6
0
Alpakka Kafka,反应式Kafka客户端

Alpakka Kafka 是一个要用于 Java 和 Scala 语言的开源的流感知和反应式集成数据线项目。它建立在 Akka Stream之上,提供了 DSL 来支持反应式和流式编程,内置回压功能。Akka Streams 是 Re...

羊八井
今天
5
0
PHP7源码编译安装详解

$ yum groupinstall "development tools"$ yum install -y gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype \freetype-devel libpng libpng-devel libxml2 ......

问题终结者
今天
5
0
Django学习笔记-从创建虚拟环境到启用服务

1 前置条件 windows系统下,目前已经完成anaconda3或miniconda3的安装,这也意味着已经完成了python3的安装。 2 创建虚拟环境 1、通过Anaconda Prompt,使用conda命令创建虚拟环境(base) e...

davidwbnu
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部