百度echart 使用示例
本文共 6470 字，大约阅读时间需要 21 分钟。
折线图：
function chart_mem(ds){ chart_div_mem = echarts.init(document.getElementById('div-mem')); option = { title : { text: '内存', subtext:'' }, tooltip : { trigger: 'axis' }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : [] } ], yAxis : [ { type : 'value', max:100 } ], series : [ { type:'line', smooth:true, showSymbol: false, itemStyle: {normal: { lineStyle:{color:'#2085BF',width:1,type:'solid'}, areaStyle: { type: 'default',color:'#F1F6FA'}}}, data:ds } ] }; // 为echarts对象加载数据 chart_div_mem.setOption(option); } 定时数据：
setInterval(function(){ $.post('/adminindex/GetSvrInfo',function(data){ var obj_cpu = eval('(' + data.cpu + ')'); if(ds_cpu.length>60){ ds_cpu.shift(); } ds_cpu.push(obj_cpu.percent); chart_div_cpu.setOption({ series: [{ data: ds_cpu }], title:{ subtext:'{0}%利用率'.format(obj_cpu.percent) } }); var obj_mem=eval('(' + data.mem + ')'); if(ds_mem.length>60){ ds_mem.shift(); } ds_mem.push(obj_mem.percent); chart_div_mem.setOption({ series: [{ data: ds_mem }], title:{ text:'内存 {0}MB/{1}MB'.format(obj_mem.used,obj_mem.total), subtext:'{0}%利用率'.format(obj_mem.percent) } }); var obj_net = eval('('+data.net+')'); if(ds_net.length>60){ ds_net.shift(); } ds_net.push(obj_net.total); chart_div_net.setOption({ series:[{ data:ds_net }], title:{ subtext:'活动连接数：{0}'.format(obj_net.total) } }); if(!createDisk){ var obj_disk=eval('(' + data.disk + ')'); var alltotal=0; var alluse=0; var allfree=0; for(i=0;i 柱状图堆积百分比：
function chart_disk(disks,dsuse,dsfree,subtitle){ chart_div_disk = echarts.init(document.getElementById('div-disk')); option = { title : { text: '硬盘', subtext:subtitle }, tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' }, formatter: function (params){ return params[0].name + '' + params[0].seriesName + ' : ' + params[0].value + '' + params[1].seriesName + ' : ' + params[1].value; } }, calculable : true, legend: { selectedMode:false, data:['已用', '空闲'] }, xAxis : [ { type : 'category', data : disks } ], yAxis : [ { type : 'value', boundaryGap: [0, 0.1] } ], series : [ { name:'已用', type:'bar', stack: 'sum', barCategoryGap: '60%', itemStyle: {normal: { color: '#2085BF', barBorderColor: '#2085BF', barBorderWidth: 2, barBorderRadius:0, label : { show: true, position: 'insideTop' } }}, data:dsuse },{ name:'空闲', type:'bar', stack: 'sum', itemStyle: { normal: { color: '#F1F6FA', barBorderColor: '#2085BF', barBorderWidth: 2, barBorderRadius:0, label : { show: true, position: 'top', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return (option.series[0].data[i] + params.value).toFixed(2); } } }, textStyle: { color: '#2085BF' } } } }, data:dsfree } ] }; // 为echarts对象加载数据 chart_div_disk.setOption(option); } 图例：
你可能感兴趣的文章
mysql常用操作
查看>>
MySQL常用日期格式转换函数、字符串函数、聚合函数详
查看>>
MySQL常见架构的应用
查看>>
MySQL常见约束条件
查看>>
MySQL常见错误
查看>>
MySQL常见错误分析与解决方法总结
查看>>
mysql并发死锁案例
查看>>
MySQL底层概述—1.InnoDB内存结构
查看>>
MySQL底层概述—2.InnoDB磁盘结构
查看>>
MySQL底层概述—3.InnoDB线程模型
查看>>
MySQL底层概述—4.InnoDB数据文件
查看>>
MySQL底层概述—5.InnoDB参数优化
查看>>
MySQL底层概述—6.索引原理
查看>>
MySQL底层概述—7.优化原则及慢查询
查看>>
MySQL底层概述—8.JOIN排序索引优化
查看>>
MySQL底层概述—9.ACID与事务
查看>>
Mysql建立中英文全文索引（mysql5.7以上）
查看>>
mysql建立索引的几大原则
查看>>
Mysql建表中的 “FEDERATED 引擎连接失败 - Server Name Doesn‘t Exist“ 解决方法
查看>>
MySQL开源工具推荐，有了它我卸了珍藏多年Nactive！
查看>>