您的位置：首页 > 编程语言 > Java开发

ECharts初识与Echarts-java类库应用

2015-05-31 20:40 519 查看

　　　ECharts，缩写来自Enterprise Charts，商业级数据图表，来自百度的一款开源、功能强大的数据可视化产品，从官网的example中可以看到能够实现目前见到的各种图形报表，并且带有详细的代码和图形demo：http://echarts.baidu.com/doc/example.html

　　不过我们通常不会像demo中那样绑定死数据，我们通常需要从数据库中获取数据，再展示出来，我们先看绑定静态数据的demo，通过代码分析如何绑定动态数据。

绑定静态数据（官网）

以条形图为例：

JS绑定数据

<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
title : {
text: '平台交易额',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['2015年']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','总']
}
],
series : [
{
name:'2015年',
type:'bar',
data:[48203, 53489, 119034, 184970, 231744, 630230]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>

　　其中最关系的就是其中的option如何动态加载数据。其实无非就是拼串，我们既可以在前台去拼也可以在后台拼接成json串返回页面。如果整个项目只需要一种图表，我们拼一拼也无所谓，但是要应对以后的图形变化，或者新增图形，每种图形都拼一遍肯定是麻烦，也不符合面向对象的特点，既然如此，我们就需要把option变成对象去管理。

　　个人对Echarts其中各个图表的option不是很熟，而网上也已经有了很成熟的类库，简单学习即可，源码：

　　　http://git.oschina.net/free/ECharts/tree/master/src/main/java/com/github/abel533/echarts/

下面以springmvc框架来再次实现动态数据加载

controller

@RequestMapping("/example")
public  class example{
@ResponseBody
public WebResult getOption() throws Exception {
WebResult result = new WebResult();
try {
Option option = injuryService.selectRemoveCauses();
result.isOK();
result.setData(option);
} catch (BusinessException e) {
result.setException(e);
}
return result;
}

Service逻辑处理

Public class exampleService{
@Override
public Option getOption() throws BusinessException {
//查询前20
PageHelper.startPage(1, 20, false);
//数据库查询获取统计数据
List<Map<String, Object>> list = exampleDao.getOption();
//为了数据从大到小排列，这里需要倒叙
Collections.sort(list, new Comparator<Map<String, Object>>() {
@Override
public int compare(Map<String, Object> o1, Map<String, Object> o2) {
return -1;
}
});
//创建Option
Option option = new Option();
option.title("平台交易额").tooltip(Trigger.axis).legend("2015年");
//横轴为值轴
option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
//创建类目轴
CategoryAxis category = new CategoryAxis();
//柱状数据
Bar bar = new Bar("2015年");
//循环数据
for (Map<String, Object> objectMap : list) {
//设置类目
category.data(objectMap.get("NAME"));
//类目对应的柱状图
bar.data(objectMap.get("TOTAL"));
}
//设置类目轴
option.yAxis(category);
//设置数据
option.series(bar);
//返回Option
return option;
}
}

Dao数据访问

代码略，从数据库获取需要的数据即可

Jsp页面

<body style="padding:0">
<div style="padding:10px;clear: both;">
<div id="example" style="height:600px;"></div>
</div>
</body>
<script src="echarts/echarts-all.js"></script>
<script type="text/javascript">
//图表
var exampleChar = echarts.init(document.getElementById('example'));

//查询
function loadDrugs() {
psLineChar.clear();
psLineChar.showLoading({text: '正在努力的读取数据中...'});
$.getJSON('example.htm', function (data) {
if (data.success) {
exampleChar.setOption(data.data, true);
exampleChar.hideLoading();
} else {
alert('提示', data.msg);
}
});
}
//载入图表
loadDrugs();
</script>

不敢哪种图表，其中变化的就是option的参数，学会了一种，其他的也就很容易实现。

Echarts是一个开源的图形报表，Echarts-java类库也是一个开源的类库，开源使他们发展的很快，也更有益于我们的应用和开发。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航