百度開源圖標庫Echarts
ECharts，縮寫來自Enterprise Charts舆吮，商業(yè)級數據圖表揭朝，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上色冀，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11萝勤，chrome，firefox呐伞，Safari等），底層依賴輕量級的Canvas類庫ZRender慎式，提供直觀伶氢，生動，可交互瘪吏，可高度個性化定制的數據可視化圖表癣防。創(chuàng)新的拖拽重計算、數據視圖掌眠、值域漫游等特性大大增強了用戶體驗蕾盯，賦予了用戶對數據進行挖掘、整合的能力蓝丙。
支持折線圖（區(qū)域圖）级遭、柱狀圖（條狀圖）、散點圖（氣泡圖）渺尘、K線圖挫鸽、餅圖（環(huán)形圖）、雷達圖（填充雷達圖）鸥跟、和弦圖丢郊、力導向布局圖、地圖医咨、儀表盤枫匾、漏斗圖、事件河流圖等12類圖表拟淮，同時提供標題干茉，詳情氣泡、圖例惩歉、值域等脂、數據區(qū)域俏蛮、時間軸、工具箱等7個可交互組件上遥，支持多圖表搏屑、組件的聯動和混搭展現。
Echarts官方網站：http://echarts.baidu.com
Echarts Java類庫：https://github.com/abel533/ECharts
如何使用
Echarts是一個純Javascript圖標庫粉楚，我們需要在html的head中間引入js文件辣恋，官方下載地址：http://echarts.baidu.com/download.html 官方提供了四個版本的下載，建議使用完整版模软，在實際使用中發(fā)現簡易版本可能存在一些特性無法使用的問題伟骨，完整版也只有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: '最高點'
}]
]
}
}
]
};
這是一個折線的代碼部分单默，其效果如下：
在實際項目中，我們不可能將數據寫死在js中忘瓦，這個時候要么后端利用自己的數據拼接成上面的代碼搁廓，前端利用后端拼接好的代碼直接展示，要么后端將數據傳遞給前端耕皮，前端自己拼接温学。其實不管是哪一種鳄梅，都是比較繁瑣的搞动。在GitHub上午笛，已經有人提供了一個Echarts的類庫，利用該類庫苦锨，后端開發(fā)人員可以很方便的構建所需的對象逼泣，最后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字符串會被轉義（并不是普遍現象）珊拼。
展示效果
更多的使用有待探索。
