power_yd/power-admin/target/power/static/js/gatewayIndexEcharts.js

//初始化
$(function(){
    //上方组图
    //加载权限操作饼图
    systemOperPieEchart();
    //加载在线用户统计折线图
    aLineLineEchart();
    //加载在线用户统计柱状图
    aLineBarEchart();

    //下方组图
    //服务器监控1 仪表盘
    serverListenGaugeEchart1();
    //服务器监控2 仪表盘
    serverListenGaugeEchart2();
    //服务器监控3 多环形
    serverListenGaugeEchart3();
})

//定时刷新数据
//1
setInterval(function () {
    systemOperPieEchart();
},1000);
//2
setInterval(function () {
    aLineLineEchart();
},1000);
//3
setInterval(function () {
    aLineBarEchart();
},1000);
//4
setInterval(function () {
    serverListenGaugeEchart1();
},1000);
//5
setInterval(function () {
    serverListenGaugeEchart2();
},60000);
//6
setInterval(function () {
    serverListenGaugeEchart3();
},1000);
/*****************************************工具类公共方法***************************************************/
//工具栏公共方法
var toolbox = {
    feature: {
        dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            show: true,//是否显示组件。
            readOnly: false
        },
        saveAsImage: {}
    }
};
//工具栏公共方法1折线图和柱状图
var toolbox1 = {
    feature: {
        dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            show: true,//是否显示组件。
            readOnly: false
        },
        magicType:{//动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
            show:true,
            type:['line','bar']
        },
        restore: {},
        saveAsImage: {}
    }
};

/************************************加载动态数据***********************************************/
//加载权限操作饼图
function systemOperPieEchart(){
    var myChart = echarts.init(document.getElementById('systemOperDivMain'));
    //设置实际值
    myChart.setOption({
        legend: {
            top:46,
            data:['无异常','异常','锁定']
        },
        color: ['#008000','#F7464A','#FFC870'],
    });
    $.ajax({
        type:'get',
        url:path+'/getEcharts1',
        dataType:'json',
        success:function(data){
            if(data.code == 100){
                var data = data.extend.list;
                getPieEcharts(myChart,'',data);
            }else{
                toastr.error(data.msg);
            }
        }
    })
    /*var data = [
        {value:335,name:'无异常'},
        {value:310,name:'异常'},
        {value:234,name:'锁定'},
    ];*/
}

//加载在线用户统计折线图
function aLineLineEchart(){
    var myChart = echarts.init(document.getElementById('alineLineDivMain'));
    var name1 = '意向客户';
    var name2 = '签约客户';
    var name3 = '长期客户';
    var name4 = '流失客户';
    var names = [name1,name2,name3,name4];
    myChart.setOption({
        legend: {
            data:names
        },
        color: ['#CC324B','#FFCE55','#8CC474','#5DB2FF'],
    });
    $.ajax({
        type:'get',
        url:path+'/getEcharts2',
        dataType:'json',
        sync:false,
        success:function(data){
            if(data.code == 100){
                //最大登录数
                var maxCountList = data.extend.list.maxCountList;
                $("#maxCountList").text(maxCountList);
                //日期集合
                var xAsisData = data.extend.list.dayList;
                var intentionalList = data.extend.list.intentionalList;
                var contractedList = data.extend.list.contractedList;
                var longTermList = data.extend.list.longTermList;
                var lossList = data.extend.list.lossList;
                var data = [
                    {
                        name:name1,
                        type:'line',
                        data:intentionalList
                    },
                    {
                        name:name2,
                        type:'line',
                        data:contractedList
                    },
                    {
                        name:name3,
                        type:'line',
                        data:longTermList
                    },
                    {
                        name:name4,
                        type:'line',
                        data:lossList
                    },
                ];
                getLineEcharts(myChart,xAsisData,data);
            }
        }
    })
    //$("#alineLineDivMain canvas").attr("height",190);
}

//加载在线用户统计柱状图
function aLineBarEchart(){
    var myChart = echarts.init(document.getElementById('alineBarDivMain'));
    myChart.setOption({
        title:{
            text:'本月拜访量趋势图',
            x:'left'
        },
    });
    var xAsisData,echartData;
    $.ajax({
        type:'get',
        url:path+'/getEcharts3',
        dataType:'json',
        sync:false,
        success:function(data){
            if(data.code == 100){
                //最大登录数
                var maxCountList = data.extend.list.maxCountList;
                $("#loginCount").text(maxCountList);
                //日期集合
                xAsisData = data.extend.list.dayList;
                echartData = data.extend.list.dataList;
                var color = '#D55462';
                getBarEcharts(myChart,xAsisData,echartData,color);
            }
        }
    })
    //$("#alineBarDivMain canvas").attr("height",190)
}

