<title>DISK page</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/echarts2/esl.js"></script>
<script type="text/javascript" src="js/echarts2/echarts.js"></script>
<script type="text/javascript" src="js/echarts2/theme/macarons.js"></script>
<script type="text/javascript">
var myChart;
var echarts;
var xData=[110, 220, 330, 40, 550, 6600, 770];
var xData2=[1000, 2000, 30000, 4000, 5000, 60000, 7000];
var yData= ['oradata1','oradata2','oradata3','oradata4','oradata5','oradata6','oradata7'];
//定义图表options
var option = {
title : {text: '主机磁盘情况监控信息'},
grid:{ x:100,y:15,x2:130,y2:0},
legend: {data:[ '已用空间', '总空间']},
xAxis : [
{ name:'' , type : 'value',
axisLabel: {show:false},
splitLine: {show:false}
}
],
yAxis : [
{
name:'挂载点' , type : 'category' ,
axisTick : {show: false} , data : [yData[0]]
},
{
name:'挂载点' , type : 'category',
axisLine: {show:false},axisTick: {show:false},axisLabel: {show:false},splitArea: {show:false},splitLine: {show:false},
data : [yData[0]]
}
],
series : [
{
name:'已用空间',
type:'bar', //barWidth : 3,
yAxisIndex:1,
itemStyle: {normal: {
color:'rgba(235,35,43,1)',borderRadius: 5,label : {show: true, position: 'inside'}
}},data:[xData[0]]
},
{
name:'总空间',
type:'bar',//barWidth : 3,
yAxisIndex:0,
itemStyle: {normal: {
color:'rgba(95,195,20,0.8)',borderRadius: 5,label : {show: true , position: 'inside'}
}},
data:[xData2[0]]
}
]
};
// 按需加载
require(
['echarts','echarts/chart/line','echarts/chart/bar'],
DrawEChart
);
//创建ECharts图表方法
function DrawEChart(ec) {
echarts=ec;
for(var i = 0; i<xData.length;i++){//创建多个图表实例,应为单个图表显示多个磁盘,磁盘大小差别太大的话,显示效果不好
appendDiv(i);
var domain =document.getElementById('main'+i);
myChart = echarts.init(domain);
myChart.showLoading({
text : "图表数据正在努力加载...",effect :'whirling',textStyle : {fontSize : 20 }
});
option.yAxis[0].data[0]=yData[i];
option.series[0].data[0] = xData[i];
option.series[1].data[0] = xData2[i];
if(i==0){//第一个:向下移
option.grid.y=60;
}else{//不是第一个:Y坐标不显示
option.yAxis[0].name=null;
option.grid.y=0;
option.legend=null;
option.title=null;
}
if(i==xData.length-1){//最后一个显示X坐标
option.xAxis[0].name="单位MB";
option.grid.y2=20;
}
myChart.setOption(option);
myChart.hideLoading();
}
}
//动态创建div
function appendDiv(i) {
var $html = "<div id='main" +i+ "' style='height:40px ; width: 90%;'></div>";
if(i==0){//第一个
$html = "<div id='main" +i+ "' style='height:100px ; width: 90%; '></div>";
}
if(i==xData.length-1){//最后一个
$html = "<div id='main" +i+ "' style='height:60px ; width: 90%;'></div>";
}
$("body").append($html);
}
</script>
<title>DISK page</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/echarts2/esl.js"></script>
<script type="text/javascript" src="js/echarts2/echarts.js"></script>
<script type="text/javascript" src="js/echarts2/theme/macarons.js"></script>
<script type="text/javascript">
var myChart;
var echarts;
var xData=[110, 220, 330, 40, 550, 6600, 770];
var xData2=[1000, 2000, 30000, 4000, 5000, 60000, 7000];
var yData= ['oradata1','oradata2','oradata3','oradata4','oradata5','oradata6','oradata7'];
//定义图表options
var option = {
title : {text: '主机磁盘情况监控信息'},
grid:{ x:100,y:15,x2:130,y2:0},
legend: {data:[ '已用空间', '总空间']},
xAxis : [
{ name:'' , type : 'value',
axisLabel: {show:false},
splitLine: {show:false}
}
],
yAxis : [
{
name:'挂载点' , type : 'category' ,
axisTick : {show: false} , data : [yData[0]]
},
{
name:'挂载点' , type : 'category',
axisLine: {show:false},axisTick: {show:false},axisLabel: {show:false},splitArea: {show:false},splitLine: {show:false},
data : [yData[0]]
}
],
series : [
{
name:'已用空间',
type:'bar', //barWidth : 3,
yAxisIndex:1,
itemStyle: {normal: {
color:'rgba(235,35,43,1)',borderRadius: 5,label : {show: true, position: 'inside'}
}},data:[xData[0]]
},
{
name:'总空间',
type:'bar',//barWidth : 3,
yAxisIndex:0,
itemStyle: {normal: {
color:'rgba(95,195,20,0.8)',borderRadius: 5,label : {show: true , position: 'inside'}
}},
data:[xData2[0]]
}
]
};
// 按需加载
require(
['echarts','echarts/chart/line','echarts/chart/bar'],
DrawEChart
);
//创建ECharts图表方法
function DrawEChart(ec) {
echarts=ec;
for(var i = 0; i<xData.length;i++){//创建多个图表实例,应为单个图表显示多个磁盘,磁盘大小差别太大的话,显示效果不好
appendDiv(i);
var domain =document.getElementById('main'+i);
myChart = echarts.init(domain);
myChart.showLoading({
text : "图表数据正在努力加载...",effect :'whirling',textStyle : {fontSize : 20 }
});
option.yAxis[0].data[0]=yData[i];
option.series[0].data[0] = xData[i];
option.series[1].data[0] = xData2[i];
if(i==0){//第一个:向下移
option.grid.y=60;
}else{//不是第一个:Y坐标不显示
option.yAxis[0].name=null;
option.grid.y=0;
option.legend=null;
option.title=null;
}
if(i==xData.length-1){//最后一个显示X坐标
option.xAxis[0].name="单位MB";
option.grid.y2=20;
}
myChart.setOption(option);
myChart.hideLoading();
}
}
//动态创建div
function appendDiv(i) {
var $html = "<div id='main" +i+ "' style='height:40px ; width: 90%;'></div>";
if(i==0){//第一个
$html = "<div id='main" +i+ "' style='height:100px ; width: 90%; '></div>";
}
if(i==xData.length-1){//最后一个
$html = "<div id='main" +i+ "' style='height:60px ; width: 90%;'></div>";
}
$("body").append($html);
}
</script>
先画一个110(已用空间:yAxisIndex:0),再画一个1000(总空间:yAxisIndex:1) 覆盖上去
这样图表会根据最大的那个数(1000)做顶个处理。