echarts 4.2 入门教程(7-树图)

 时间:2024-11-25 18:04:38

1、新建如下结构的测试文件 Echarts -- 07_tree -- Content -- echarts.min.js -- jquery-1.11.3.min.js -- EchartsTree.html

echarts 4.2 入门教程(7-树图)echarts 4.2 入门教程(7-树图)

2、在测试页面中,添加基础树图的代码 1)树图默认从左到右展示,最左边是最顶级节点 2)设置series.expandAndCollapse = false 可以在展示的时候,展开所有叶子节点 3)设置series.expandAndCollapse = true 可以在展示的时候,折叠隐藏相对底层的子节点 4)通过children节点包含其孩子节点

echarts 4.2 入门教程(7-树图)

3、基础树图运行效果如下

echarts 4.2 入门教程(7-树图)

4、从上到下展示的树图,代码如下 1)series.orient = 'LR':水平 从 左 到 右 展示树 2)series.orient = 'RL':水平 从 右 到 左 展示树 3)series.orient = 'TB':垂直 从 上 到 下 展示树 4)series.orient = 'BT':垂直 从 下 到 上 展示树 5)以前版本的 series.orient = 'horizontal',相当于‘LR’ 6)以前版本的 series.orient = 'vertical',相当于‘TB’ 7)树形垂直展示后,相关叶子节点名字最好转向,否则,名字长了,可能会重叠

echarts 4.2 入门教程(7-树图)

5、从上到下展示的树图,运行效果如下

echarts 4.2 入门教程(7-树图)

6、动态获取数据,绘制树图,代码如下 1)从后台获取到的数据,赋值给option变量对应的属性,再重新绘制图形即可 2)此处仅演示改变节点之间的连线,不改变位置

echarts 4.2 入门教程(7-树图)echarts 4.2 入门教程(7-树图)

7、动态获取数据,绘制树图,运行效果如下

echarts 4.2 入门教程(7-树图)echarts 4.2 入门教程(7-树图)
  • 全国重名人数如何查询?
  • 男女朋友之间如何让感情更进一步
  • 教你如何保养LV手包
  • 过氧化钠和二氧化碳反应
  • 栉风沐雨是什么意思
  • 热门搜索
    失眠是什么原因引起的 额头皱纹怎么办 如何将照片变小 夏天如何减肥 现在股市行情怎么样 卡介苗化脓后如何处理 发动机进水怎么办 如何加密文件 如何使用卷发棒 怎么在网页下载视频