百度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学习总结（22）——Mysql数据库中制作千万级测试表
查看>>
Mysql学习总结（23）——MySQL统计函数和分组查询
查看>>
Mysql学习总结（24）——MySQL多表查询合并结果和内连接查询
查看>>
Mysql学习总结（25）——MySQL外连接查询
查看>>
Mysql学习总结（26）——MySQL子查询
查看>>
Mysql学习总结（27）——Mysql数据库字符串函数
查看>>
Mysql学习总结（28）——MySQL建表规范与常见问题
查看>>
Mysql学习总结（2）——Mysql超详细Window安装教程
查看>>
Mysql学习总结（30）——MySQL 索引详解大全
查看>>
Mysql学习总结（31）——MySql使用建议，尽量避免这些问题
查看>>
Mysql学习总结（33）——阿里云centos配置MySQL主从复制
查看>>
Mysql学习总结（37）——Mysql Limit 分页查询优化
查看>>
Mysql学习总结（38）——21条MySql性能优化经验
查看>>
Mysql学习总结（39）——49条MySql语句优化技巧
查看>>
Mysql学习总结（3）——MySql语句大全：创建、授权、查询、修改等
查看>>
Mysql学习总结（40）——MySql之Select用法汇总
查看>>
Mysql学习总结（41）——MySql数据库基本语句再体会
查看>>
Mysql学习总结（42）——MySql常用脚本大全
查看>>
Mysql学习总结（43）——MySQL主从复制详细配置
查看>>
Mysql学习总结（44）——Linux下如何实现mysql数据库每天自动备份定时备份
查看>>