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 = '

' + '' + '' + '' + '

' return html // return '

111

' } }, 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 } ] };

Echarts在线免费图表