百度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学习总结（63）——Mysql数据库架构方案选择与分析
查看>>
Mysql学习总结（64）——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结（65）——项目实战中常用SQL实践总结
查看>>
Mysql学习总结（66）——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结（67）——MYSQL慢查询日志
查看>>
Mysql学习总结（68）——MYSQL统计每天、每周、每月、每年数据 SQL 总结
查看>>
Mysql学习总结（69）——Mysql EXPLAIN 命令使用总结
查看>>
Mysql学习总结（6）——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结（70）——MySQL 优化实施方案
查看>>
Mysql学习总结（71）——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结（71）——数据库介绍（MySQL安装 体系结构、基本管理）再回顾
查看>>
Mysql学习总结（72）——MySQL 开发者开发，设计规范再总结
查看>>
Mysql学习总结（73）——MySQL 查询A表存在B表不存在的数据SQL总结
查看>>
Mysql学习总结（74）——慢SQL！压垮团队的最后一根稻草！
查看>>
Mysql学习总结（75）——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结（76）——MySQL执行计划（explain）结果含义总结
查看>>
Mysql学习总结（77）——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结（78）——MySQL各版本差异整理
查看>>
Mysql学习总结（79）——MySQL常用函数总结
查看>>
Mysql学习总结（7）——MySql索引原理与使用大全
查看>>