var data = [
[20,20,20,20],
[30,35,31,37],
[10,10,10,10],
[20,29,24,28],
[10,10,10,10],
[20,30,24,40],
[10,10,10,10],
[50,40,40,30],
]
option = {
backgroundColor: '#000',
color: ['#59e7eb', '#38e27f', '#2f92ed', '#d0cc6f', '#e47f2e'],
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: {
type: 'shadow',
textStyle: {
// color: '#05294D',
},
},
},
legend: {
width:'55%',
itemWidth: 15,
itemHeight: 10,
itemGap: 30,
padding: [2, 2, 0, 0],
textStyle: {
color: '#e0e0e0',
},
icon: "roundRect",
// data:['cpu使用率', '内存使用率', '磁盘使用率', '网络带宽', 'cpu使用率max', '内存使用率max', '磁盘使用率max', '网络带宽max']
},
grid: {
top: '12%',
left: '7%',
right: '7%',
bottom: '8%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#676C7B',
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: '#d1e6eb',
margin: 15,
},
},
axisTick: {
show: false,
},
data: ['a', 'b', 'c', 'd'],
}
],
yAxis: [
{
type: 'value',
nameTextStyle: {
color: '#fff',
},
name: '%',
// max: 200,
min: 0,
// interval: 50,
splitNumber: 7,
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#676C7B',
},
},
axisLine: {
show: true,
lineStyle: {
color: '#676C7B',
},
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
},
],
series: [
// 国家职业资格
{
name: 'cpu使用率', // bar图的顶部
type: 'pictorialBar',
symbolSize: [13, 1],
symbolOffset: [-47, -5],
z: 12,
itemStyle: {
normal: {
color: 'rgba(0, 168, 255,1)',
},
},
symbolRepeat:true,
data: data[0],
z:10,
// label:{
// show:true,
// formatter:'{c}',
// position: 'top',
// distance:5,
// }
},
{
name: 'cpu使用率max', //这个是Bar图
type: 'bar',
itemStyle: {
color: 'rgba(0, 168, 255,.1)'
},
z: 16,
silent: true,
barWidth: 26,
// barGap: '-100%', // Make series be overlap
data: data[1],
},
// 拥有荣誉称号
{
name: '磁盘使用率', // bar图的顶部
type: 'pictorialBar',
symbolSize: [13, 1],
symbolOffset: [-16, -5],
z: 12,
itemStyle: {
normal: {
color: 'rgba(240, 208, 60, 1)',
},
},
symbolRepeat:true,
data: data[2],
},
{
name: '磁盘使用率max', //这个是Bar图
type: 'bar',
itemStyle: {
color: 'rgba(240, 208, 60, 0.1)'
},
z: 16,
silent: true,
barWidth: 26,
data: data[3],
},
// 突出贡献高级专家
{
name: '内存使用率', // bar图的顶部
type: 'pictorialBar',
symbolSize: [13, 1],
symbolOffset: [16, -5],
z: 12,
itemStyle: {
normal: {
color: "rgba(0,229,255, 1)",
},
},
// symbolPosition: 'end',
symbolRepeat:true,
data: data[4],
},
{
name: '内存使用率max', //这个是Bar图
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(0, 229, 255, 0.1)'
},
},
z: 16,
silent: true,
barWidth: 26,
data: data[5],
},
// 立功受奖
{
name: '网络带宽', // bar图的顶部
type: 'pictorialBar',
symbolSize: [13, 1],
symbolOffset: [47, -5],
z: 12,
itemStyle: {
normal: {
color: "rgba(0,255,182, 1)",
},
},
// symbolPosition: 'end',
symbolRepeat:true,
data: data[6],
},
{
name: '网络带宽max', //这个是Bar图
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(0,255,182, .1)'
},
},
z: 16,
silent: true,
barWidth: 26,
// barGap: '-100%', // Make series be overlap
data: data[7],
},
],
};