ECharts使用心得

逃离我推掉我的手 2022-05-21 01:57 386阅读 0赞

#     #

## 前言 ##

上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。

## 1.    插件的下载 ##

以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址： [http://echarts.baidu.com/][http_echarts.baidu.com]

ZRender下载地址：[http://ecomfe.github.io/zrender/index.html][http_ecomfe.github.io_zrender_index.html]

下载之后解压各自的文件目录结构如下：

ECharts：

![16165955-22874cebac484e23b650ee074316dc65.png][]

ZRender:

![16170007-49da6cb8e67442b29f4a23f95e5afaae.png][]

## 2.    插件的引用 ##

首先，新建一个Web应用程序，然后添加刚刚下载的文件，具体的目录结构如下：

![16170026-dbba4f3577dc4f0f8176e9a0427d3e59.png][]

这里有以下几点需要说明：

l  所有的跟ECharts有关的文件全部都在echarts文件夹下

l  echarts文件夹的内容分为两部分

1)       一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：

![16170043-923302d7ee8547038fa675b6c8815265.png][]

2)       另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：

![16170056-b847ebbd759247499076c0cdf1b8bf1c.png][]

## 3.    在页面中的具体使用 ##

按照上边的步骤配置过之后，我们就可以在页面中引用了，这里我主要是演示地图控件的使用方式，因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。

### 3.1          MapChart ###

首先在跟2中的echarts文件夹同一个目录（也就是Modules文件夹）下添加一个aspx页或html页，需要注意的是，如果是在aspx页中使用echarts时，需要把要渲染的div放在form标签之外，否则图形是显示不出来的。

#### 3.1.1 在head标签中添加对echarts的引用如下： ####

1.  <head runat= "server">
2.  <title></title>
3.  <script src= "echarts/esl.js" type= "text/javascript"></script>
4.  </head>

#### 3.1.2 在body标记中，form标记之外，添加一个div，用来做图表渲染的容器。如下： ####

1.  <body>
2.  
3.  <div id= "main"style= "height:500px;border:1px solid \#ccc;padding:10px;"></div>
4.  
5.  ……………
6.  
7.  ……………
8.  
9.  </body>

#### 3.1.3 在3.1.3中添加的div标记下，添加如下的js代码段，如下： ####

