function DrawProxyTrafficChart()

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()
}