百度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性能优化学习笔记-存储引擎
查看>>
MySQL性能优化必备25条
查看>>
Mysql性能优化（1）：SQL的执行过程
查看>>
Mysql性能优化（2）：数据库索引
查看>>
Mysql性能优化（3）：分析执行计划
查看>>
Mysql性能优化（4）：优化的注意事项
查看>>
Mysql性能优化（5）：主从同步原理与实现
查看>>
Mysql性能优化（6）：读写分离
查看>>
MySQL性能优化（八）--
查看>>
MySQL性能测试及调优中的死锁处理方法
查看>>
mysql性能测试工具选择 mysql软件测试
查看>>
mysql恢复root密码
查看>>
Mysql悲观锁
查看>>
MySQL慢查询-开启慢查询
查看>>