echarts 使用示例

var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        y:'middle',
        /*formatter:function () {
            debugger;
        },*/
        data:[{name:'已用335个',icon:'pin'},
              {name:'可用310个',icon:'arrow'}]
    },
    series: [
        {
            name:'vCPU',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            /*silent:true,*/
            markPoint:{
                label:{
                    normal:{
                        show:false
                    },
                    emphasis:{
                        show:false
                    }
                }
            },
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, 
                 name:'已用335个',
                 selected:false,
                 labelLine:{
                    normal:{
                        show:true
                    }
                 },
                 itemStyle:{
                    normal:{
                        color:'grey'
                    }
                 }
                },
                {value:310, 
                 name:'可用310个',
                 label:{
                    normal:{
                        show:true,
                        fontSize:16,
                        fontWeight:'bold'
                    },
                    emphasis:{
                        show:true
                    }
                 },
                 labelLine:{
                    normal:{
                        show:true
                    }
                 },
                 itemStyle:{
                    normal:{
                        color:'green'
                    }
                 }
             },
            ]
        }
    ]
};

var resource = echarts.init($('#resource')[0]);
resource.setOption(option);

---

function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(),
now.getMonth() + 1,
now.getDate()].join('/'),
Math.round(value)
]
}
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}

option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' +
(date.getMonth() + 1) + '/' +
date.getFullYear() + ' : ' +
params.value[1];
}/*,
axisPointer: {
animation: false
}*/
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}]
};

/*setInterval(function () {

for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}

myChart.setOption({
series: [{
data: data
}]
});
}, 1000);*/

------

function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(),
now.getMonth() + 1,
now.getDate()].join('/'),
Math.round(value)
]
}
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}

option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
/* formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' +
(date.getMonth() + 1) + '/' +
date.getFullYear() + ' : ' +
params.value[1];
}*//*,
axisPointer: {
animation: false
}*/
},
xAxis: {
type: 'time'/*,
splitLine: {
show: false
}*/,
interval:1000 * 3600 * 24
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: [ ['2017/9/7 10:30',2],
['2017/9/7 12:30',5],
['2017/9/7 24:00',9],
['2017/9/8 10:30',12],
['2017/9/8 12:30',15],
['2017/9/8 24:00',9]
]
}]
};

/*setInterval(function () {

for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}

myChart.setOption({
series: [{
data: data
}]
});
}, 1000);*/