renderLoad2(el: ElementRef, type) {
const chart = new G2.Chart({
container: el.nativeElement,
forceFit: true,
height: 500,
padding:[60,20,65,60]
});
chart.source(this.aggregateDataList[type]);
chart.scale('value', {
min:0,
alias: 'vms'
},
{
nice: true,
}
);
chart.axis('type', {
label: {
textStyle: {
fill: '#aaaaaa'
}
},
tickLine: {
alignWithLabel: false,
length: 0
}
});
chart.axis('value', {
label: {
textStyle: {
fill: '#aaaaaa'
}
}
});
chart.guide().text({
top: true,
position: ['start', 'end'],
content: this.i18n.fanyi('vms'),
style: {
fontSize: '12',
},
offsetX: -25,
offsetY: -30,
})
chart.legend({
position: 'top-center'
});
if (type != 'IOPS') {
chart.tooltip({
itemTpl:`<li class="g2-tooltip-list-item">
<span class="g2-tooltip-marker"></span>
<span class="g2-tooltip-name">`+ this.i18n.fanyi('vms')+`</span>:<span class="g2-tooltip-value">{value}</span>
</li>`
});
} else {
chart.tooltip({
itemTpl:`<li class="g2-tooltip-list-item">
<span class="g2-tooltip-marker"></span>
<span class="g2-tooltip-name">{companyType}</span>:<span class="g2-tooltip-value">{value}</span>
</li>`
});
}
chart.interval().position('type*value')
.tooltip('type*value*company*companyType', (type, value, company, companyType?) => {
return {
type,
value,
company,
companyType
}
})
.color('company')
.opacity(1)
.adjust([{
type: 'dodge',
marginRatio: 1 / 32
}]);
chart.legend(false);
this.aggregateChart[type] = chart;
chart.render();
}
renderLoad(el: ElementRef) {
let self= this;
this.performanceChart = new G2.Chart({
container: el.nativeElement,
forceFit: true,
height: 500,
padding: [0,'250',90,0]
});
this.performanceChart.source(this.performanceData);
this.performanceChart.axis('uuid', {
position:"right",
label: {
offset: 10,
textStyle: {
fill: '#404040',
fontSize: '12',
fontWeight: 'bold',
},
htmlTemplate(text, item, index) {
return '<li style="width:250px;">' +
'<span style="float:left; width:125px;text-align: left;word-break: break-word;">'+self.uuidToName[text]+'</span>' +
'<span style="float:left;width:115px; padding-left: 10px; text-align: left;word-break: break-word;">'+ self.chartXaises[text]+'</span>' +
'</li>';
},
autoRotate:true
}
});
this.performanceChart.polygon()
.position('time*uuid')
.color('value', '#FFFEDA-#FFDF7A-#FFBC58-#FF8828-#DF7071-#CD2417')
.label('value', {
offset: -2,
textStyle: {
fill: '#000',
shadowBlur: 2,
shadowColor: 'rgba(0, 0, 0, .45)'
},
})
.style({
lineWidth: 1,
stroke: '#fff'
});
this.performanceChart.render();
}
