| /* |
| title: Show Parent Labels |
| category: treemap |
| titleCN: 显示父层级标签 |
| */ |
| |
| myChart.showLoading(); |
| |
| $.get(ROOT_PATH + '/data/asset/data/disk.tree.json', function (diskData) { |
| myChart.hideLoading(); |
| |
| function colorMappingChange(value) { |
| var levelOption = getLevelOption(value); |
| chart.setOption({ |
| series: [{ |
| levels: levelOption |
| }] |
| }); |
| } |
| |
| var formatUtil = echarts.format; |
| |
| function getLevelOption() { |
| return [ |
| { |
| itemStyle: { |
| borderColor: '#777', |
| borderWidth: 0, |
| gapWidth: 1 |
| }, |
| upperLabel: { |
| show: false |
| } |
| }, |
| { |
| itemStyle: { |
| borderColor: '#555', |
| borderWidth: 5, |
| gapWidth: 1 |
| }, |
| emphasis: { |
| itemStyle: { |
| borderColor: '#ddd' |
| } |
| } |
| }, |
| { |
| colorSaturation: [0.35, 0.5], |
| itemStyle: { |
| borderWidth: 5, |
| gapWidth: 1, |
| borderColorSaturation: 0.6 |
| } |
| } |
| ]; |
| } |
| |
| myChart.setOption(option = { |
| |
| title: { |
| text: 'Disk Usage', |
| left: 'center' |
| }, |
| |
| tooltip: { |
| formatter: function (info) { |
| var value = info.value; |
| var treePathInfo = info.treePathInfo; |
| var treePath = []; |
| |
| for (var i = 1; i < treePathInfo.length; i++) { |
| treePath.push(treePathInfo[i].name); |
| } |
| |
| return [ |
| '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) + '</div>', |
| 'Disk Usage: ' + formatUtil.addCommas(value) + ' KB', |
| ].join(''); |
| } |
| }, |
| |
| series: [ |
| { |
| name: 'Disk Usage', |
| type: 'treemap', |
| visibleMin: 300, |
| label: { |
| show: true, |
| formatter: '{b}' |
| }, |
| upperLabel: { |
| show: true, |
| height: 30 |
| }, |
| itemStyle: { |
| borderColor: '#fff' |
| }, |
| levels: getLevelOption(), |
| data: diskData |
| } |
| ] |
| }); |
| }); |