in web/frps/src/utils/chart.js [108:180]
function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) {
let params = {
width: '600px',
height: '400px'
}
let myChart = echarts.init(document.getElementById(elementId), 'macarons', params);
myChart.showLoading()
trafficInArr = trafficInArr.reverse()
trafficOutArr = trafficOutArr.reverse()
let now = new Date()
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6)
let dates = new Array()
for (let i = 0; i < 7; i++) {
dates.push(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate())
now = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
}
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(data) {
let html = ''
if (data.length > 0) {
html += data[0].name + '<br/>'
}
for (let v of data) {
let colorEl = '<span style="display:inline-block;margin-right:5px;' +
'border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>';
html += colorEl + v.seriesName + ': ' + Humanize.fileSize(v.value) + '<br/>'
}
return html
}
},
legend: {
data: ['Traffic In', 'Traffic Out']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: dates
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: function(value) {
return Humanize.fileSize(value)
}
}
}],
series: [{
name: 'Traffic In',
type: 'bar',
data: trafficInArr
}, {
name: 'Traffic Out',
type: 'bar',
data: trafficOutArr
}]
};
myChart.setOption(option);
myChart.hideLoading()
}