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

一、实现效果

收缩效果:

c30021ba04480cafc449ec9f7e82e575.png

展开效果:

742597e5e1369b69a286753736eb55b0.png

二、实现代码

展开/收缩

切换

;

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.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,ECharts树状图可以通过点击节点来展开和折叠子节点。默认情况下,点击节点时会触发`click`事件,可以在事件处理函数中通过调用`setOption`方法实现动态更新图表数据的效果。具体实现方法如下: 1. 在ECharts的Option中设置`series`属性的`expandAndCollapse`为`true`,表示允许节点的展开和折叠。 2. 在`series`属性中设置`data`属性,用于初始化树状图的数据。 3. 在`series`属性中设置`label`属性,用于显示节点名称。 4. 在`series`属性中设置`itemStyle`属性,用于设置节点的样式。 5. 在ECharts的Option中设置`series`属性的`emphasis`为`{focus: 'descendant'}`,表示当鼠标悬停在节点上时,只高亮该节点的后代节点。 6. 在ECharts的Option中定义`click`事件处理函数,在函数中根据点击的节点来动态更新树状图的数据,然后调用`setOption`方法更新图表。 以下是一个基本的实现示例代码: ```javascript option = { series: { type: 'tree', expandAndCollapse: true, data: [{ name: '节点1', children: [{ name: '子节点1' }, { name: '子节点2' }] }, { name: '节点2', children: [{ name: '子节点3' }, { name: '子节点4' }] }], label: { show: true }, itemStyle: { color: '#ccc', borderType: 'solid', borderWidth: 1 }, emphasis: { focus: 'descendant' } } }; myChart.on('click', function (params) { // 根据点击的节点来动态更新树状图的数据 var newData = [{ name: '节点1', children: [{ name: '子节点1' }, { name: '子节点2' }] }, { name: '节点2', children: [{ name: '子节点3' }, { name: '子节点4' }] }]; myChart.setOption({ series: [{ data: newData }] }); }); ``` 在上面的示例代码中,我们通过设置`expandAndCollapse`为`true`来允许节点的展开和折叠,然后在`click`事件处理函数中根据点击的节点来动态更新树状图的数据。当我们点击某个节点时,就会触发`click`事件处理函数,然后调用`setOption`方法更新树状图的数据,从而实现了节点的展开和折叠功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值