Echarts（二）tree型图

2018年04月12日 15:30:09

阅读数：520

1、demo示例

http://echarts.baidu.com/examples/editor.html?c=tree-basic

2、事件响应和重绘事件

1. myChart.showLoading();
2. $.get( 'data/asset/data/flare.json', function (data) {
3. myChart.hideLoading();
5. echarts.util.each(data.children, function (datum, index) {
6. index % 2 === 0 && (datum.collapsed = true);
7. });
9. myChart.setOption(option = {
10. tooltip: {
11. trigger: 'item',
12. triggerOn: 'mousemove'
13. },
14. series: [
15. {
16. type: 'tree',
18. data: [data],
20. top: '1%',
21. left: '7%',
22. bottom: '1%',
23. right: '20%',
25. symbolSize: 7,
27. label: {
28. normal: {
29. position: 'left',
30. verticalAlign: 'middle',
31. align: 'right',
32. fontSize: 9
33. }
34. },
36. leaves: {
37. label: {
38. normal: {
39. position: 'right',
40. verticalAlign: 'middle',
41. align: 'left'
42. }
43. }
44. },
46. expandAndCollapse: true,
47. animationDuration: 550,
48. animationDurationUpdate: 750
49. }
50. ]
51. });
52. myChart.on('click', function(params){
53. console.log(params);
54. if(params.data.url){
55. windodw.open(params.data.url);
56. }
57. });
58. windodw.onresize = function(){
59. var t= setTimeout(function(){
60. myChart.resize();
61. });
62. };
63. });

3、json文件富文本

