原文：http://www.cnblogs.com/sword-successful/p/wolfy.html
前言
從昨天開始給項目里添加一些圖表對比功能，上一個項目里使用的是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路徑。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
require.config({
packages: [
{
name:
'echarts'
,
location:
'/Scripts/echarts_2_0_4/src'
,
main:
'echarts'
}, {
name:
'zrender'
,
location:
'/Scripts/zrender/src'
,
main:
'zrender'
}]
});
|
6、動態加載echarts為后續回調函數使用做准備。
|
1
2
3
4
5
6
|
require(
[
'echarts'
,
'echarts/chart/line'
,
'echarts/chart/bar'
]
|
7、編寫回調函數(也就是做你想看到的效果)
從代碼中可以看出，當我們完成准備工作以后就可以將剩余精力放在option上了，具體option選項就可以對照API來設置了，這點應該和highcharts差別不大，就是不太詳細。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
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);
}
|