//加载服务器监控1仪表盘
function serverListenGaugeEchart1(){
    var myChart = echarts.init(document.getElementById('serverListenGaugeDiv1'));
    var name = 'cpu使用率';
    var color = [[0.2,'#90EE90'],[0.4, '#FFA500'],[0.8,'#87CEEB'],[1, '#FF4500']];
    $.ajax({
        type:'get',
        url:path+'/getEcharts4',
        dataType:'json',
        sync:false,
        success:function(data){
            if(data.code == 100){
                var data = data.extend.list;
                gaugeEchart1(myChart,name,color,data);
            }
        }
    })
}

//加载服务器监控2仪表盘
function serverListenGaugeEchart2(){
    var myChart = echarts.init(document.getElementById('serverListenGaugeDiv2'));
    //设置实际值
    var color = [[0.4, '#2EC7C9'], [0.7, '#5AB1EF'], [1, '#D87A80']];
    $.ajax({
        type:'get',
        url:path+'/getEcharts5',
        dataType:'json',
        sync:false,
        success:function(data){
            if(data.code == 100){
                var value = data.extend.temperature;
                var data = [{value: value, name: 'cpu温度'}];
                getGaugeEcharts(myChart,'cpu温度',data,color);
            }
        }
    })

}

//加载服务器监控3仪表盘
function serverListenGaugeEchart3(){
    var myChart = echarts.init(document.getElementById('serverListenGaugeDiv3'));
    var text = '内存使用率';
    var name1 = '总内存';
    var name2 = '物理内存';
    var name3 = '使用中';
    var name = [name1,name2,name3];
    var color1 = '#2EC7C9';
    var color2 = '#B6A2DE';
    var color3 = '#5AB1EF';
    var color = [color1,color2,color3];
    $.ajax({
        type:'get',
        url:path+'/getEcharts6',
        dataType:'json',
        sync:false,
        success:function(data){
            if(data.code == 100){
                var value = data.extend.list;
                var data = Math.round((value[2]/value[1])*100) + "%";
                gaugeEchart3(myChart,text,name,color,value,data);
            }
        }
    })

}
/**************************************基本代码*************************************************/
/**
 * myChart:实例化对象 name:饼图名称 data:动态数据var data = [
 {value:335, name:'无异常'},
 {value:310, name:'异常'},
 {value:234, name:'锁定'},
 ];
 * */
function getPieEcharts(myChart,name,data){
    // 基于准备好的dom，初始化echarts实例
// 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
        },
        toolbox:toolbox,
        series: [
            {
                name:name,
                type:'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:data,
            }
        ]
    };
// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

/**
 * myChart:实例化对象 xAsisData:x轴数据 data:动态数据var data = [
 {value:335, name:'无异常'},
 {value:310, name:'异常'},
 {value:234, name:'锁定'},
 ];
 * */
function getLineEcharts(myChart,xAsisData,data){
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox:toolbox1,
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAsisData
        },
        yAxis: {
            type: 'value'
        },
        series: data
    };
    myChart.setOption(option);
}

/**
 * myChart:实例化对象 xAsisData:x轴数据 var xAsisData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
 var data = [120, 200, 150, 80, 70, 110, 130];
 * */
//加载柱状图
function getBarEcharts(myChart,xAsisData,data,color){
    var option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color:color,
        toolbox:toolbox1,
        xAxis: {
            type: 'category',
            data: xAsisData
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data:data,
            type: 'bar'
        }]
    };
    myChart.setOption(option);
}