1.  <script type= "text/javascript">
2.  
3.  *//为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。*
4.  这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。
5.  
6.  require.config(\{
7.  
8.  paths: \{
9.  
10. echarts: './echarts/echarts',
11. 
12. 'echarts/chart/map': './echarts/echarts-map'
13. 
14. \}
15. 
16. \});
17. 
18. *//动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径*
19. 
20. require(
21. 
22. \[ 
23. 
24.  'echarts',
25. 
26.  'echarts/chart/map'
27. 
28. \],
29. 
30. function (ec) \{
31. 
32. varmyChart=ec.init(document.getElementById( 'main'));
33. 
34. *//option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档*
35. 
36. option= \{
37. 
38. title: \{
39. 
40. text: 'iphone销¨²量¢?',
41. 
42. subtext: '纯ä?属º?虚¨¦构1',
43. 
44. x: 'center'
45. 
46. \},
47. 
48. tooltip: \{
49. 
50. trigger: 'item'
51. 
52. \},
53. 
54. legend: \{
55. 
56. orient: 'vertical',
57. 
58. x: 'left',
59. 
60. data: \[ 'iphone3', 'iphone4', 'iphone5'\]
61. 
62. \},
63. 
64. dataRange: \{
65. 
66. min: 0,
67. 
68. max: 2500,
69. 
70. text: \[ '高?', '低Ì¨ª'\], *// 文?本À?，ê?默?认¨?为a数ºy值¦Ì文?本À?*
71. 
72. calculable: true,
73. 
74. textStyle: \{
75. 
76. color: 'orange'
77. 
78. \}
79. 
80. \},
81. 
82. toolbox: \{
83. 
84. show: true,
85. 
86. orient: 'vertical',
87. 
88. x: 'right',
89. 
90. y: 'center',
91. 
92. feature: \{
93. 
94. mark: true,
95. 
96. dataView: \{ readOnly: false \},
97. 
98. restore: true,
99. 
100. saveAsImage: true
101. 
102. \}
103. 
104. \},
105. 
106. series: \[
107. 
108. \{
109. 
110. name: 'iphone3',
111. 
112. type: 'map',
113. 
114. mapType: 'china',
115. 
116. selectedMode: 'single',
117. 
118. itemStyle: \{
119. 
120. normal: \{ label: \{ show: true \},color: '\#ffd700' \}, *// for legend*
121. 
122. emphasis: \{ label: \{ show: true\} \}
123. 
124. \},
125. 
126. data: \[
127. 
128. \{ name: '北À¡À京?', value:Math.round(Math.random() \* 1000) \},
129. 
130. \{ name: '天¬¨¬津¨°', value:Math.round(Math.random() \* 1000) \},
131. 
132. \{ name: '上¦?海¡ê', value:Math.round(Math.random() \* 1000) \},
133. 
134. \{ name: '重?庆¨¬', value:Math.round(Math.random() \* 1000) \},
135. 
136. \{ name: '河¨®北À¡À', value:Math.round(Math.random() \* 1000) \},
137. 
138. \{ name: '河¨®南?', value:Math.round(Math.random() \* 1000) \},
139. 
140. \{ name: '云?南?', value:Math.round(Math.random() \* 1000) \},
141. 
142. \{ name: '辽¢¨¦宁t', value:Math.round(Math.random() \* 1000) \},
143. 
144. \{ name: '黑¨²龙¢¨²江-', value:Math.round(Math.random() \* 1000) \},
145. 
146. \{ name: '湖t南?', value:Math.round(Math.random() \* 1000) \},
147. 
148. \{ name: '安ã2徽?', value:Math.round(Math.random() \* 1000) \},
149. 
150. \{ name: '山¦?东?', value:Math.round(Math.random() \* 1000) \},
151. 
152. \{ name: '新?疆?', value:Math.round(Math.random() \* 1000) \},
153. 
154. \{ name: '江-苏?', value:Math.round(Math.random() \* 1000) \},
155. 
156. \{ name: '浙?江-', value:Math.round(Math.random() \* 1000) \},
157. 
158. \{ name: '江-西¡Â', value:Math.round(Math.random() \* 1000) \},
159. 
160. \{ name: '湖t北À¡À', value:Math.round(Math.random() \* 1000) \},
161. 
162. \{ name: '广?西¡Â', value:Math.round(Math.random() \* 1000) \},
163. 
164. \{ name: '甘¨º肃¨¤', value:Math.round(Math.random() \* 1000) \},
165. 
166. \{ name: '山¦?西¡Â', value:Math.round(Math.random() \* 1000) \},
167. 
168. \{ name: '内¨²蒙¨¦古?', value:Math.round(Math.random() \* 1000) \},
169. 
170. \{ name: '陕¦?西¡Â', value:Math.round(Math.random() \* 1000) \},
171. 
172. \{ name: '吉a林¢?', value:Math.round(Math.random() \* 1000) \},
173. 
174. \{ name: '福¡ê建¡§', value:Math.round(Math.random() \* 1000) \},
175. 
176. \{ name: '贵¨®州Y', value:Math.round(Math.random() \* 1000) \},
177. 
178. \{ name: '广?东?', value:Math.round(Math.random() \* 1000) \},
179. 
180. \{ name: '青¨¤海¡ê', value:Math.round(Math.random() \* 1000) \},
181. 
182. \{ name: '西¡Â藏?', value:Math.round(Math.random() \* 1000) \},
183. 
184. \{ name: '四?川ä¡§', value:Math.round(Math.random() \* 1000) \},
185. 
186. \{ name: '宁t夏?', value:Math.round(Math.random() \* 1000) \},
187. 
188. \{ name: '海¡ê南?', value:Math.round(Math.random() \* 1000) \},
189. 
190. \{ name: '台¬¡§湾ª?', value:Math.round(Math.random() \* 1000) \},
191. 
192. \{ name: '香?港?', value:Math.round(Math.random() \* 1000) \},
193. 
194. \{ name: '澳ã?门?', value:Math.round(Math.random() \* 1000) \}
195. 
196. \]
197. 
198. \},
199. 
200. \{
201. 
202. name: 'iphone4',
203. 
204. type: 'map',
205. 
206. mapType: 'china',
207. 
208. selectedMode: 'single',
209. 
210. itemStyle: \{
211. 
212. normal: \{ label: \{ show: true \},color: '\#ff8c00' \}, *// for legend*
213. 
214. emphasis: \{ label: \{ show: true\} \}
215. 
216. \},
217. 
218. data: \[
219. 
220. \{ name: '北À¡À京?', value:Math.round(Math.random() \* 1000) \},
221. 
222. \{ name: '天¬¨¬津¨°', value:Math.round(Math.random() \* 1000) \},
223. 
224. \{ name: '上¦?海¡ê', value:Math.round(Math.random() \* 1000) \},
225. 
226. \{ name: '重?庆¨¬', value:Math.round(Math.random() \* 1000) \},
227. 
228. \{ name: '河¨®北À¡À', value:Math.round(Math.random() \* 1000) \},
229. 
230. \{ name: '安ã2徽?', value:Math.round(Math.random() \* 1000) \},
231. 
232. \{ name: '新?疆?', value:Math.round(Math.random() \* 1000) \},
233. 
234. \{ name: '浙?江-', value:Math.round(Math.random() \* 1000) \},
235. 
236. \{ name: '江-西¡Â', value:Math.round(Math.random() \* 1000) \},
237. 
238. \{ name: '山¦?西¡Â', value:Math.round(Math.random() \* 1000) \},
239. 
240. \{ name: '内¨²蒙¨¦古?', value:Math.round(Math.random() \* 1000) \},
241. 
242. \{ name: '吉a林¢?', value:Math.round(Math.random() \* 1000) \},
243. 
244. \{ name: '福¡ê建¡§', value:Math.round(Math.random() \* 1000) \},
245. 
246. \{ name: '广?东?', value:Math.round(Math.random() \* 1000) \},
247. 
248. \{ name: '西¡Â藏?', value:Math.round(Math.random() \* 1000) \},
249. 
250. \{ name: '四?川ä¡§', value:Math.round(Math.random() \* 1000) \},
251. 
252. \{ name: '宁t夏?', value:Math.round(Math.random() \* 1000) \},
253. 
254. \{ name: '香?港?', value:Math.round(Math.random() \* 1000) \},
255. 
256. \{ name: '澳ã?门?', value:Math.round(Math.random() \* 1000) \}
257. 
258. \]
259. 
260. \},
261. 
262. \{
263. 
264. name: 'iphone5',
265. 
266. type: 'map',
267. 
268. mapType: 'china',
269. 
270. selectedMode: 'single',
271. 
272. itemStyle: \{
273. 
274. normal: \{ label: \{ show: true \},color: '\#da70d6' \}, *// for legend*
275. 
276. emphasis: \{ label: \{ show: true\} \}
277. 
278. \},
279. 
280. data: \[
281. 
282. \{ name: '北À¡À京?', value:Math.round(Math.random() \* 1000) \},
283. 
284. \{ name: '天¬¨¬津¨°', value:Math.round(Math.random() \* 1000) \},
285. 
286. \{ name: '上¦?海¡ê', value:Math.round(Math.random() \* 1000) \},
287. 
288. \{ name: '广?东?', value:Math.round(Math.random() \* 1000) \},
289. 
290. \{ name: '台¬¡§湾ª?', value:Math.round(Math.random() \* 1000) \},
291. 
292. \{ name: '香?港?', value:Math.round(Math.random() \* 1000) \},
293. 
294. \{ name: '澳ã?门?', value:Math.round(Math.random() \* 1000) \}
295. 
296. \]
297. 
298. \}
299. \]
300. \};
301. *//以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。*
302. *//需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选*
303. varecConfig= require( 'echarts/config');
304. myChart. on(ecConfig.EVENT.MAP\_SELECTED,function (param) \{
305. varselected=param.selected;
306. varmapSeries=option.series\[ 0\];
307. vardata= \[\];
308. varlegendData= \[\];
309. varname;
310. for (varp= 0,len=mapSeries.data.length; p<len; p++) \{
311. name=mapSeries.data\[p\].name;
312. mapSeries.data\[p\].selected=selected\[name\];
313. if (selected\[name\]) \{
314. alert(name); *//这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作* 
315. 
316. \}
317. \}
318. \});
319. myChart.setOption(option);
320. \}
321. );
322. </script>

