master

分支 (1)

管理

管理

master

dwz-for-Public-CMS
/
chart.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>使用报表</title>
	<script src="resource/js/jquery-1.9.1.min.js"></script>
	<script src="resource/js/echarts.common.min.js"></script>
</head>
<body>
<a href=""><h1 style="margin:20px;">系统监控</h1></a>
<div id="memory" style="width:300px;margin:20px;float:left;"></div>
<div id="memory_count" style="width:300px;margin:20px;float:left;"></div>
<div id="disk" style="width:300px;margin:20px;float:left;"></div>
<script>
document.getElementById('memory').style.height=document.getElementById('memory').offsetWidth+'px';
document.getElementById('memory_count').style.height=document.getElementById('memory_count').offsetWidth+'px';
document.getElementById('disk').style.height=document.getElementById('disk').offsetWidth+'px';
var memoryChart={
	chart:echarts.init(document.getElementById('memory')),
	countChart:echarts.init(document.getElementById('memory_count')),
	data:{
		freeMemory:[300,200,100,300,200,100,300,200,100],
		usedMemory:[100,200,300,100,200,300,100,200,300],
		unUsedMemory:[200,200,200,200,200,200,200,200,200]
	},
	time:[1,2,3,4,5,6,7,8,9],
	toDecimal:function(number) {
        var value = parseFloat(number);
        if (isNaN(value)) {
            return 0;
        }
        value = Math.round(number*100)/100;
        return value;
    }
};
memoryChart.chart.setOption({
	title: {
        text: '内存监测'
    },
    tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: memoryChart.time
    },
    yAxis: {
        type: 'value'
    },
    series: [
    {
   	    name:'实际使用',
   	    type:'line',
   	    stack: '总量',
   	    areaStyle: {normal: {}},
   	    data:memoryChart.data.usedMemory
   	},
   	{
   	    name:'闲置内存',
   	    type:'line',
   	    stack: '总量',
   	    areaStyle: {normal: {}},
   	    data:memoryChart.data.freeMemory
   	},
   	{
   	    name:'可用剩余',
   	    type:'line',
   	    stack: '总量',
   	    areaStyle: {normal: {}},
   	    data:memoryChart.data.unUsedMemory
   	}]
});
memoryChart.countChart.setOption({
	title : {
        text: '内存使用',
        subtext: '占用内存',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        position: [10, 10]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series : [
        {
            name: '内存使用',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:40, name:'已用'},
                {value:60, name:'闲置'}
            ]
        }
    ]
});
echarts.init(document.getElementById('disk')).setOption({
	title : {
        text: '站点磁盘:20G',
        subtext: '/data/publiccms/',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
        position: [10, 10]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series : [
        {
            name: '磁盘空间',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
            	{value:60, name:'已用'},
                {value:40, name:'空闲'}
            ]
        }
    ]
});
</script>
</body>
</html>