echarts树状图点击展开子节点_Echarts树形图展开和收缩

一、实现效果

收缩效果：

展开效果:

二、实现代码

展开/收缩

切换

;

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

var app = {};

option = null;

myChart.showLoading();

$.get("{% url 'project_chart_json' %}" + "?pro_id={{ pro_id }}" , function (data) {

myChart.hideLoading();

echarts.util.each(data.children, function (datum, index) {

datum.collapsed = false;

});

myChart.setOption(option = {

tooltip: {

trigger: 'item',

triggerOn: 'mousemove'

series: [

{

type: 'tree',

data: [data],

top: '1%',

left: '7%',

bottom: '1%',

right: '20%',

symbolSize: 9,

label: {

position: 'left',

verticalAlign: 'middle',

align: 'right',

fontSize: 12

leaves: {

label: {

position: 'right',

verticalAlign: 'middle',

align: 'left'

}

initialTreeDepth: -1,

expandAndCollapse: true,

animationDuration: 550,

animationDurationUpdate: 600

}

]

});

});;

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

$('#btn_change').click(function(){

var op = myChart.getOption();

if(op.series[0].initialTreeDepth >= 0){

op.series[0].initialTreeDepth = -1

}else{

op.series[0].initialTreeDepth = 1

}

if (op && typeof op === "object") {

myChart.setOption(op, true);

}

});

echarts树状图点击展开子节点_Echarts树形图展开和收缩相关推荐

echarts树状图点击展开子节点_CPU眼里的结构设备树节点及属性详解
1 设备树(device tree)简介DTSpec定义一个devicetree的约束来描述硬件设备,boot引导程序将设备树传递给用户程序的内存空间中,并传递给用户相应设备树的指针.设备树为一个树形 ...
java 树状数据，递归从子节点找父节点
前言:递归算法在项目中也会使用到,简单介绍一下在项目中使用到的场景递归方法实现三个要素: 1.明确递归终止条件: 2.给出递归终止时的处理办法: 3.提取重复的逻辑,缩小问题的规模. 场景一:根据树 ...
elementui tree获取父节点_elementUI 树状图点击子节点获取父节点
权限使用elementUI tree 组件,点击子节点获取对应多级的父节点这是应用的组件 :data="hovePermissData" :default-checked- ke ...
echarts树状图怎么设置主节点和子节点的距离_教你秒懂CAD出图比例正确设置技巧...
1.你知道你用CAD画出的图打印出来会是多大吗? 2.你知道你图中标注文字打印出来字高是多少mm吗? 3.你能确定你画的1:100的图打印出来比例确实是1:100吗? 这个问题乍一看似乎简单,研究起来 ...
画出计算机系统构成的树状图,如何绘制树状层次结构的树状思维导图？
树状图,(又为树形图)因其外观像倒过来的树的样子,所以命名树状图.树形图是数据树的图形表示形式,以父子层次结构来组织对象.是枚举法的一种表达方式.初中学生学习概率时通常会要画的树状图.学会分析一件事物 ...
一款很好用的JQuery dtree树状图插件（一）
一款很好用的JQuery dtree树状图插件树状图 -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js ...
echarts 堆叠树状图排序
echarts 堆叠树状图.没有相关的配置API,要自己先把数据排好,再传到数据配置中... 未排序: 它的配置项: option = {tooltip: {trigger: 'axis',axisP ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
echart关系树状图_Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...

echarts树状图点击展开子节点_Echarts树形图展开和收缩

echarts树状图点击展开子节点_Echarts树形图展开和收缩相关推荐

最新文章

热门文章