1. {
2. "name": "flare",
3. "children": [
4. {
5. "name": "{a|analytics}",
6. "label":{
7. "rich":{
8. "a":{
9. "color":"blue",
10. "fontSize":"16"
11. }
12. }
13. },
14. "lineStyle":{
15. "color":"red",
16. "width":"5"
17. },
18. "children": [
19. {
20. "name": "cluster",
21. "children": [
22. { "name": "AgglomerativeCluster", "value": 3938},
23. { "name": "CommunityStructure", "value": 3812},
24. { "name": "HierarchicalCluster", "value": 6714},
25. { "name": "MergeEdge", "value": 743}
26. ]
27. },
28. {
29. "name": "graph",
30. "children": [
31. { "name": "BetweennessCentrality", "value": 3534},
32. { "name": "LinkDistance", "value": 5731},
33. { "name": "MaxFlowMinCut", "value": 7840},
34. { "name": "ShortestPaths", "value": 5914},
35. { "name": "SpanningTree", "value": 3416}
36. ]
37. },
38. {
39. "name": "optimization",
40. "children": [
41. { "name": "AspectRatioBanker", "value": 7074}
42. ]
43. }
44. ]
45. },
46. {
47. "name": "animate",
48. "children": [
49. { "name": "Easing", "value": 17010},
50. { "name": "FunctionSequence", "value": 5842},
51. {
52. "name": "interpolate",
53. "children": [
54. { "name": "ArrayInterpolator", "value": 1983},
55. { "name": "ColorInterpolator", "value": 2047},
56. { "name": "DateInterpolator", "value": 1375},
57. { "name": "Interpolator", "value": 8746},
58. { "name": "MatrixInterpolator", "value": 2202},
59. { "name": "NumberInterpolator", "value": 1382},
60. { "name": "ObjectInterpolator", "value": 1629},
61. { "name": "PointInterpolator", "value": 1675},
62. { "name": "RectangleInterpolator", "value": 2042}
63. ]
64. },
65. { "name": "ISchedulable", "value": 1041},
66. { "name": "Parallel", "value": 5176},
67. { "name": "Pause", "value": 449},
68. { "name": "Scheduler", "value": 5593},
69. { "name": "Sequence", "value": 5534},
70. { "name": "Transition", "value": 9201},
71. { "name": "Transitioner", "value": 19975},
72. { "name": "TransitionEvent", "value": 1116},
73. { "name": "Tween", "value": 6006}
74. ]
75. },
76. {
77. "name": "data",
78. "children": [
79. {
80. "name": "converters",
81. "children": [
82. { "name": "Converters", "value": 721},
83. { "name": "DelimitedTextConverter", "value": 4294},
84. { "name": "GraphMLConverter", "value": 9800},
85. { "name": "IDataConverter", "value": 1314},
86. { "name": "JSONConverter", "value": 2220}
87. ]
88. },
89. { "name": "DataField", "value": 1759},
90. { "name": "DataSchema", "value": 2165},
91. { "name": "DataSet", "value": 586},
92. { "name": "DataSource", "value": 3331},
93. { "name": "DataTable", "value": 772},
94. { "name": "DataUtil", "value": 3322}
95. ]
96. },
97. {
98. "name": "display",
99. "children": [
100. { "name": "DirtySprite", "value": 8833},
101. { "name": "LineSprite", "value": 1732},
102. { "name": "RectSprite", "value": 3623},
103. { "name": "TextSprite", "value": 10066}
104. ]
105. },
106. {
107. "name": "flex",
108. "children": [
109. { "name": "FlareVis", "value": 4116}
110. ]
111. },
112. {
113. "name": "physics",
114. "children": [
115. { "name": "DragForce", "value": 1082},
116. { "name": "GravityForce", "value": 1336},
117. { "name": "IForce", "value": 319},
118. { "name": "NBodyForce", "value": 10498},
119. { "name": "Particle", "value": 2822},
120. { "name": "Simulation", "value": 9983},
121. { "name": "Spring", "value": 2213},
122. { "name": "SpringForce", "value": 1681}
123. ]
124. },
125. {
126. "name": "query",
127. "children": [
128. { "name": "AggregateExpression", "value": 1616},
129. { "name": "And", "value": 1027},
130. { "name": "Arithmetic", "value": 3891},
131. { "name": "Average", "value": 891},
132. { "name": "BinaryExpression", "value": 2893},
133. { "name": "Comparison", "value": 5103},
134. { "name": "CompositeExpression", "value": 3677},
135. { "name": "Count", "value": 781},
136. { "name": "DateUtil", "value": 4141},
137. { "name": "Distinct", "value": 933},
138. { "name": "Expression", "value": 5130},
139. { "name": "ExpressionIterator", "value": 3617},
140. { "name": "Fn", "value": 3240},
141. { "name": "If", "value": 2732},
142. { "name": "IsA", "value": 2039},
143. { "name": "Literal", "value": 1214},
144. { "name": "Match", "value": 3748},
145. { "name": "Maximum", "value": 843},
146. {
147. "name": "methods",
148. "children": [
149. { "name": "add", "value": 593},
150. { "name": "and", "value": 330},
151. { "name": "average", "value": 287},
152. { "name": "count", "value": 277},
153. { "name": "distinct", "value": 292},
154. { "name": "div", "value": 595},
155. { "name": "eq", "value": 594},
156. { "name": "fn", "value": 460},
157. { "name": "gt", "value": 603},
158. { "name": "gte", "value": 625},
159. { "name": "iff", "value": 748},
160. { "name": "isa", "value": 461},
161. { "name": "lt", "value": 597},
162. { "name": "lte", "value": 619},
163. { "name": "max", "value": 283},
164. { "name": "min", "value": 283},
165. { "name": "mod", "value": 591},
166. { "name": "mul", "value": 603},
167. { "name": "neq", "value": 599},
168. { "name": "not", "value": 386},
169. { "name": "or", "value": 323},
170. { "name": "orderby", "value": 307},
171. { "name": "range", "value": 772},
172. { "name": "select", "value": 296},
173. { "name": "stddev", "value": 363},
174. { "name": "sub", "value": 600},
175. { "name": "sum", "value": 280},
176. { "name": "update", "value": 307},
177. { "name": "variance", "value": 335},
178. { "name": "where", "value": 299},
179. { "name": "xor", "value": 354},
180. { "name": "-", "value": 264}
181. ]
182. },
183. { "name": "Minimum", "value": 843},
184. { "name": "Not", "value": 1554},
185. { "name": "Or", "value": 970},
186. { "name": "Query", "value": 13896},
187. { "name": "Range", "value": 1594},
188. { "name": "StringUtil", "value": 4130},
189. { "name": "Sum", "value": 791},
190. { "name": "Variable", "value": 1124},
191. { "name": "Variance", "value": 1876},
192. { "name": "Xor", "value": 1101}
193. ]
194. },
195. {
196. "name": "scale",
197. "children": [
198. { "name": "IScaleMap", "value": 2105},
199. { "name": "LinearScale", "value": 1316},
200. { "name": "LogScale", "value": 3151},
201. { "name": "OrdinalScale", "value": 3770},
202. { "name": "QuantileScale", "value": 2435},
203. { "name": "QuantitativeScale", "value": 4839},
204. { "name": "RootScale", "value": 1756},
205. { "name": "Scale", "value": 4268},
206. { "name": "ScaleType", "value": 1821},
207. { "name": "TimeScale", "value": 5833}
208. ]
209. },
210. {
211. "name": "util",
212. "children": [
213. { "name": "Arrays", "value": 8258},
214. { "name": "Colors", "value": 10001},
215. { "name": "Dates", "value": 8217},
216. { "name": "Displays", "value": 12555},
217. { "name": "Filter", "value": 2324},
218. { "name": "Geometry", "value": 10993},
219. {
220. "name": "heap",
221. "children": [
222. { "name": "FibonacciHeap", "value": 9354},
223. { "name": "HeapNode", "value": 1233}
224. ]
225. },
226. { "name": "IEvaluable", "value": 335},
227. { "name": "IPredicate", "value": 383},
228. { "name": "IValueProxy", "value": 874},
229. {
230. "name": "math",
231. "children": [
232. { "name": "DenseMatrix", "value": 3165},
233. { "name": "IMatrix", "value": 2815},
234. { "name": "SparseMatrix", "value": 3366}
235. ]
236. },
237. { "name": "Maths", "value": 17705},
238. { "name": "Orientation", "value": 1486},
239. {
240. "name": "palette",
241. "children": [
242. { "name": "ColorPalette", "value": 6367},
243. { "name": "Palette", "value": 1229},
244. { "name": "ShapePalette", "value": 2059},
245. { "name": "SizePalette", "value": 2291}
246. ]
247. },
248. { "name": "Property", "value": 5559},
249. { "name": "Shapes", "value": 19118},
250. { "name": "Sort", "value": 6887},
251. { "name": "Stats", "value": 6557},
252. { "name": "Strings", "value": 22026}
253. ]
254. },
255. {
256. "name": "vis",
257. "children": [
258. {
259. "name": "axis",
260. "children": [
261. { "name": "Axes", "value": 1302},
262. { "name": "Axis", "value": 24593},
263. { "name": "AxisGridLine", "value": 652},
264. { "name": "AxisLabel", "value": 636},
265. { "name": "CartesianAxes", "value": 6703}
266. ]
267. },
268. {
269. "name": "controls",
270. "children": [
271. { "name": "AnchorControl", "value": 2138},
272. { "name": "ClickControl", "value": 3824},
273. { "name": "Control", "value": 1353},
274. { "name": "ControlList", "value": 4665},
275. { "name": "DragControl", "value": 2649},
276. { "name": "ExpandControl", "value": 2832},
277. { "name": "HoverControl", "value": 4896},
278. { "name": "IControl", "value": 763},
279. { "name": "PanZoomControl", "value": 5222},
280. { "name": "SelectionControl", "value": 7862},
281. { "name": "TooltipControl", "value": 8435}
282. ]
283. },
284. {
285. "name": "data",
286. "children": [
287. { "name": "Data", "value": 20544},
288. { "name": "DataList", "value": 19788},
289. { "name": "DataSprite", "value": 10349},
290. { "name": "EdgeSprite", "value": 3301},
291. { "name": "NodeSprite", "value": 19382},
292. {
293. "name": "render",
294. "children": [
295. { "name": "ArrowType", "value": 698},
296. { "name": "EdgeRenderer", "value": 5569},
297. { "name": "IRenderer", "value": 353},
298. { "name": "ShapeRenderer", "value": 2247}
299. ]
300. },
301. { "name": "ScaleBinding", "value": 11275},
302. { "name": "Tree", "value": 7147},
303. { "name": "TreeBuilder", "value": 9930}
304. ]
305. },
306. {
307. "name": "events",
308. "children": [
309. { "name": "DataEvent", "value": 2313},
310. { "name": "SelectionEvent", "value": 1880},
311. { "name": "TooltipEvent", "value": 1701},
312. { "name": "VisualizationEvent", "value": 1117}
313. ]
314. },
315. {
316. "name": "legend",
317. "children": [
318. { "name": "Legend", "value": 20859},
319. { "name": "LegendItem", "value": 4614},
320. { "name": "LegendRange", "value": 10530}
321. ]
322. },
323. {
324. "name": "operator",
325. "children": [
326. {
327. "name": "distortion",
328. "children": [
329. { "name": "BifocalDistortion", "value": 4461},
330. { "name": "Distortion", "value": 6314},
331. { "name": "FisheyeDistortion", "value": 3444}
332. ]
333. },
334. {
335. "name": "encoder",
336. "children": [
337. { "name": "ColorEncoder", "value": 3179},
338. { "name": "Encoder", "value": 4060},
339. { "name": "PropertyEncoder", "value": 4138},
340. { "name": "ShapeEncoder", "value": 1690},
341. { "name": "SizeEncoder", "value": 1830}
342. ]
343. },
344. {
345. "name": "filter",
346. "children": [
347. { "name": "FisheyeTreeFilter", "value": 5219},
348. { "name": "GraphDistanceFilter", "value": 3165},
349. { "name": "VisibilityFilter", "value": 3509}
350. ]
351. },
352. { "name": "IOperator", "value": 1286},
353. {
354. "name": "label",
355. "children": [
356. { "name": "Labeler", "value": 9956},
357. { "name": "RadialLabeler", "value": 3899},
358. { "name": "StackedAreaLabeler", "value": 3202}
359. ]
360. },
361. {
362. "name": "layout",
363. "children": [
364. { "name": "AxisLayout", "value": 6725},
365. { "name": "BundledEdgeRouter", "value": 3727},
366. { "name": "CircleLayout", "value": 9317},
367. { "name": "CirclePackingLayout", "value": 12003},
368. { "name": "DendrogramLayout", "value": 4853},
369. { "name": "ForceDirectedLayout", "value": 8411},
370. { "name": "IcicleTreeLayout", "value": 4864},
371. { "name": "IndentedTreeLayout", "value": 3174},
372. { "name": "Layout", "value": 7881},
373. { "name": "NodeLinkTreeLayout", "value": 12870},
374. { "name": "PieLayout", "value": 2728},
375. { "name": "RadialTreeLayout", "value": 12348},
376. { "name": "RandomLayout", "value": 870},
377. { "name": "StackedAreaLayout", "value": 9121},
378. { "name": "TreeMapLayout", "value": 9191}
379. ]
380. },
381. { "name": "Operator", "value": 2490},
382. { "name": "OperatorList", "value": 5248},
383. { "name": "OperatorSequence", "value": 4190},
384. { "name": "OperatorSwitch", "value": 2581},
385. { "name": "SortOperator", "value": 2023}
386. ]
387. },
388. { "name": "Visualization", "value": 16540}
389. ]
390. }
391. ]
392. }