Echarts 磁盘使用监控( 创建多图例 js动态拼接 )

最新推荐文章于 2022-10-16 10:06:41 发布
最新推荐文章于 2022-10-16 10:06:41 发布
阅读量1.8k 收藏
点赞数 








<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）做顶个处理。

这里写图片描述

kuifeng.dong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+Echarts监控大屏实例一：软件系统运行监控模板实例
03-20
Vue+Echarts监控大屏实例一：软件系统运行监控模板实例，本实例实现软件系统运行状况监控大屏实例，包括数据库状态监控、系统运行内存、网络、cpu及磁盘监控等各种系统运行状况监控界面，实现系统运行状况监控可视化...
echart之实现服务器资源监控
貌似高手
12-24 7478
前一段时间接触了echarts，不过没怎么深入研究过，不过现在又有跟他打交道的机会了，应项目需求
基于VUE + Echarts 实现可视化数据大屏智慧校园可视化
HTML网页设计
08-16 5350
🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，.
前端echarts图可以传到后台吗_结合Echarts、Ajax技术实现可视化大屏监控 3D
weixin_39953629的博客
12-06 208
#三维可视化# #3D开发#ECharts是 Enterprise Charts缩写，表示商业级数据表图，它是一个基于html5 Canvas的图标库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器 (E6/7/8/9/10/1, chrome, firefox, Sarari等)，底层依赖轻量级的 Canvas类库 ZRender，创建了坐标系、图例、提示、工具箱等基础组件，能够提供直...
142Echarts - 矩形树图（Disk Usage）
阿甘兄
05-05 1900
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts进阶配置
Harris-H的博客
10-16 777
echarts进阶配置
PostgreSQL磁盘使用监控
01-06
我们知道PostgreSQL数据库中有两大块buffer：wal buffer和shared buffer。两者作用分别是： wal buffer：预写日志缓冲区，wal writer进程负责将wal buffer缓冲区的数据写入WAL FILE中。...如何监控数
Winform磁盘剩余空间监控源码
08-27
Winform实现对电脑各个磁盘剩余清空监控，源码
监控内存、CPU、磁盘的使用情况
06-10
基于OSHI采集服务器的内存、CPU、磁盘，支持windows和linux跨平台采集，独立部署，不需要对源程序进行修改。
用于自动监控磁盘使用情况的 Shell 脚本.doc
06-13
用于自动监控磁盘使用情况的 Shell 脚本.doc
公司要求实时监控服务器，写个Web的监控系统
04-12
NULL 博文链接：https://marsvaadin.iteye.com/blog/1699021
基于Echarts的可视化大屏可视化监控管理.rar
04-03
基于Echarts的可视化大屏可视化监控管理，包含html+css+js+image
ECharts中矩形图实例（源代码可直接运行）
09-29
在网上看到Echarts的功能比较强大，就学习了下，这是我联系矩形图的实例，希望对各位有所帮助！
基于Djano的sysinfo项目搭建----CPU信息监控并使用Echart绘制cpu饼状图和折线图
ninimino的博客
03-19 662
Echarts绘制CPU折线图 Echarts绘制CPU扇形图 Django使用echarts进行可视化展示 Celery定时任务和异步任务 Celery 是一个简单、灵活且可靠的，处理大量消息的分布式系统。大白话理解处理异步任务和定时任务的工具。 工作原理如下图: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lTgWbq37-1616080244795)(项目搭建.assets/image-20210313165237504.png)] Windows..
2010考研管理类联考综合能力答案解析.pdf
04-24
考研管理类联考综合能力答案解析，考研真题，考研历年真题，考研管理类联考历年真题，真题解析。
NumPy Matplotlib Matplotlib 是 Python 的绘图库 .zip
04-24
matplotlib绘图 通过 Matplotlib，开发者可以仅需要几行代码，便可以生成绘图、直方图、功率谱、条形图、错误图、散点图等。 Matplotlib基础知识 1.Matplotlib中的基本图表包括的元素 x轴和y轴 水平和垂直的轴线 x轴和y轴刻度 刻度标示坐标轴的分隔，包括最小刻度和最大刻度 x轴和y轴刻度标签 表示特定坐标轴的值 绘图区域 实际绘图的区域 2.hold属性 hold属性默认为True，允许在一幅图中绘制多个曲线；将hold属性修改为False，每一个plot都会覆盖前面的plot。 但是不推荐去动hold这个属性，这种做法（会有警告）。因此使用默认设置即可。 3.网格线 grid方法 使用grid方法为图添加网格线 设置grid参数（参数与plot函数相同） .lw代表linewidth，线的粗细 .alpha表示线的明暗程度 4.axis方法 如果axis方法没有任何参数，则返回当前坐标轴的上下限 5.xlim方法和ylim方法 除了plt.axis方法，还可以通过xlim，ylim方法设置坐标轴范围
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档）
04-24
毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 毕业设计：基于微信小程序大学校园二手教材与书籍拍卖系统（源码 + 数据库 + 说明文档） 第二章 需求分析 4 2.1可行性分析 4 2.1.1技术的可行性 4 2.1.2经济的可行性 4 2.1.3操作可行性 4 2.2需求调研 4 第三章 数据库设计 6 3.1数据库的分析与设计 6 3.1.1数据库的概念结构设计 6 3.1.2数据表的逻辑结构设计 7 第四章 系统功能实现 8 4.1 系统后台界面 8 4.2书籍类别管理 8 4.3 书籍信息界面 9 4.4竞拍管理界面 9 4.5 微信小程序首页 9 4.6书籍信息添加 10 4.7书籍竞拍界面 11 4.8用户后台界面 11 第五章 系统测试 12 5.1 系统测试的意义 12 5.2 系统测试的内容 12 5.3系统测试结果 12 总结 13
利用openCV控制单片机小车运动轨迹.zip
最新发布
04-24
利用openCV控制单片机小车运动轨迹.zip
基于Python的PCA人脸识别算法的原理及实现代码+文档详解.zip
04-24
基于Python的PCA人脸识别算法的原理及实现代码+文档详解.zip个人经导师指导并认可通过的98分课程设计项目，主要针对计算机相关专业的正在做课程设计、期末大作业的学生和需要项目实战练习的学习者。
zabbix如何监控磁盘使用率
06-07
2. 创建监控项：在Zabbix中创建一个监控项，用于收集磁盘使用率数据。监控项应该使用Zabbix自带的`vfs.fs.size`键，该键可用于监控Linux系统中的磁盘使用情况。监控项的键应该类似于：`vfs.fs.size[/,pfree]`。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值