Index: arms/js/analysisResource.js
===================================================================
diff -u -reda746afe4b804d938e8b284df26754675cd18c1 -r4228284d6b408b686ef2971ffefe656b6d027bfc
--- arms/js/analysisResource.js (.../analysisResource.js) (revision eda746afe4b804d938e8b284df26754675cd18c1)
+++ arms/js/analysisResource.js (.../analysisResource.js) (revision 4228284d6b408b686ef2971ffefe656b6d027bfc)
@@ -983,102 +983,93 @@
200: function (data) {
let chartDom = document.getElementById('chart-manpower-requirement');
let myChart = echarts.init(chartDom);
-
let option;
-
- function getLevelOption() {
- return [
- {
- itemStyle: {
- borderColor: '#777',
- borderWidth: 0,
- gapWidth: 1
+ myChart.setOption(
+ (option = {
+ title: {
+ text: '',
+ subtext: '',
+ left: 'leafDepth'
},
- upperLabel: {
- show: false
- }
- },
- {
- itemStyle: {
- borderColor: '#555',
- borderWidth: 5,
- gapWidth: 1
+ 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 [
+ '' +
+ echarts.format.encodeHTML(treePath.join('/')) +
+ '
',
+ '관여한 횟수: ' + echarts.format.addCommas(value)
+ ].join('');
+ }
},
- emphasis: {
- itemStyle: {
- borderColor: '#ddd'
+ series: [
+ {
+ name: 'ROOT',
+ type: 'treemap',
+ visibleMin: 300,
+ width: '100%',
+ height: '90%', // breadcrumb를 사용하지 않을 경우, width, height 모두 100%를 주면 됩니다.
+ breadcrumb: {
+ show: true,
+ itemStyle: {
+ color: 'grey'
+ }
+ },
+ label: {
+ show: true,
+ formatter: '{b}',
+ color: 'white',
+ borderWidth: 0,
+ },
+ upperLabel: {
+ show: true,
+ height: 30,
+ color: 'white',
+ borderWidth: 0,
+ },
+ itemStyle: {
+ borderColor: '#fff',
+ },
+ data: data,
+ leafDepth: 1,
+ levels:
+ [
+ {
+ itemStyle: {
+ borderColor: '#555',
+ borderWidth: 4,
+ gapWidth: 4
+ }
+ },
+ {
+ colorSaturation: [0.3, 0.6],
+ itemStyle: {
+ borderColorSaturation: 0.7,
+ gapWidth: 2,
+ borderWidth: 2
+ }
+ },
+ {
+ colorSaturation: [0.3, 0.5],
+ itemStyle: {
+ borderColorSaturation: 0.6,
+ gapWidth: 1
+ }
+ },
+ {
+ colorSaturation: [0.3, 0.5]
+ }
+ ],
}
- }
- },
- {
- colorSaturation: [0.35, 0.5],
- itemStyle: {
- borderWidth: 5,
- gapWidth: 1,
- borderColorSaturation: 0.6
- }
- }
- ];
- }
+ ]
+ })
+ );
- myChart.setOption(
- ({
- title: {
- text: '',
- left: 'center',
- textStyle: {
- color: '#ffffff'
- }
- },
- 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 [
- '' +
- echarts.format.encodeHTML(treePath.join('/')) +
- '
',
- '관여한 횟수: ' + echarts.format.addCommas(value)
- ].join('');
- }
- },
- series: [
- {
- name: "ROOT",
- type: 'treemap',
- width: '100%',
- height: '90%', // breadcrumb를 사용하지 않을 경우, width, height 모두 100%를 주면 됩니다.
- breadcrumb: {
- show: true,
- itemStyle: {
- color: 'grey'
- }
- },
- label: {
- show: true,
- formatter: '{b}',
- color: 'white',
- borderWidth: 0,
- },
- upperLabel: {
- show: true,
- height: 30,
- color: 'white',
- borderWidth: 0,
- },
- itemStyle: {
- borderColor: '#fff',
- },
- levels: getLevelOption(),
- data: data
- }
- ]
- })
- );
option && myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
Index: arms/js/dashboard.js
===================================================================
diff -u -r2afbd9708e49ab00bb637eb67fe9b57e67e70ca5 -r4228284d6b408b686ef2971ffefe656b6d027bfc
--- arms/js/dashboard.js (.../dashboard.js) (revision 2afbd9708e49ab00bb637eb67fe9b57e67e70ca5)
+++ arms/js/dashboard.js (.../dashboard.js) (revision 4228284d6b408b686ef2971ffefe656b6d027bfc)
@@ -681,57 +681,14 @@
statusCode: {
200: function (data) {
let chartDom = document.getElementById('chart-manpower-requirement');
-
let myChart = echarts.init(chartDom);
-
let option;
-
- myChart.showLoading();
- myChart.hideLoading();
-
- 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: '',
- left: 'center',
- textStyle: {
- color: '#ffffff'
- }
+ subtext: '',
+ left: 'leafDepth'
},
tooltip: {
formatter: function (info) {
@@ -751,8 +708,9 @@
},
series: [
{
- name: "ROOT",
+ name: 'ROOT',
type: 'treemap',
+ visibleMin: 300,
width: '100%',
height: '85%', // breadcrumb를 사용하지 않을 경우, width, height 모두 100%를 주면 됩니다.
breadcrumb: {
@@ -776,16 +734,46 @@
itemStyle: {
borderColor: '#fff',
},
- levels: getLevelOption(),
- data: data.slice(0, 3) // 담당 이슈 개수 기준 Top 3
+ data: data,
+ leafDepth: 1,
+ levels:
+ [
+ {
+ itemStyle: {
+ borderColor: '#555',
+ borderWidth: 4,
+ gapWidth: 4
+ }
+ },
+ {
+ colorSaturation: [0.3, 0.6],
+ itemStyle: {
+ borderColorSaturation: 0.7,
+ gapWidth: 2,
+ borderWidth: 2
+ }
+ },
+ {
+ colorSaturation: [0.3, 0.5],
+ itemStyle: {
+ borderColorSaturation: 0.6,
+ gapWidth: 1
+ }
+ },
+ {
+ colorSaturation: [0.3, 0.5]
+ }
+ ],
}
]
})
);
+
option && myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
+
}
}
});