| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/esl.js"></script> |
| <script src="../common/config.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| <link rel="stylesheet" href="../common/simpleRadio.css"> |
| </head> |
| <body> |
| <style> |
| #main { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 0; |
| } |
| </style> |
| <div id="main"></div> |
| |
| <script> |
| |
| var chart; |
| var rawData; |
| |
| require([ |
| 'data/disk-tree.json', |
| // 'data/obama_budget_proposal_2012.json', |
| 'echarts', |
| 'common/dark' |
| ], function (d, echarts) { |
| // rawData = d.obama_budget_2012; |
| rawData = d.sort(function (a, b) { |
| return b.value - a.value; |
| }).slice(0, 9); |
| initEcharts(echarts); |
| }); |
| |
| function initEcharts(echarts) { |
| chart = echarts.init(document.getElementById('main'), 'dark'); |
| |
| function updateDepthAndHeight(node, depth) { |
| var height = 0; |
| node.depth = depth; |
| if (node.children) { |
| for (var i = 0; i < node.children.length; i++) { |
| var child = node.children[i]; |
| updateDepthAndHeight(child, depth + 1); |
| if (child.height > height) { |
| height = child.height; |
| } |
| } |
| // Remove too small value to avoid float error |
| node.children = node.children.sort(function (a, b) { |
| return b.value - a.value; |
| }).slice(0, 10); |
| var sum = node.children.reduce(function (sum, child) { |
| return sum + child.value; |
| }, 0); |
| if (sum < node.value) { |
| node.children.push({ |
| depth: node.depth + 1, |
| value: node.value - sum, |
| placeholder: true |
| }); |
| } |
| } |
| node.height = height + 1; |
| } |
| var root = { |
| children: rawData |
| }; |
| updateDepthAndHeight(root, -1); |
| |
| var colorList = ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870']; |
| |
| var series = []; |
| function traverse(node) { |
| if (node !== root) { |
| series[node.depth] = series[node.depth] || { |
| type: 'pie', |
| data: [], |
| hoverAnimation: false, |
| label: { |
| normal: { |
| show: false |
| }, |
| emphasis: { |
| show: false |
| } |
| }, |
| radius: [ |
| ((node.depth / (root.height - 1) * 80) || 10) + '%', |
| (node.depth + 1) / (root.height - 1) * 80 + '%' |
| ] |
| }; |
| var dataItem = { |
| name: node.name, |
| value: [node.value, node.depth] |
| }; |
| dataItem.itemStyle = { |
| normal: { |
| // opacity: node.placeholder ? 0 : 1, |
| opacity: (node.placeholder || (node.value < 4000)) ? 0 : 1, |
| color: node.color, |
| borderWidth: 1, |
| borderColor: '#333' |
| } |
| }; |
| series[node.depth].data.push(dataItem); |
| } |
| |
| if (node.depth < root.height - 1) { |
| node.children = node.children || [{ |
| depth: node.depth + 1, |
| // Placeholder value |
| placeholder: true, |
| value: node.value |
| }]; |
| node.children.forEach(function (child, idx) { |
| child.color = node.color || colorList[idx % colorList.length]; |
| traverse(child); |
| }); |
| } |
| } |
| traverse(root); |
| |
| chart.setOption({ |
| title: { |
| text: '磁盘空间旭日图', |
| left: 'center' |
| }, |
| visualMap: { |
| show: false, |
| min: 0, |
| max: 3, |
| inRange: { |
| colorLightness: [0.5, 0.8] |
| } |
| }, |
| tooltip: {}, |
| series: series, |
| animationEasing: 'linear' |
| }); |
| } |
| |
| </script> |
| </body> |
| </html> |