#### 3.1.4  完成以上操作之后，效果如下图所示： ####

![16170121-8493606dd21b4c9ebca6fce650213c9c.png][]

### 3.2 LineChart ###

除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例，其它的示例都是一样的。

#### 3.2.1 跟3.1.1一样，引入echarts脚本 ####

#### 3.2.2 跟3.2.2一样，添加渲染图表的div容器 ####

#### 3.2.3 在3.2.2添加的div下添加如下js代码块 ####

1.  <scripttype= "text/javascript">
2.  
3.  require.config(\{
4.  
5.  paths: \{
6.  
7.  echarts: './echarts/echarts',
8.  
9.  'echarts/chart/bar': './echarts/echarts', *//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，*
10. 其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别
11. 
12. 'echarts/chart/line': './echarts/echarts'
13. 
14. \}
15. 
16. \});
17. 
18. require(
19. 
20. \[ 
21. 
22.  'echarts',
23. 
24.  'echarts/chart/bar',
25. 
26.  'echarts/chart/line'
27. 
28. \],
29. 
30. function (ec) \{
31. 
32. varmyChart=ec.init(document.getElementById( 'main'));
33. 
34. option= \{
35. 
36. tooltip: \{
37. 
38. trigger: 'axis'
39. 
40. \},
41. 
42. legend: \{
43. 
44. data: \[ '邮®¨º件t营®a销¨²', '联¢a盟?广?告?', '视º¨®频¦Ì广?告?', '直¡À接¨®访¤?问¨º', '搜?索¡Â引°y擎?'\]
45. 
46. \},
47. 
48. toolbox: \{
49. 
50. show: true,
51. 
52. feature: \{
53. 
54. mark: true,
55. 
56. dataView: \{ readOnly: false \},
57. 
58. magicType: \[ 'line', 'bar'\],
59. 
60. restore: true,
61. 
62. saveAsImage: true
63. 
64. \}
65. 
66. \},
67. 
68. calculable: true,
69. 
70. xAxis: \[
71. 
72. \{
73. 
74. type: 'category',
75. 
76. boundaryGap: false,
77. 
78. data: \[ '周¨¹一°?', '周¨¹二t', '周¨¹三¨y', '周¨¹四?', '周¨¹五?', '周¨¹六¢¨´', '周¨¹日¨?'\]
79. 
80. \}
81. 
82. \],
83. 
84. yAxis: \[
85. 
86. \{
87. 
88. type: 'value',
89. 
90. splitArea: \{ show: true \}
91. 
92. \}
93. 
94. \],
95. 
96. series: \[
97. 
98. \{
99. 
100. name: '邮®¨º件t营®a销¨²',
101. 
102. type: 'line',
103. 
104. stack: '总Á¨¹量¢?',
105. 
106. data: \[ 120, 132, 101, 134, 90, 230, 210\]
107. 
108. \},
109. 
110. \{
111. 
112. name: '联¢a盟?广?告?',
113. 
114. type: 'line',
115. 
116. stack: '总Á¨¹量¢?',
117. 
118. data: \[ 220, 182, 191, 234, 290, 330, 310\]
119. 
120. \},
121. 
122. \{
123. 
124. name: '视º¨®频¦Ì广?告?',
125. 
126. type: 'line',
127. 
128. stack: '总Á¨¹量¢?',
129. 
130. data: \[ 150, 232, 201, 154, 190, 330, 410\]
131. 
132. \},
133. 
134. \{
135. 
136. name: '直¡À接¨®访¤?问¨º',
137. 
138. type: 'line',
139. 
140. stack: '总Á¨¹量¢?',
141. 
142. data: \[ 320, 332, 301, 334, 390, 330, 320\]
143. 
144. \},
145. 
146. \{
147. 
148. name: '搜?索¡Â引°y擎?',
149. 
150. type: 'line',
151. 
152. stack: '总Á¨¹量¢?',
153. 
154. data: \[ 820, 932, 901, 934, 1290, 1330, 1320\]
155. 
156. \}
157. 
158. \]
159. 
160. \};
161. 
162. 
163. 
164. myChart.setOption(option);
165. 
166. \}
167. 
168. );
169. 
170. </script>
171. 
172. 
173. 
174. 
175. 
176. <divid= "main1"style= "height:500px;border:1px solid \#ccc;padding:10px;"></div>
177. 
178. <scripttype= "text/javascript">
179. 
180. require.config(\{
181. 
182. paths: \{
183. 
184. echarts: './echarts/echarts',
185. 
186. 'echarts/chart/bar': './echarts/echarts',
187. 
188. 'echarts/chart/line': './echarts/echarts'
189. 
190. \}
191. 
192. \});
193. 
194. require(
195. 
196. \[ 
197. 
198.  'echarts',
199. 
200.  'echarts/chart/bar',
201. 
202.  'echarts/chart/line'
203. 
204. \],
205. 
206. function (ec) \{
207. 
208. varmyChart=ec.init(document.getElementById( 'main1'));
209. 
210. option= \{
211. 
212. title: \{
213. 
214. text: '未¡ä来¤¡ä一°?周¨¹气?温?变À?化¡¥',
215. 
216. subtext: '纯ä?属º?虚¨¦构1'
217. 
218. \},
219. 
220. tooltip: \{
221. 
222. trigger: 'axis'
223. 
224. \},
225. 
226. legend: \{
227. 
228. data: \[ '最Á?高?气?温?', '最Á?低Ì¨ª气?温?'\]
229. 
230. \},
231. 
232. toolbox: \{
233. 
234. show: true,
235. 
236. feature: \{
237. 
238. mark: true,
239. 
240. dataView: \{ readOnly: false \},
241. 
242. magicType: \[ 'line', 'bar'\],
243. 
244. restore: true,
245. 
246. saveAsImage: true
247. 
248. \}
249. 
250. \},
251. 
252. calculable: true,
253. 
254. xAxis: \[
255. 
256. \{
257. 
258. type: 'category',
259. 
260. boundaryGap: false,
261. 
262. data: \[ '周¨¹一°?', '周¨¹二t', '周¨¹三¨y', '周¨¹四?', '周¨¹五?', '周¨¹六¢¨´', '周¨¹日¨?'\]
263. 
264. \}
265. 
266. \],
267. 
268. yAxis: \[
269. 
270. \{
271. 
272. type: 'value',
273. 
274. axisLabel: \{
275. 
276. formatter: '\{value\} °?C'
277. 
278. \},
279. 
280. splitArea: \{ show: true \}
281. 
282. \}
283. 
284. \],
285. 
286. series: \[
287. 
288. \{
289. 
290. name: '最Á?高?气?温?',
291. 
292. type: 'line',
293. 
294. itemStyle: \{
295. 
296. normal: \{
297. 
298. lineStyle: \{
299. 
300. shadowColor: 'rgba(0,0,0,0.4)'
301. 
302. \}
303. 
304. \}
305. 
306. \},
307. 
308. data: \[ 11, 11, 15, 13, 12, 13, 10\]
309. 
310. \},
311. 
312. \{
313. 
314. name: '最Á?低Ì¨ª气?温?',
315. 
316. type: 'line',
317. 
318. itemStyle: \{
319. 
320. normal: \{
321. 
322. lineStyle: \{
323. 
324. shadowColor: 'rgba(0,0,0,0.4)'
325. 
326. \}
327. 
328. \}
329. 
330. \},
331. 
332. data: \[ \-2, 1, 2, 5, 3, 2, 0\]
333. 
334. \}
335. 
336. \]
337. 
338. \};
339. 
340. myChart.setOption(option);
341. 
342. \}
343. 
344. );
345. 
346. </script>
347. 
348. 
349. 
350. 
351. 
352. <divid= "main2"style= "height:500px;border:1px solid \#ccc;padding:10px;"></div>
353. 
354. <scripttype= "text/javascript">
355. 
356. require.config(\{
357. 
358. paths: \{
359. 
360. echarts: './echarts/echarts',
361. 
362. 'echarts/chart/bar': './echarts/echarts',
363. 
364. 'echarts/chart/line': './echarts/echarts'
365. 
366. \}
367. 
368. \});
369. 
370. require(
371. 
372. \[ 
373. 
374.  'echarts',
375. 
376.  'echarts/chart/bar',
377. 
378.  'echarts/chart/line'
379. 
380. \],
381. 
382. function (ec) \{
383. 
384. varmyChart=ec.init(document.getElementById( 'main2'));
385. 
386. option= \{
387. 
388. title: \{
389. 
390. text: '某3楼£¤盘¨¬销¨²售º?情¨¦况?',
391. 
392. subtext: '纯ä?属º?虚¨¦构1'
393. 
394. \},
395. 
396. tooltip: \{
397. 
398. trigger: 'axis'
399. 
400. \},
401. 
402. legend: \{
403. 
404. data: \[ '意°a向¨°', '预¡è购o', '成¨¦交?'\]
405. 
406. \},
407. 
408. toolbox: \{
409. 
410. show: true,
411. 
412. feature: \{
413. 
414. mark: true,
415. 
416. dataView: \{ readOnly: false \},
417. 
418. magicType: \[ 'line', 'bar'\],
419. 
420. restore: true,
421. 
422. saveAsImage: true
423. 
424. \}
425. 
426. \},
427. 
428. calculable: true,
429. 
430. xAxis: \[
431. 
432. \{
433. 
434. type: 'category',
435. 
436. boundaryGap: false,
437. 
438. data: \[ '周¨¹一°?', '周¨¹二t', '周¨¹三¨y', '周¨¹四?', '周¨¹五?', '周¨¹六¢¨´', '周¨¹日¨?'\]
439. 
440. \}
441. 
442. \],
443. 
444. yAxis: \[
445. 
446. \{
447. 
448. type: 'value'
449. 
450. \}
451. 
452. \],
453. 
454. series: \[
455. 
456. \{
457. 
458. name: '成¨¦交?',
459. 
460. type: 'line',
461. 
462. smooth: true,
463. 
464. itemStyle: \{ normal: \{ areaStyle: \{ type: 'default'\}\} \},
465. 
466. data: \[ 10, 12, 21, 54, 260, 830, 710\]
467. 
468. \},
469. 
470. \{
471. 
472. name: '预¡è购o',
473. 
474. type: 'line',
475. 
476. smooth: true,
477. 
478. itemStyle: \{ normal: \{ areaStyle: \{ type: 'default'\}\} \},
479. 
480. data: \[ 30, 182, 434, 791, 390, 30, 10\]
481. 
482. \},
483. 
484. \{
485. 
486. name: '意°a向¨°',
487. 
488. type: 'line',
489. 
490. smooth: true,
491. 
492. itemStyle: \{ normal: \{ areaStyle: \{ type: 'default'\}\} \},
493. 
494. data: \[ 1320, 1132, 601, 234, 120, 90, 20\]
495. 
496. \}
497. 
498. \]
499. 
500. \};
501. 
502. myChart.setOption(option);
503. 
504. \}
505. 
506. );
507. 
508. </script>

