树图中设置了roam=true。我现在想要监听树图缩放，该如何做echarts tree配置项内容和展示
树图中设置了roam=true。我现在想要监听树图缩放事件，目前使用的datazoom，如下：that.myChart.on('datazoom', function (params) { console.log(params) })但是无效，所以想问问该怎么监听。 或者要怎样才能做到设置了symbolSize，在缩放时不会重叠（目前使用的版本2，设置过nodePadding也是无效）
配置项如下
var data = [{
"children": [{
"name": "aaa",
"id": 10838,
"count": 0,
"level": 2,
"desc": "11",
"companyCode": 1000000000,
"createTime": "2018-10-23"
}, {
"children": [{
"name": "Java开发",
"id": 10628,
"count": 5,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "研发中心",
"id": 10627,
"count": 9,
"level": 2,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}, {
"children": [{
"name": "UI设计",
"id": 10629,
"count": 1,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "产品部",
"id": 10626,
"count": 3,
"level": 2,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}, {
"children": [{
"name": "商务一部",
"id": 10573,
"count": 1,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-20"
}],
"name": "商务部",
"id": 10443,
"count": 1,
"level": 2,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-11"
}, {
"children": [{
"name": "后勤组",
"id": 10622,
"count": 0,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}, {
"children": [{
"name": "招聘2组",
"id": 10631,
"count": 0,
"level": 4,
"desc": "1111@#$$%",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}, {
"name": "招聘一组",
"id": 10630,
"count": 0,
"level": 4,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "招聘组",
"id": 10621,
"count": 0,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "行政部",
"id": 10407,
"count": 0,
"level": 2,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-08"
}, {
"children": [{
"name": "客服部",
"id": 10625,
"count": 0,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}, {
"children": [{
"children": [{
"name": "B组",
"id": 10633,
"count": 0,
"level": 5,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "A组",
"id": 10632,
"count": 0,
"level": 4,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "运营二部",
"id": 10624,
"count": 0,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}, {
"name": "运营一部",
"id": 10623,
"count": 2,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-27"
}],
"name": "运营部",
"id": 10398,
"count": 6,
"level": 2,
"desc": "运营中心啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈她她她她她她她她她她她她她她她她她她她斤",
"companyCode": 1000000000,
"createTime": "2018-06-07"
}, {
"name": "测试部",
"id": 10392,
"count": 5,
"level": 2,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-07"
}, {
"children": [{
"name": "11",
"id": 11001,
"count": 0,
"level": 3,
"desc": "11",
"companyCode": 1000000000,
"createTime": "2019-11-13"
}, {
"children": [{
"children": [{
"name": "销售B",
"id": 10572,
"count": 13,
"level": 5,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-20"
}],
"name": "销售A",
"id": 10571,
"count": 14,
"level": 4,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-20"
}],
"name": "销售一组",
"id": 10570,
"count": 16,
"level": 3,
"desc": "",
"companyCode": 1000000000,
"createTime": "2018-06-20"
}],
"name": "销售部",
"id": 10257,
"count": 23,
"level": 2,
"desc": "销售部",
"companyCode": 1000000000,
"createTime": "2018-06-07"
}],
"name": "test公司",
"id": 1,
"count": 60,
"level": 1,
"companyCode": 1000000000,
"createTime": "2018-05-26"
}]
option = {
calculable: false,
tooltip: {
trigger: 'item',
triggerOn: 'click',
position: 'inside',
renderMode: 'html',
// appendToBody: true,
formatter: function (params) {
that.echartNowClickData = params.data
let html = '<div style="width:190px;height:90px;display:flex;justify-content: space-between; flex-direction: column;align-items:flex-end">' +
'<span style="pointer-events: all;display:block;width:29px;height:29px;border-radius: 50%;background: #1AA094;text-align:center;font-size: 18px;padding-top: 5px;" class="el-icon-plus"></span>' +
'<sapn style="pointer-events: all;display:block;width:29px;height:29px;border-radius: 50%;background: #1AA094;text-align:center;font-size: 18px;padding-top: 5px;" class="el-icon-edit-outline"></sapn>' +
'<sapn style="pointer-events: all;display:block;width:29px;height:29px;border-radius: 50%;background: #1AA094;text-align:center;font-size: 18px;padding-top: 5px;" class="el-icon-delete"></sapn>' +
'</div>'
return html
// return '<div style="width:190px;height:90px">111</div>'
}
},
toolbox: {
show: true,
feature: {
dataZoom: {
show: true
}
}
},
series: [
{
name: '树图',
type: 'tree',
orient: 'TB', // vertical horizontal
rootLocation: { x: '50%', y: '15%' }, // 根节点位置 {x: 'center',y: 10}
nodePadding: 20,
layerPadding: 40,
// symbol: 'rectangle',
borderColor: 'black',
symbolSize: [200, 100],
symbol: 'rect',
symbolKeepAspect: true,
edgeShape: 'polyline',
roam: true,
initialTreeDepth: -1,
left: '-50%',
width: 3500,
expandAndCollapse: false,
itemStyle: {
normal: {
color: '#eeeeee', // 节点背景色
'borderWidth': 1,
'borderColor': '#b2d8d4',
label: {
show: true,
position: 'inside',
lineHeight: 30,
textStyle: {
color: '#696969',
fontSize: 14
// fontWeight: 'bolder'
},
formatter: function (params) {
return params.data.name + '\n拥有人数' + params.data.count + '人\n' + params.data.createTime
}
},
lineStyle: {
color: '#7fcac3',
width: 1
// type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
label: {
show: false
}
}
},
data: data
}
]
};
截图如下
