推荐资源:https://github.com/abel533/ECharts
本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,Pie-饼图,Chord-和弦图等,支持ECharts中的所有图表。支持所有的Style类,如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支持多种Data数据类型,一个通用的Data数据,以及PieData,MapData,ScatterData,KData等针对性的数据结构。
Echart-java 使用Java快速开发ECharts图表。
http://mvnrepository.com/artifact/com.github.abel533/ECharts Echart-x.x.x.jar
建议使用3.0后的版本,不需要AMD依赖,像正常的jar包引入即可。
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
下面简单讲下步骤,然后就贴出源码,供大家参考哈~跟多例子,请看官网-
2.开发步骤:跟引入普通的js文件类似
(1)引入ECharts文件
(2)为ECharts准备一个具备大小宽高的DOM容器
(3)基于转备好的dom,初始化echarts实例
(4)制定图表的配置项和数据
(5)使用刚制定的配置项和数据显示图表
静态展示例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts 样例</title>
<!-- 1.引入echarts文件 -->
<!--下载好echart的js文件,像普通的js引入即可,也可引入在线的js-->
<script type="text/javascript" src="./js/echarts.js"></script>
</head>
<body>
<!-- 2.为ECharts准备一个具备大小宽高的DOM容器 -->
<div id="main" style="width: 600px; height: 600px;"></div>
<script type="text/javascript">
/* 3.初始化echarts实例 */
var myChart = echarts.init(document.getElementById("main"));
/* 4.设置图表的配置信息和数据,setOption用指定数据绘图 */
var option={
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
} ],
yAxis : {
type : 'value'
},
series : [ {
name : "销量",
type : "bar",
data : [ 5, 20, 40, 10, 10, 20 ]
} ]
};
myChart.setOption(option);
</script>
</body>
</html>
模拟动态获取数据库的例子。以jfinal框架为例:记得下载echarts.jar
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.data.PieData;
import com.github.abel533.echarts.json.GsonUtil;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Pie;
import com.jfinal.core.Controller;
public class IndexController extends Controller {
public void index() {
String optionStr= GsonUtil.format(selectRemoveCauses());
setAttr("option", optionStr);
render("index.html");
}
public Option selectRemoveCauses(){
//查询前20
//数据库查询获取统计数据
List<Map<String, Object>> list =new ArrayList<>();
for(int i=0;i<10;i++) {
Map<String, Object> map=new HashMap<>();
map.put("NAME", "张三"+i);
map.put("TOTAL", new Random().nextInt(50));
list.add(map);
}
//创建Option
Option option = new Option();
option.title("剔除药品").tooltip(Trigger.axis).legend("金额(元)");
//横轴为值轴
option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
//创建类目轴
CategoryAxis category = new CategoryAxis();
//柱状数据
Bar bar = new Bar("金额(元)");
//饼图数据
Pie pie = new Pie("金额(元)");
//循环数据
for (Map<String, Object> objectMap : list) {
//设置类目
category.data(objectMap.get("NAME"));
System.out.println(objectMap.get("NAME"));
//类目对应的柱状图
bar.data(objectMap.get("TOTAL"));
//饼图数据
System.out.println(objectMap.get("TOTAL"));
pie.data(new PieData(objectMap.get("NAME").toString(), objectMap.get("TOTAL")));
}
//设置类目轴
option.yAxis(category);
//饼图的圆心和半径
pie.center(900,380).radius(100);
//设置数据
option.series(bar, pie);
//由于药品名字过长,图表距离左侧距离设置180,关于grid可以看ECharts的官方文档
option.grid().x(180);
//返回Option
return option;
}
}
//记得为div设置一个宽高放图表
Html 中<div id="lring" style=“width: 400px;
height: 85%;background: #fff;”></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('lring'));
var option =#(option);
myChart.setOption(option);
</script>
最后:给一些笔记:
Echarts.init()初始化Echarts实例
setOption用指定数据绘图
Option对象
标题:title
图例:legend
X轴:xAxis
Y轴:yAxis
数据:series:Name/type/data
option 项中的配置:
tooltip 提示框,鼠标悬浮交互时的信息提示。
trigger: 触发类型
formatter: 正则设置格式 提示框浮层内容格式器
legend: 图例组件
series:系列列表
Axis - 坐标轴
Grid - 网格
Title - 标题
Tooltip - 提示框
Legend - 图例组件
DataZoom - 数据区域缩放
DataRange - 值域漫游
Toolbox - 工具箱(内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。)
Timeline - 时间线
visualMap - 视觉映射组件
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
center:['30%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置 (Object width, Object height)
radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
ECharts 中有一些通用的样式,诸如阴影、透明度、颜色、边框颜色、边框宽度等,这些样式一般都会在系列的 itemStyle 里设置。
例如阴影的样式可以通过下面几个配置项设置:
itemStyle : //图形样式
itemStyle: {
normal: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
Node Package Manager 节点的软件包管理器(简称npm)
Option正式代码中使用,不需要任何依赖。
GsonOption正式代码中可以使用,需要引入Gson包,使用toString()方法可以转换为JSON结构的数据(支持function,详情看下面的function说明)。
EnhancedOption测试专用,主要方便在浏览器中直接查看效果。
使用GsonOption,FsonOption的toString()方法返回给前端时,前端需要使用eval('('+optionJsonStr+')')转换为JSON结构
定义了一个Option对象,里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后,把他放入jsonObject对象传回前台一接收json值即可。
formatter: "{a} <br/>{b}: {c} ({d}%)"
这里补充一下formatter格式化方法的参数说明:
{string},模板(Template),其变量为:
{a} | {a0}
{b} | {b0}
{c} | {c0}s
{d} | {d0} (部分图表类型无此项)
多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
其中变量a、b、c在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图: a(系列名称),b(类目值),c(数值), d(无)
散点图(气泡)图 : a(系列名称),b(数据名称),c(数值数组), d(无)
饼图、雷达图 : a(系列名称),b(数据项名称),c(数值), d(百分比)
弦图 : a(系列名称),b(项1名称),c(项1-项2值),d(项2名称), e(项2-项1值)
力导向图 :
节点 : a(类目名称),b(节点名称),c(节点值)
边 : a(系列名称),b(源名称-目标名称),c(边权重), d(如果为true的话则数据来源是边)
{Function},传递参数列表如下:
<Array> params : 数组内容同模板变量,[[a, b, c, d], [a1, b1, c1, d1], ...]
<String> ticket : 异步回调标识
<Function> callback : 异步回调,回调时需要两个参数,第一个为前面提到的ticket,第二个为填充内容html
自己多琢磨,多练习很容易就上手的!
*重要*:Echart非静态数据,一般在cotroller中获取数据,设置option属性,返回option对象。