百度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数据库批量插入数据shell脚本实现
查看>>
MySQL数据库操作
查看>>
MySQL数据库故障排错
查看>>
MySQL数据库无法远程连接的解决办法
查看>>
mysql数据库时间类型datetime、bigint、timestamp的查询效率比较
查看>>
MySQL数据库服务器端核心参数详解和推荐配置（一）
查看>>
mysql数据库死锁的产生原因及解决办法
查看>>
MySQL数据库的事务管理
查看>>
mysql数据库的备份与恢复
查看>>
Mysql数据库的条件查询语句
查看>>
MySQL数据库的高可用
查看>>
Mysql数据库相关各种类型的文件
查看>>
MYSQL数据库简单的状态检查（show processlist）
查看>>
MYSQL数据库简单的状态检查（show status）
查看>>
MySQL数据库系列
查看>>
MYSQL数据库自动本地/异地双备份/MYSQL增量备份
查看>>
mysql数据库表增添字段，删除字段、修改字段的排列等操作，还不快来
查看>>
MySQL数据库被黑了
查看>>
mysql数据库设计
查看>>
MySQL数据库设计与开发规范
查看>>