Echarts（二）tree型图

最新推荐文章于 2023-09-18 11:15:13 发布
转载 最新推荐文章于 2023-09-18 11:15:13 发布 · 1.6k 阅读 · 1

本文介绍如何使用ECharts实现树状图的配置与交互功能，包括加载数据、设置样式及响应点击事件等。通过示例展示了如何定义富文本标签及线样式，并提供了动态加载数据的方法。


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. }


echarts树图关系图
m0_49017085的博客
07-21 707
echarts实现树图关系图
echarts 各个配置项详细说明总结
jgujgu的博客
04-24 528
实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script&g
echarts，tree 图，节点收缩，option 配置即可
01-10
echarts tree目前只能用initialTreeDepth来控制显示的层数，不能逐个控制每个节点的收缩放开状态，很不方便。因此我在配置项里面增加了一个字段mcHereShow（命名觉得不美观，可以全部替换成你要修改的字段），在配置项里面与"name"同级的位置，配置上mcHereShow：true 或者false即可逐个控制该节点的展开和收缩，子节点也是同样层级的配置，如：var data ={ "name": "核心交换机", "children": childrenData， 'symbolSize': 47, 'mcHereShow':true } series: [ { type: 'tree', data: [data], ...... }
echarts Tree
weixin_33937913的博客
09-18 215
var data ={ "name": "flare", { "name": "flex", }, { "name": "scale", }, { "name": "display", } ] };...
echarts-tree：树图(带查询条件的导航图)
WZY_snail的博客
07-15 6881
echarts官网： http://echarts.apache.org/zh/index.html 树图网址： https://echarts.apache.org/examples/zh/index.html#chart-type-tree echarts图例参数介绍网址: https://echarts.apache.org/zh/option.html#series-tree 使用echarts配置图需要下载echarts.js包，用到什么图就下载什么的echarts.js就..
echarts树形思维导图
10-09
echarts树形实例，使用echarts2.x版本（高版本将树形实例已移除），内容包括html，和echarts.js文件
ECharts tree图
u014596551的博客
10-23 2140
在上一篇ECharts入门后，主要想用ECharts做tree图，但是看了好多都无法实现从本地读取json文件来实现的，涉及到ajax跨域问题，一直以为问题无法解决，看了别人做的demo也解决不了遇到的问题。 现在把解决后的结果贴上来 首先保证json文件是正确的，以官方例子为准flare.json 标签主要为name  children  在遇到无法解析时，先查看json格式，保证json...
echarts和tree.js
最新发布
03-28
- **ECharts**: 主要专注于提供丰富的交互式图表类型（如折线图、柱状图、饼图等），适合处理结构化的表格型数据并将其转化为直观的视觉形式。 - **Three.js**: 提供了一个强大的 API 来构建复杂的 3D 场景，支持...
用Echarts画思维导图
03-23
ECharts中的Tree图用于展示层次结构的数据，非常适合构建思维导图。它提供了多种布局方式，如"radial"（环形）、"tidal"（潮汐）以及默认的"orthogonal"（直角）布局，可以根据需求选择合适的布局模式来展示思维...
vue echarts 柱状椭圆图
tendernessxy的博客
04-13 938
echarts 柱状椭圆图
echarts tree 点击节点收缩(关闭子节点)功能实现
08-18
实现echarts中的树形tree图的节点收缩功能,子节点最多支持扩展9个,通过value作为层级的标识.能够完美实现子节点的缩放功能.
eCharts Tree双向布局
06-14
eCharts tree单向布局方式，通过改造，调整为双向布局方式！
echarts-----树状图(基础参数)
m0_46698214的博客
12-15 2万+
echarts-----树状图 首先echarts官网树状图示例展示展示 代码在官网示例图上都有，可以自行查阅，但该示例有个问题在于树状图的生成线都是弧线，而我们大部分需求都是折线 展示折线树状图，效果如下： 看了官网API参数控制，加上自己试验发现控制折线的参数是edgeShape 贴一下代码块： var data = { "name": "flare", "children": [ { "name": "data",
echarts tree树形结构图
weixin_43294560的博客
08-05 7035
具有唯一的根节点 1、配置data data:[ { name: "flare", 根节点名称 label: { 此节点特殊的 label 配置（如果需要的话）。 ... }, itemStyle: {}, value: 4116, value 值,只在tooltip中显示 collapsed: null, 如果为true,表示此节点默认折叠。
echarts中的树形结构图（参数分析）
热门推荐
van的博客
05-10 10万+
先上echarts官网示例图，可以点开链接查看，这里先上一张截图，以及官网代码 官网代码： myChart.showLoading(); //显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id')); $.get('data/asset/data/flare.json', funct...
echarts树图控件分析
weixin_34010949的博客
10-17 975
1.所需数据结构： 一组以父元素name和子元素children为属性的json对象画出，子元素又是以若干个父元素name和子元素children为属性的对象 构成的对象数组，因此有多少树枝，就会对应的有多少层子元素，如图所示： 数据中value指值的大小，不在节点大小上体现，但鼠标悬浮在相应的节点上即可查看，如图所示： 2.图的基本设置，如图 参考案例 www.echartsjs.com/...
echarts实现树图-tree
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
09-18 4458
echarts实现图谱树
JS实现Echarts的树Tree效果
wylsde_zjy的博客
05-11 1万+
先看一下做的效果:1.新建一个Jsp/Html页面，页面用div元素，定义大小，这个div用来展示这棵树。    页面引入echarts.min.js和echarts.js  （下载新的比较好，旧的可能没有这个树）,另外新建一个treeEcharts.js来实现这棵树。&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
Echarts(二):图实例2（tree）
NI3E
06-08 2835
Echarts学习笔记，tree画法以及错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值