百度echart 使用示例

折线图：

 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<obj_disk.length;i++){                            var total=obj_disk[i].total;                            var used = obj_disk[i].used;                            var freed = obj_disk[i].free;                            used=parseFloat(used.replace('G',''));                            freed=parseFloat(freed.replace('G',''));                            total=parseFloat(total.replace('G',''));                            ds_disk.push(obj_disk[i].name);                            ds_use.push(used);                            ds_free.push(freed);                            alltotal+=total;                            alluse+=used;                            allfree+=freed;                        }                        var subtitle ='总计：{0}G 已用：{1}G 空闲：{2}G'.format(alltotal.toFixed(2),alluse.toFixed(2),allfree.toFixed(2));                        chart_disk(ds_disk,ds_use,ds_free,subtitle);                        createDisk = true;                    }                })            },1000);

柱状图堆积百分比：

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 + '<br/>'                               + params[0].seriesName + ' : ' + params[0].value + '<br/>'                               + 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);        }

图例：