Echarts的使用
前一段時間一直都挺忙的，各類事，也沒來得及每週的總結，趁着晚上的一點時間把項目中用的Echart中經常使用的各類圖表給抽象總結了一下，趁着週末跟你們分享一下。以前寫過一篇相關的文章，當時主要是講了如何引入、使用Echart，最新的Echart版本已經發布，以前講的不少文件均可以刪除了，下邊會一一給你們細講。javascript
爲了更好的講解如何使用這個圖形渲染插件，我會經過建立一個解決方案的形式一點點給你們講解清楚。java
1. EChart最新的文檔目錄。
首先建立一個解決方案，目錄以下：jquery
以前的一篇文章中講到若是要使用Echarts還要下載相關的ZRender的渲染包，最新的版本已經將這些合併在一塊兒了，只須要引用圖中紅框標註的echarts文件夾下的文件便可。各文件的做用以下：json
l Echarts-map.js :主要用來渲染跟地圖相關echarts
l Echarts.js :基本的常規圖形相關工具
l Esl.js :圖像引擎ui
Statics文件夾下的ECharts.js文件，爲我本身抽象總結出來的用於Echarts的配置文件加載、數據處理、初始化各類圖像類型的配置、圖像渲染的一些方法。this
2. 抽象以後的Echarts。
根據Echarts官網的講解，我把Echarts的使用歸結爲一下的幾個步驟，同時這些步驟相應的實現對應到Statics文件夾下的Echarts.js，該文件的主要代碼目錄以下：spa
|
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
|
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]
具體的代碼實現以下：
|
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
|
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 };
},
|
|
1
|
2.3 各類圖表類型的配置初始化
在經過2.2步驟將從後臺得到的數據進行初始化以後，咱們就能夠進行圖表的option的配置了，在這裏我主要對經常使用的餅圖、柱圖（單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
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
52
53
|
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
|
<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);
}
);
$(
function
() {
var
data = [{ name:
'2014-01'
, value: 20, group:
'A'
}, { name:
'2014-01'
, value: 40, group:
'B'
}, { name:
'2014-02'
, value: 30, group:
'A'
}, { name:
'2014-02'
, value: 10, group:
'B'
}, { name:
'2014-03'
, value: 200, group:
'A'
}, { name:
'2014-03'
, value: 60, group:
'B'
}, { name:
'2014-04'
, value: 50, group:
'A'
}, { name:
'2014-04'
, value: 45, group:
'B'
}, { name:
'2014-05'
, value: 110, group:
'A'
}, { name:
'2014-05'
, value: 80, group:
'B'
}, { name:
'2014-06'
, value: 90, group:
'A'
}, { name:
'2014-06'
, value: 60, group:
'B'
}];
var
option = ECharts.ChartOptionTemplates.Bars(data,
'Love'
);
var
container = $(
"#echart"
)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
var
option = ECharts.ChartOptionTemplates.Bars(data,
'Love'
,
true
);
var
container = $(
"#echart1"
)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
}
);
</script>
|
3.2.2展現效果
3.3 折線圖
3.3.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<script type=
"text/javascript"
>
$(
function
() {
var
data = [
{ name:
'2013-01'
, group:
'olive'
, value: 116 },
{ name:
'2013-01'
, group:
'momo'
, value: 115 },
{ name:
'2013-01'
, group:
'only'
, value: 222 },
{ name:
'2013-01'
, group:
'for'
, value: 324 },
{ name:
'2013-02'
, group:
'olive'
, value: 156 },
{ name:
'2013-02'
, group:
'momo'
, value: 185 },
{ name:
'2013-02'
, group:
'only'
, value: 202 },
{ name:
'2013-02'
, group:
'for'
, value: 34 },
{ name:
'2013-03'
, group:
'olive'
, value: 16 },
{ name:
'2013-03'
, group:
'momo'
, value: 51 },
{ name:
'2013-03'
, group:
'only'
, value: 22 },
{ name:
'2013-03'
, group:
'for'
, value: 84 }
];
var
opt = HighChart.ChartOptionTemplates.Line(data,
'Love-Rate'
,
"折線圖示例"
);
var
container = $(
"#container"
);
HighChart.RenderChart(opt, container);
});
$(
function
() {
var
data = [{ name:
'2014-01'
, value: 20, group:
'A'
}, { name:
'2014-01'
, value: 40, group:
'B'
}, { name:
'2014-02'
, value: 30, group:
'A'
}, { name:
'2014-02'
, value: 10, group:
'B'
}, { name:
'2014-03'
, value: 200, group:
'A'
}, { name:
'2014-03'
, value: 60, group:
'B'
}, { name:
'2014-04'
, value: 50, group:
'A'
}, { name:
'2014-04'
, value: 45, group:
'B'
}, { name:
'2014-05'
, value: 110, group:
'A'
}, { name:
'2014-05'
, value: 80, group:
'B'
}, { name:
'2014-06'
, value: 90, group:
'A'
}, { name:
'2014-06'
, value: 60, group:
'B'
}];
var
option = ECharts.ChartOptionTemplates.Lines(data,
'lines'
,
false
);
var
container = $(
"#echart"
)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
var
option = ECharts.ChartOptionTemplates.Lines(data,
'lines'
,
true
);
var
container = $(
"#echart1"
)[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
}
);
</script>
|
3.3.2展現效果
3.4 柱圖+折線（增幅）圖
3.4.1 展現效果
3.5 地圖
3.5.3 展現效果
到這裏，基本就把echart的抽象跟使用講完了，由於時間的關係，還有一些圖形的配置、數據處理沒有列出代碼，可是基本上實現都差很少。但願能給你們帶來一些幫助和啓發。後續會繼續推出HightCharts的抽象使用，敬請期待。
相關文章
- 1. ECharts的使用
- 2. echarts的使用
- 3. Echarts的使用
- 4. echarts的使用——vue
- 5. Angular使用echarts
- 6. echarts使用
- 7. react使用ECharts
- 8. ECharts使用
- 9. ionic3使用echarts
- 10. vue使用echarts
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ECharts的使用
- 2. echarts的使用
- 3. Echarts的使用
- 4. echarts的使用——vue
- 5. Angular使用echarts
- 6. echarts使用
- 7. react使用ECharts
- 8. ECharts使用
- 9. ionic3使用echarts
- 10. vue使用echarts