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);*/