百度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);
        }

图例：