#### 3.2.4 完成以上操作之后效果图如下： ####

![16170233-48415094f4f14a49bb0f8d8b75ad3853.png][]

好了，今天就总结到这里了，希望能给大家带来一些帮助。这里主要是介绍地图控件的使用，因为其官方文档上关于路径的配置写的很不清楚，所以才会想把这些走的弯路给总结一下。对于其他的图表控件的使用都很简单，大家可以参考官方的文档。[http://echarts.baidu.com/doc/doc.html][http_echarts.baidu.com_doc_doc.html]

[http_echarts.baidu.com]: http://echarts.baidu.com/
[http_ecomfe.github.io_zrender_index.html]: http://ecomfe.github.io/zrender/index.html
[16165955-22874cebac484e23b650ee074316dc65.png]: /images/20220521/fd13af54f3144f028f60ef353788d385.png
[16170007-49da6cb8e67442b29f4a23f95e5afaae.png]: /images/20220521/56c0ab0710074014a32a7739bc9d4e9d.png
[16170026-dbba4f3577dc4f0f8176e9a0427d3e59.png]: /images/20220521/5fe5239e9e384702b923e6da533d84f1.png
[16170043-923302d7ee8547038fa675b6c8815265.png]: /images/20220521/8447f733bb554d25bc4d14fe77552fb9.png
[16170056-b847ebbd759247499076c0cdf1b8bf1c.png]: /images/20220521/b49c3087dbd84ce6968debcfe61b558b.png
[16170121-8493606dd21b4c9ebca6fce650213c9c.png]: /images/20220521/9eb89793856844ee8c04505e0ba64359.png
[16170233-48415094f4f14a49bb0f8d8b75ad3853.png]: /images/20220521/1cd5c43161854af785bde5e5c4f9f7e9.png
[http_echarts.baidu.com_doc_doc.html]: http://echarts.baidu.com/doc/doc.html