百度开源图标库Echarts
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
Echarts官方网站：http://echarts.baidu.com
Echarts Java类库：https://github.com/abel533/ECharts
如何使用
Echarts是一个纯Javascript图标库，我们需要在html的head中间引入js文件，官方下载地址：http://echarts.baidu.com/download.html 官方提供了四个版本的下载，建议使用完整版，在实际使用中发现简易版本可能存在一些特性无法使用的问题，完整版也只有537KB，并不大，因此强烈建议使用完整版。
一般来说，为了使用Echarts，需要拼接出Echarts需要的配置，这个工作可以是后端做，也可以是前端做。来看看一个例子：
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
这是一个折线的代码部分，其效果如下：
image.png
在实际项目中，我们不可能将数据写死在js中，这个时候要么后端利用自己的数据拼接成上面的代码，前端利用后端拼接好的代码直接展示，要么后端将数据传递给前端，前端自己拼接。其实不管是哪一种，都是比较繁琐的。在GitHub上，已经有人提供了一个Echarts的类库，利用该类库，后端开发人员可以很方便的构建所需的对象，最后Json化后传递给前端即可。
代码示例
后端
Java代码
Option option = new Option();
option.title("**系统同比数据").legend("统计数值");
option.tooltip(new Tooltip().trigger(Trigger.axis));
Feature mark = new Mark().show(true);
Feature dataView = new DataView().show(true).readOnly(true);
Feature magicType = new MagicType().show(true);
Feature restore = new Restore().show(true);
Feature saveAsImage = new SaveAsImage().show(true);
Toolbox toolbox = new Toolbox().feature(mark, dataView, magicType, restore, saveAsImage);
option.toolbox(toolbox);
option.calculable(true);
List<String> dateList = Lists.newArrayList();
List<Number> valueList = Lists.newArrayList();
for (SummaryData summaryData : summaryDataList) {
dateList.add(summaryData.getDate());
valueList.add(summaryData.getValue());
}
CategoryAxis categoryAxis = new CategoryAxis().name("日期").data(dateList.toArray());
categoryAxis.setBoundaryGap(false);
option.xAxis(categoryAxis);
option.yAxis(new ValueAxis().name("统计数值").splitArea(new SplitArea().show(true)));
Line line = new Line();
line.name(getDataName2Cname().get(name));
line.setData(valueList);
line.markLine(new MarkLine().data(new Data().type(MarkType.average)));
line.markPoint(new MarkPoint().data(new Data().type(MarkType.min),
new Data().type(MarkType.max)));
option.series(line);
return option;
该Java类库中类的结构基本上和Echarts的结构保持一致，因此只需要对照Echarts的API文档就能很快的知道该类库如何使用。
得到Option对象后，直接使用Json工具类将其转化为Json字符串传递给前端，注意，转为Json字符串时，null值不要包含进来。
前端
<div id="psLine" style="height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('psLine'));
myChart.setOption(${result?no_encode});
</script>
其中，result即为后端传过来的字符串，这里之所以加上no_encode，是因为后端传过来的Json字符串会被转义（并不是普遍现象）。
展示效果
image.png
更多的使用有待探索。
网友评论