echarts中的图表大小自适应

echarts中的图表大小自适应

 

<div id="serverStatus"></div>
    <script type="text/javascript">
        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: '
 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: '
 Memory Usage'
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    myChart.setOption(option)
                }
            });
        },1000)

        window.onresize = function () {
            resizeWorldMapContainer();
            myChart.resize();
        };