echarts 自动设置大小_echarts中的图表大小自适应

var worldMapContainer = document.getElementById(‘serverStatus‘);

var resizeWorldMapContainer = function () {

worldMapContainer.style.width = window.innerWidth+‘px‘;

worldMapContainer.style.height = window.innerHeight+‘px‘;

};

resizeWorldMapContainer();

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(worldMapContainer);

// 指定图表的配置项和数据

setInterval(function () {

$.ajax({

url:‘/data‘,

type:‘get‘,

dataType:‘json‘,

success:function (data) {

var option = {

backgroundColor: "#404A59",

color: [‘#ffd285‘, ‘#ff733f‘, ‘#ec4863‘],

title: [

{

text: ‘服务器状态‘,

left: ‘1%‘,

top: ‘6%‘,

textStyle: {color: ‘#fff‘}

},

{

text: ‘内存和CPU使用率‘,

left: ‘83%‘,

top: ‘6%‘,

textAlign: ‘center‘,

textStyle: {color: ‘#fff‘}

}

],

tooltip: {trigger: ‘axis‘},

legend: {

x: 300,

//top: ‘7%‘,

top: ‘2%‘,

textStyle: {color: ‘#ffd285‘,},

//data: [‘温度‘, ‘湿度‘, ‘压力‘]

data: data.legend

},

grid: {

left: ‘1%‘,

right: ‘35%‘,

top: ‘16%‘,

bottom: ‘6%‘,

containLabel: true

},

toolbox: {

"show": false,

feature: {

saveAsImage: {}

}

},

// X轴

xAxis: {

//type: ‘category‘,

"axisLine": {

lineStyle: {

color: ‘#FF4500‘

}

},

"axisTick": {

"show": false

},

axisLabel: {

textStyle: {

color: ‘#fff‘

}

},

boundaryGap: false,

// 可以从数据库中获取当前时间段

//data: [‘08:00‘, ‘09:00‘, ‘10:00‘, ‘11:00‘, ‘12:00‘, ‘13:00‘, ‘14:00‘,‘15:00‘,‘16:00‘,‘17:00‘, ‘18:00‘, ‘19:00‘,‘20:00‘,‘21:00‘, ‘23:00‘,‘00:00‘,‘01:00‘, ‘02:00‘, ‘03:00‘, ‘04:00‘, ‘05:00‘, ‘06:00‘, ‘07:00‘]

data: data.categories

},

// Y轴

yAxis: {

"axisLine": {

lineStyle: {

color: ‘#fff‘

}

},

splitLine: {

show: true,

lineStyle: {

color: ‘#fff‘

}

},

"axisTick": {

"show": false

},

axisLabel: {

textStyle: {

color: ‘#fff‘

}

},

type: ‘value‘

},

series: [

// 四条曲线

{

name: ‘温度‘,

smooth: true,

type: ‘line‘,

symbolSize: 8,

symbol: ‘circle‘,

//data: [90,90, 50, 39, 50, 20, 82, 80,90,10, 20, 39, 50, 120, 82, 80,90, 300, 39, 80, 120, 82, 80,90],

data: data[‘temperature‘]

},

{

name: ‘湿度‘,

smooth: true,

type: ‘line‘,

symbolSize: 8,

symbol: ‘circle‘,

//data: [90,90, 50, 39, 50, 120, 82, 80,90,100, 50, 99, 200, 120, 82, 80,90, 50, 39, 50, 120, 82, 80,90],

data: data[‘humidity‘]

},

{

name: ‘压力‘,

smooth: true,

type: ‘line‘,

symbolSize: 8,

symbol: ‘circle‘,

//data: [290, 200,20, 132, 15, 200, 90,200,150, 200,20, 132, 15, 200, 90,200,150, 200,20, 132, 15, 200, 90,200],

data: data[‘pressure‘]

},

// 两个饼图

{

type: ‘pie‘,

center: [‘83%‘, ‘33%‘],

radius: [‘25%‘, ‘30%‘],

label: {

normal: {

position: ‘center‘

}

},

data: [{

//value: 50,

value: data[‘cpuUsage‘],

name: ‘cup使用‘,

itemStyle: {

normal: {

color: ‘#ffd285‘

}

},

label: {

normal: {

formatter: ‘{d} %‘,

textStyle: {

color: ‘#ffd285‘,

fontSize: 20

}

}

}

}, {

value: data[‘cpuNotUsage‘],

name: ‘cpu未使用‘,

tooltip: {

show: false

},

itemStyle: {

normal: {

color: ‘#87CEFA‘

}

},

label: {

normal: {

textStyle: {

color: ‘#ffd285‘,

},

formatter: ‘\n CPU Usage‘

}

}

}]

},

{

type: ‘pie‘,

center: [‘83%‘, ‘72%‘],

radius: [‘25%‘, ‘30%‘],

label: {

normal: {position: ‘center‘}

},

data: [

{

//value: 50,

value: data[‘memUsage‘],

name: ‘使用‘,

itemStyle: {

normal: {color: ‘#ff733f‘}

},

label: {

normal: {

formatter: ‘{d} %‘,

textStyle: {

color: ‘#ff733f‘,

fontSize: 20

}

}

}

},

{

//value: 510,

value: data[‘memNotUsage‘],

name: ‘未使用‘,

tooltip: {show: false},

itemStyle: {

normal: {color: ‘#87CEFA‘}

},

label: {

normal: {

textStyle: {color: ‘#FF4500‘,},

formatter: ‘\n Memory Usage‘

}

}

}

]

}

]

};

myChart.setOption(option)

}

});

},1000)

window.onresize = function () {

resizeWorldMapContainer();

myChart.resize();

};