zoukankan      html  css  js  c++  java
  • 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();
            };
    

      

  • 相关阅读:
    js == 和 === 判断原理
    react 渲染原理
    常见的HTTP状态码
    类数组和数组的区别是什么?
    如何判断一个变量是不是数组?
    typeof 是否正确判断类型? instanceof呢? instanceof 的实现原理是什么?
    前端 js data数组转tree数据结构
    Echarts 基础学习
    Vue CLI 4.0 项目搭建
    Echarts Demo
  • 原文地址:https://www.cnblogs.com/bigcrank/p/9305892.html
Copyright © 2011-2022 走看看