Echarts 學習
1. EChart最新的文檔目錄。
首先創建一個解決方案，目錄如下：
之前的一篇文章中講到如果要使用Echarts還要下載相關的ZRender的渲染包，最新的版本已經將這些合併在一起了，只需要引用圖中紅框標註的echarts文件夾下的文件即可。各文件的作用如下：
l Echarts-map.js :主要用來渲染跟地圖相關
l Echarts.js :基本的常規圖形相關
l Esl.js :圖像引擎
Statics文件夾下的ECharts.js文件，爲我自己抽象總結出來的用於Echarts的配置文件加載、數據處理、初始化各種圖像類型的配置、圖像渲染的一些方法。
2. 抽象之後的Echarts。
根據Echarts官網的講解，我把Echarts的使用歸結爲一下的幾個步驟，同時這些步驟相應的實現對應到Statics文件夾下的Echarts.js，該文件的主要代碼目錄如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
Var ECharts={
ChartConfig:
function
(container,option){ …..},
//加載Echarts配置文件
ChartDataFormate:{….},
//數據格式化
ChartOptionTemplates:{….},
//初始化常用的圖表類型
Charts:{ RenderChart:
function
(option){….},
//渲染圖表
RenderMap:
function
(option){…}
//渲染地圖
}
}；
|
2.1 Echarts配置文件的引入
在開始使用時，首先需要引入Echarts 的配置文件，也就是要加載基本的圖像類型，我們可以在每一個頁面都引入，但是這樣抽象化程度不高，重複使用率也不高，只需要有一個配置項在每次引用的時候加載一下即可，對應到具體的代碼實現，如下：
|
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
ChartConfig:
function
(container, option) {
//container:爲頁面要渲染圖表的容器，option爲已經初始化好的圖表類型的option配置
var
chart_path =
"/Statics/echarts/echarts"
;
//配置圖表請求路徑
var
map_path =
"/Statics/echarts/echarts-map"
;
//配置地圖的請求路徑
require.config({
//引入常用的圖表類型的配置
paths: {
echarts: chart_path,
'echarts/chart/bar'
: chart_path,
'echarts/chart/pie'
: chart_path,
'echarts/chart/line'
: chart_path,
'echarts/chart/k'
: chart_path,
'echarts/chart/scatter'
: chart_path,
'echarts/chart/radar'
: chart_path,
'echarts/chart/chord'
: chart_path,
'echarts/chart/force'
: chart_path,
'echarts/chart/map'
: map_path
}
});
this
.option = { chart: {}, option: option, container: container };
return
this
.option;
}
2.2 數據格式化
爲了能夠更好的展現各種的數據，在進行圖表的option配置之前，需要先對從後臺請求過來的數據進行格式化。後臺返回的數據必須是json格式的數據，且數據類型只能爲以下兩種類型:
Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
具體的代碼實現如下：
ChartDataFormate: {
FormateNOGroupData:
function
(data) {
//data的格式如上的Result1，這種格式的數據，多用於餅圖、單一的柱形圖的數據源
var
categories = [];
var
datas = [];
for
(
var
i = 0; i < data.length; i++) {
categories.push(data[i].name ||
""
);
datas.push({ name: data[i].name, value: data[i].value || 0 });
}
return
{ category: categories, data: datas };
},
FormateGroupData:
function
(data, type, is_stack) {
//data的格式如上的Result2，type爲要渲染的圖表類型：可以爲line，bar，is_stack
表示爲是否是堆積圖，這種格式的數據多用於展示多條折線圖、分組的柱圖
var
chart_type =
'line'
;
if
(type)
chart_type = type ||
'line'
;
var
xAxis = [];
var
group = [];
var
series = [];
for
(
var
i = 0; i < data.length; i++) {
for
(
var
j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
if
(j == xAxis.length)
xAxis.push(data[i].name);
for
(
var
k = 0; k < group.length && group[k] != data[i].group; k++);
if
(k == group.length)
group.push(data[i].group);
}
for
(
var
i = 0; i < group.length; i++) {
var
temp = [];
for
(
var
j = 0; j < data.length; j++) {
if
(group[i] == data[j].group) {
if
(type ==
"map"
)
temp.push({ name: data[j].name, value: data[i].value });
else
temp.push(data[j].value);
}
}
switch
(type) {
case
'bar'
:
var
series_temp = { name: group[i], data: temp, type: chart_type };
if
(is_stack)
series_temp = $.extend({}, { stack:
'stack'
}, series_temp);
break
;
case
'map'
:
var
series_temp = {
name: group[i], type: chart_type, mapType:
'china'
, selectedMode:
'single'
,
itemStyle: {
normal: { label: { show:
true
} },
emphasis: { label: { show:
true
} }
},
data: temp
};
break
;
case
'line'
:
var
series_temp = { name: group[i], data: temp, type: chart_type };
if
(is_stack)
series_temp = $.extend({}, { stack:
'stack'
}, series_temp);
break
;
default
:
var
series_temp = { name: group[i], data: temp, type: chart_type };
}
series.push(series_temp);
}
return
{ category: group, xAxis: xAxis, series: series };
},
|
2.3 各種圖表類型的配置初始化
在通過2.2步驟將從後臺獲得的數據進行初始化之後，我們就可以進行圖表的option的配置了，在這裏我主要對常用的餅圖、柱圖（單一、分組、堆積柱圖）、折線圖（分組、堆積折線圖）、柱圖+折線（增幅）圖、中國地圖等圖進行了配置項的初始化。具體實現如下：
|
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
ChartOptionTemplates: {
CommonOption: {
//通用的圖表基本配置
tooltip: {
trigger:
'axis'
//tooltip觸發方式:axis以X軸線觸發,item以每一個數據項觸發
},
toolbox: {
show:
true
,
//是否顯示工具欄
feature: {
mark:
true
,
dataView: { readOnly:
false
},
//數據預覽
restore:
true
,
//復原
saveAsImage:
true
//是否保存圖片
}
}
},
CommonLineOption: {
//通用的折線圖表的基本配置
tooltip: {
trigger:
'axis'
},
toolbox: {
show:
true
,
feature: {
dataView: { readOnly:
false
},
//數據預覽
restore:
true
,
//復原
saveAsImage:
true
,
//是否保存圖片
magicType: [
'line'
,
'bar'
]
//支持柱形圖和折線圖的切換
}
}
},
Pie:
function
(data, name) {
//data:數據格式：{name：xxx,value:xxx}...
var
pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
var
option = {
tooltip: {
trigger:
'item'
,
formatter:
'{b} : {c} ({d}/%)'
,
show:
true
},
legend: {
orient:
'vertical'
,
x:
'left'
,
data: pie_datas.category
},
series: [
{
name: name ||
""
,
type:
'pie'
,
radius:
'65%'
,
center: [
'50%'
,
'50%'
],
data: pie_datas.data
}
]
};
return
$.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
},
Lines:
function
(data, name, is_stack) {
//data:數據格式：{name：xxx,group:xxx,value:xxx}...
var
stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data,
'line'
, is_stack);
var
option = {
legend: {
data: stackline_datas.category
},
xAxis: [{
type:
'category'
,
//X軸均爲category，Y軸均爲value
data: stackline_datas.xAxis,
boundaryGap:
false
//數值軸兩端的空白策略
}],
yAxis: [{
name: name ||
''
,
type:
'value'
,
splitArea: { show:
true
}
}],
series: stackline_datas.series
};
return
$.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
},
Bars:
function
(data, name, is_stack) {
//data:數據格式：{name：xxx,group:xxx,value:xxx}...
var
bars_dates = ECharts.ChartDataFormate.FormateGroupData(data,
'bar'
, is_stack);
var
option = {
legend: bars_dates.category,
xAxis: [{
type:
'category'
,
data: bars_dates.xAxis,
axisLabel: {
show:
true
,
interval:
'auto'
,
rotate: 0,
margion: 8
}
}],
yAxis: [{
type:
'value'
,
name: name ||
''
,
splitArea: { show:
true
}
}],
series: bars_dates.series
};
return
$.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
},
……..
//其他的圖表配置，如柱圖+折線、地圖
……..
}
|
2.4 圖形的渲染
在配置好圖表類型的option之後，就可進行圖表的渲染了，具體的代碼實現如下：
|
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
|
Charts: {
RenderChart:
function
(option) {
require([
'echarts'
,
'echarts/chart/line'
,
'echarts/chart/bar'
,
'echarts/chart/pie'
,
'echarts/chart/k'
,
'echarts/chart/scatter'
,
'echarts/chart/radar'
,
'echarts/chart/chord'
,
'echarts/chart/force'
,
'echarts/chart/map'
],
function
(ec) {
echarts = ec;
if
(option.chart && option.chart.dispose)
option.chart.dispose();
option.chart = echarts.init(option.container);
window.onresize = option.chart.resize;
option.chart.setOption(option.option,
true
);
});
},
……..
//渲染其他的圖表類型，如：地圖
……..
}
|
3. 具體頁面的使用
經過2步驟中的一些列的配置、處理、初始化，我們就可以具體的使用了，在每一個aspx頁面使用之前，我們首先需要在頁面的標題引入以下的文件：
|
1
2
3
4
5
|
<script src=
"/Scripts/jquery-1.4.1.js"
type=
"text/javascript"
></script>
<script src=
"/Statics/echarts/esl.js"
type=
"text/javascript"
></script>
<script src=
"/Statics/ECharts.js"
type=
"text/javascript"
></script>
|
引入之後就可進行使用了，下面演示幾個常用的圖表的使用：
首頁每個aspx頁面上都有一個div用來做渲染圖表的容器，如下：
<div id="echart" style="width:100%; height:400px;"></div>
3.1 餅圖
3.1.1 實現代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script type=
"text/javascript"
>
$(
function
() {
var
data = [{ name:
'olive'
, value: 20 }, { name:
'only'
, value: 20 }, { name:
'momo'
, value: 20}];
var
option = ECharts.ChartOptionTemplates.Pie(data);
var
container = $(
"#echart"
)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
}
);
</script>
|
3.1.2 展示效果
3.2 柱圖
3.2.1 實現代碼
|
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
|
<script type=
"text/javascript"
>
$(
function
() {
var
data = [{ name:
'olive'
, value: 20 }, { name:
'only'
, value: 20 }, { name:
'momo'
, value: 20}];
var
option = ECharts.ChartOptionTemplates.Bar(data);
var
container = $(
"#echart"
)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
}
);
$(
|
相關文章
- 1. Echarts學習
- 2. echarts學習（上）
- 3. echarts學習備忘
- 4. echarts學習總結
- 5. ECharts初步學習
- 6. Echarts圖表-學習
- 7. ECharts-入門學習
- 8. ECharts學習記錄
- 9. echarts學習筆記
- 10. Echarts學習筆記
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Echarts學習
- 2. echarts學習（上）
- 3. echarts學習備忘
- 4. echarts學習總結
- 5. ECharts初步學習
- 6. Echarts圖表-學習
- 7. ECharts-入門學習
- 8. ECharts學習記錄
- 9. echarts學習筆記
- 10. Echarts學習筆記