var data = {"name": "张三","children": [{"name": "李四","children": [{"name": "converters","children": [{"name": "Converters", "value": 721},{"name": "DelimitedTextConverter", "value": 4294}]},{"name": "DataUtil","value": 3322}]},{"name": "张三","children": [{"name": "DirtySprite", "value": 8833},{"name": "LineSprite", "value": 1732},{"name": "RectSprite", "value": 3623}]},{"name": "{{受众name}}","children": [{"name": "FlareVis", "value": 4116}]},{"name": "query","children": [{"name": "AggregateExpression", "value": 1616},{"name": "And", "value": 1027},{"name": "Arithmetic", "value": 3891},{"name": "Average", "value": 891},{"name": "BinaryExpression", "value": 2893},{"name": "Comparison", "value": 5103},{"name": "CompositeExpression", "value": 3677},{"name": "Count", "value": 781},{"name": "DateUtil", "value": 4141},{"name": "Distinct", "value": 933},{"name": "Expression", "value": 5130},{"name": "ExpressionIterator", "value": 3617},{"name": "Fn", "value": 3240},{"name": "If", "value": 2732},{"name": "IsA", "value": 2039},{"name": "Literal", "value": 1214},{"name": "Match", "value": 3748},{"name": "Maximum", "value": 843},{"name": "methods","children": [{"name": "add", "value": 593},{"name": "and", "value": 330},{"name": "average", "value": 287},{"name": "count", "value": 277},{"name": "distinct", "value": 292},{"name": "div", "value": 595},{"name": "eq", "value": 594},{"name": "fn", "value": 460},{"name": "gt", "value": 603},{"name": "gte", "value": 625},{"name": "iff", "value": 748},{"name": "isa", "value": 461},{"name": "lt", "value": 597},{"name": "lte", "value": 619},{"name": "max", "value": 283},{"name": "min", "value": 283},{"name": "mod", "value": 591},{"name": "mul", "value": 603},{"name": "neq", "value": 599},{"name": "not", "value": 386},{"name": "or", "value": 323},{"name": "orderby", "value": 307},{"name": "range", "value": 772},{"name": "select", "value": 296},{"name": "stddev", "value": 363},{"name": "sub", "value": 600},{"name": "sum", "value": 280},{"name": "update", "value": 307},{"name": "variance", "value": 335},{"name": "where", "value": 299},{"name": "xor", "value": 354},{"name": "x_x", "value": 264},{"name": "add", "value": 593},{"name": "and", "value": 330},{"name": "average", "value": 287},{"name": "count", "value": 277},{"name": "distinct", "value": 292},{"name": "div", "value": 595},{"name": "eq", "value": 594},{"name": "fn", "value": 460},{"name": "gt", "value": 603},{"name": "gte", "value": 625},{"name": "iff", "value": 748},{"name": "isa", "value": 461},{"name": "lt", "value": 597},{"name": "lte", "value": 619},{"name": "max", "value": 283},{"name": "min", "value": 283},{"name": "mod", "value": 591},{"name": "mul", "value": 603},{"name": "neq", "value": 599},{"name": "not", "value": 386},{"name": "or", "value": 323},{"name": "orderby", "value": 307},{"name": "range", "value": 772},{"name": "select", "value": 296},{"name": "stddev", "value": 363},{"name": "sub", "value": 600},{"name": "sum", "value": 280},{"name": "update", "value": 307},{"name": "variance", "value": 335},{"name": "where", "value": 299},{"name": "xor", "value": 354},{"name": "x_x", "value": 264},{"name": "add", "value": 593},{"name": "and", "value": 330},{"name": "average", "value": 287},{"name": "count", "value": 277},{"name": "distinct", "value": 292},{"name": "div", "value": 595},{"name": "eq", "value": 594},{"name": "fn", "value": 460},{"name": "gt", "value": 603},{"name": "gte", "value": 625},{"name": "iff", "value": 748},{"name": "isa", "value": 461},{"name": "lt", "value": 597},{"name": "lte", "value": 619},{"name": "max", "value": 283},{"name": "min", "value": 283},{"name": "mod", "value": 591},{"name": "mul", "value": 603},{"name": "neq", "value": 599},{"name": "not", "value": 386},{"name": "or", "value": 323},{"name": "orderby", "value": 307},{"name": "range", "value": 772},{"name": "select", "value": 296},{"name": "stddev", "value": 363},{"name": "sub", "value": 600},{"name": "sum", "value": 280},{"name": "update", "value": 307},{"name": "variance", "value": 335},{"name": "where", "value": 299},{"name": "xor", "value": 354},{"name": "x_x", "value": 264}]},{"name": "Minimum", "value": 843},{"name": "Not", "value": 1554},{"name": "Or", "value": 970},{"name": "Query", "value": 13896},{"name": "Range", "value": 1594},{"name": "StringUtil", "value": 4130},{"name": "Sum", "value": 791},{"name": "Variable", "value": 1124},{"name": "Variance", "value": 1876},{"name": "Xor", "value": 1101}]},{"name": "scale","children": [{"name": "IScaleMap", "value": 2105},{"name": "LinearScale", "value": 1316},{"name": "LogScale", "value": 3151},{"name": "OrdinalScale", "value": 3770},{"name": "QuantileScale", "value": 2435},{"name": "QuantitativeScale", "value": 4839},{"name": "RootScale", "value": 1756},{"name": "Scale", "value": 4268},{"name": "ScaleType", "value": 1821},{"name": "TimeScale", "value": 5833}]}]};option = {// backgroundColor:'#fff',tooltip: {trigger: 'item',triggerOn: 'mousemove'},series:[{type: 'tree',id: 0,name: 'tree1',data: [data],top: 32,left: 64,bottom: 32,right: 160,// roam: 'move',symbolSize: 7,// edgeShape: 'polyline',orient: 'LR',//'LR', 'RL', 'TB', 'BT'// layout: 'radial', //'orthogonal', 'radial'edgeForkPosition: '63%',expandAndCollapse: true,initialTreeDepth: 1,lineStyle: {width: 2},label: {// backgroundColor: '#fff',position: 'left',verticalAlign: 'middle',align: 'right'},leaves: {label: {position: 'right',verticalAlign: 'middle',align: 'left'}},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750}]};// 获得深度映射function getDepthMap(arr) {let startIndex = 0;function getDepthMapInner(data, deptMap, level) {if (!data) return;deptMap = deptMap||{};level = level||1;for(let item of data) {deptMap[++startIndex] = level;item.id = startIndex;getDepthMapInner(item.children, deptMap, level+1);}return deptMap;}return getDepthMapInner(arr);}// 拉平数据function flatten (data) {return data.reduce((arr, {name, value, children = []}) =>arr.concat([{name, value}], flatten(children)), [])}// 根据echarts显示树状结构，计算各层级的数量function maxDept(nodeArr, deptMap) {let deptArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];for(let i = 1; i<nodeArr.length; i++) {if(nodeArr[i]) {deptArr[deptMap[i]]++;}}return Math.max(...deptArr);}let deptMap = getDepthMap([data]);let dataArr = flatten([data]);//myChart.resize({width:1112})// myChart.on('onmousewheel', e=>{alert(e)});// function eConsole(param) {// alert('Zoom: ' + param);// }/*** 解决JS数字精度问题**/function eqs (n1, n2) {return Math.abs(n1 - n2) < Number.EPSILON}myChart.getZr().on('click', function(param){console.log(param);let els = myChart._chartsViews[0]._data._graphicEls;if (!param.target) { return; }let shape = param.target.shape;let p1 = [-1, -1], p2 = [-1, -1];if (shape.hasOwnProperty('childPoints')) { // 折线p1 = shape.parentPoint;} else if (shape.hasOwnProperty('x1')) { // 曲线p1 = [shape.x1, shape.y1];p2 = [shape.x2, shape.y2];}for(let i in els) {let el = els[i];if (eqs(el.position[0], p1[0]) && eqs(el.position[1], p1[1])) {console.log('初始节点'+JSON.stringify(dataArr[i-1]));}if (eqs(el.position[0], p2[0]) && eqs(el.position[1], p2[1])) {console.log('终止节点'+JSON.stringify(dataArr[i-1]));}}// console.log(els);})myChart.on('click', function(param){console.log(myChart._chartsViews[0]._data._rawData._data);console.log(param);let pt = myChart._chartsViews[0]._data._graphicEls[param.dataIndex];console.log(pt);opt = {series:{center: pt}}// myChart.setOption(opt);// console.log(myChart._chartsViews[0]._data._graphicEls);let dept = maxDept(myChart._chartsViews[0]._data._graphicEls, deptMap);let calcHeight = 25*dept;// console.log('Max Depth: ' + dept);myChart.resize({width:1112, height:calcHeight<800?800:calcHeight})})// myChart.getZr().on('mousewheel', function (e) {// console.log(myChart._chartsViews[0]._data._graphicEls);// let dept = maxDept(myChart._chartsViews[0]._data._graphicEls, deptMap);// let calcHeight = 25*dept;// console.log('Max Depth: ' + dept);// myChart.resize({width:1112, height:calcHeight<800?800:calcHeight})// })// myChart.showLoading();// setTimeout(function() {myChart.hideLoading();}, 3000);
若有收获，就点个赞吧
0 人点赞
