前言
從昨天開始給項目里添加一些圖表對比功能，上一個項目里使用的是Highcharts，本打算繼續用Highcharts做的，昨天試了下做出來的效果不太好，主要也是因為看的多了沒什么新鮮感了，於是便嘗試下百度做的ECharts， 總體效果還是不錯的。
先來幾張效果圖體驗下
其中第6張、第七張的效果可以說是在HTML環境下將Canvas發揮到極致，雖然我目前還沒接觸到HTML5和CSS3，深深感到和社會脫節啊，一直做信息化系統開發，整天跟隨業務而變化，有時甚感無聊[隨意吐槽下]。
優勢
1、顏色對比度和鮮明度明顯要比HighCharts要好。也可能是因為我看HighCharts看的多了，有些視覺疲勞了。
2、支持工具欄。 這個可以說是用了這么多前端插件最意外的一個功能，工具欄中支持【查看數據】、【折現圖】、【堆疊】、【平鋪】、【還原】、【保存為圖片】，幾種格式互相切換起來確實方便不少，尤其是事業單位的員工用戶，閑的沒事干可以點來點去。
3、模塊化引入和單文件引入。在開發時你可以引用所有echarts開發文件，方便開發和調試。但是項目發布后則可以去除不需要的文件以加快頁面響應速度。
4、用ECharts自己的話說就是折、柱、散點、K線20萬數據，秒級出圖(估計這一點完爆其他控件)。
5、拖拽重新計算，可以讓懂數據的、愛好數據的自行進行數據挖掘，重新整合。
缺點
1、ECharts出生在這個視覺爆炸的年代，竟然不支持3D，這一點百度前端設計團隊需要向HighCharts學習。最起碼像線、柱、堆疊這些老掉牙的圖應該支持3D。
2、目前還沒研究echarts的源碼，從下載的Demo和我自己Demo的過程中感覺，入門有點迷糊，需要引用zrender，貌似還基於Bootstrap。
3、API 做的不和諧，以至於我看第一眼還沒搞明白怎么個用法。 就拿單位來說事吧，看了Demo中，幾乎沒有一個tooltip后設置單位的，可見百度有點外行了，匯總型圖表不加單位不是找罵呢？ 讓那些愛好數據的老古董怎么看呢？
以上兩點僅為個人體驗看法，不喜勿噴，如有不同看法，很樂意一起學習討論。
Demo步驟
1、分別下載ECharts 和ZRender。 后者初始化時需要引用。
2、引用esl.js。esl.js包含和引用了echarts初始化的一些方法。寫法很新穎，第一次這么寫。
<script src="/Scripts/echarts_2_0_4/doc/asset/js/esl/esl.js" type="text/javascript"></script>
4、准備頁面DOM容器，放個div， 寬度設置450就完事了。
5、為模塊加載器配置echarts路徑和zrender路徑。
require.config({
packages: [
{
name: 'echarts',
location: '/Scripts/echarts_2_0_4/src',
main: 'echarts'
}, {
name: 'zrender',
location: '/Scripts/zrender/src',
main: 'zrender'
}]
});
6、動態加載echarts為后續回調函數使用做准備。
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar'
]
7、編寫回調函數(也就是做你想看到的效果)
從代碼中可以看出，當我們完成准備工作以后就可以將剩余精力放在option上了，具體option選項就可以對照API來設置了，這點應該和highcharts差別不大，就是不太詳細。
option = {
title : {
text: '未來一周氣溫變化',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高氣溫','最低氣溫']
},
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 : '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 : '平均值'}
]
}
}
]
};
function (ec) {
var chart = ec.init(document.getElementById('main'));
chart.setOption(option);
}
總結
剛開始使用echarts只是為了解決視覺疲勞的問題，目前剛開始弄還有一些細節問題沒有搞定，比如tooltip時單位如何設置、線、柱、堆疊圖如何設置圓角，最起碼官方的demo都是圓角的，還有待於繼續學習和研究。如果有遇到這幾個問題並有解決方案的朋友歡迎發郵件指點我下，謝謝。
郵件：luck_successful@163.com.
順便推廣下伙計的討論群，歡迎加入討論[329276418] 群主：wolfy