//加载仪表图1
function gaugeEchart1(myChart,name,color,data){
    var labelTop = {
        normal : {
            label : {
                show : true,
                position : 'center',
                formatter : '{b}',
                textStyle: {
                    baseline : 'bottom',
                    fontSize : '12',
                    fontWeight : 'bold'
                }
            },
            labelLine : {
                show : false
            }
        }
    };
    var labelFromatter = {
        normal : {
            label : {
                formatter : function (a,b,c,d){return (100 - d).toFixed(2) + '%'},
                textStyle: {
                    baseline : 'top',
                    fontSize : '12',
                    fontWeight : 'bold'
                }
            }
        },
    }
    var labelBottom = {
        normal : {
            label : {
                show : true,
                position : 'center'
            },
            labelLine : {
                show : false
            }
        },
        emphasis: {

        }
    };
    var option= {
        tooltip : {
            formatter: "{a}<br/>{b}:{c}%"
        },
        toolbox:toolbox,
        series : [
            {
                name:name,
                type:'gauge',
                center : ['50%', '50%'],    // 默认全局居中
                radius : '90%',
                startAngle: 140,
                endAngle : -140,
                min: 0,                     // 最小值
                max: 100,                   // 最大值
                precision: 0,               // 小数精度，默认为0，无小数点
                splitNumber: 10,             // 分割段数，默认为5
                axisLine: {            // 坐标轴线
                    show: true,        // 默认显示，属性show控制显示与否
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: color,
                        width: 28
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: true,        // 属性show控制显示与否，默认不显示
                    splitNumber: 5,    // 每份split细分多少段
                    length :8,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#eee',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: true,
                    formatter: function(v){
                        switch (v+''){
                            case '10': return '弱';
                            case '30': return '低';
                            case '60': return '中';
                            case '90': return '高';
                            default: return '';
                        }
                    },
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#333',
                        fontSize : 10
                    }
                },
                splitLine: {           // 分隔线
                    show: true,        // 默认显示，属性show控制显示与否
                    length :13,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: '#eee',
                        width: 2,
                        type: 'solid'
                    }
                },
                pointer : {
                    length : '80%',
                    width : 8,
                    color : 'auto'
                },
                title : {
                    show : true,
                    offsetCenter: ['-75%', -10],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#333',
                        fontSize : 14
                    }
                },
                detail : {
                    show : true,
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderWidth: 0,
                    borderColor: '#ccc',
                    width: 0,
                    height:0,
                    offsetCenter: ['-70%', 10],       // x, y，单位px
                    formatter:'{value}%',
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: 'auto',
                        fontSize : 26
                    }
                },
                data:[{value:data, name: name}]
            }
        ] };
    myChart.setOption(option);
}

/**
 * myChart:实例化对象 name:图名，
 var color = [[0.4, '#2EC7C9'], [0.7, '#5AB1EF'], [1, '#D87A80']];
 var data = [{value: 50, name: 'cpu温度'}];
 * */
//加载仪表盘2
function getGaugeEcharts(myChart,name,data,color){
    var option = {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}℃"
        },
        toolbox: toolbox,
        series: [
            {
                name: name,
                type: 'gauge',
                radius:'90%',
                axisLabel:{
                    distance:-20
                },
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: color,
                        width:10
                    }
                },
                detail: {formatter:'{value}℃'},
                data: data
            }
        ]
    };
    myChart.setOption(option);
}
//加载三环形图
function gaugeEchart3(myChart,text,name,color,value,data){
    var total = value[0] * 2;
    var placeHolderStyle = {
        normal: {
            label: {
                show: false,
            },
            labelLine: {
                show: false,
            }
        }
    };
    var option={
        title : {
            text: text,//主标题
            subtext: data,//副标题
            textStyle: {//主标题样式
                fontWeight: 'bold',
                fontSize: 14
            },
            subtextStyle: {//副标题样式
                fontSize: 20,
                fontWeight: 'bold',
            },
            left:'center',
            top: 'middle'
        },
        tooltip: {
            show: true,
            trigger: 'item',//提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
            formatter: function(params, ticket, callback) {//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
                return params.seriesName + ": " + params.value + "G";//系列名称：数据值
            }
        },
        toolbox: toolbox,
        color:color,//调色盘颜色列表，默认情况下图例和饼形环图颜色使用
        legend: {
            top: "44px",
            left: "50%",
            itemHeight: 20,//图例的高度
            data: name,//图例的数据数组
            selectedMode: true,//图例选择模式
            orient: "vertical"//图例布局方式
        },
        series: [
            {
                name: name[0],
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [100, 120],
                itemStyle: placeHolderStyle,
                label: {
                    normal: {
                        show: false,
                    }
                },
                data: [{
                    value: value[0],
                    itemStyle: {
                        normal: {
                            color: color[0]
                        }
                    }
                },
                    {
                        value: total-value[0],
                        itemStyle: {
                            normal: {
                                color: 'transparent'
                            }
                        }
                    }]
            },
            {
                name: name[1],
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [80, 100],
                itemStyle: placeHolderStyle,
                data: [{
                    value: value[1],
                    itemStyle: {
                        normal: {
                            color: color[1]
                        }
                    }
                },
                    {
                        value: total-value[1],
                        itemStyle: {
                            normal: {
                                color: 'transparent'
                            }
                        }
                    }]
            },
            {
                name: name[2],
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [60, 80],
                itemStyle: placeHolderStyle,
                data: [{
                    value: value[2],
                    itemStyle: {
                        normal: {
                            color: color[2]
                        }
                    }
                },
                    {
                        value: total-value[2],
                        itemStyle: {
                            normal: {
                                color: 'transparent'
                            }
                        }
                    }]
            }]
    };
    myChart.setOption(option);
}