ID
15
配置代码
const option = {
backgroundColor: 'transparent',
title: {
text: '接口变化监控',
subtext: '日变化趋势分析',
left: 'center',
top: '3%',
textStyle: {
fontSize: 22,
fontWeight: 'bold',
color: '#F1F1F3'
},
subtextStyle: {
fontSize: 14,
color: 'rgba(241,241,243,0.8)'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B',
width: 2,
type: 'dashed'
}
},
backgroundColor: 'rgba(10,22,81,0.95)',
borderColor: '#00a1ea',
borderWidth: 1,
textStyle: {
fontSize: 13,
color: '#F1F1F3'
},
extraCssText: 'box-shadow: 0 6px 20px rgba(0,0,0,0.4); border-radius: 10px;'
},
legend: {
icon: 'roundRect',
itemWidth: 16,
itemHeight: 6,
itemGap: 18,
data: ['接口增加量', '接口减少量', '接口变化量'],
top: '12%',
left: 'center',
textStyle: {
fontSize: 13,
color: '#F1F1F3',
fontWeight: 500
},
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.3)'
}
},
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 50,
realtime: true,
height: 20,
bottom: '8%',
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c0,0.8-0.4,1.6-1,1.6c-0.2,0-0.4-0.1-0.5-0.2l-1,1.3c0.4,0.4,1,0.7,1.6,0.7c0.9,0,1.6-0.7,1.6-1.6V11.9z M17.3,11.9v-1.3H15.9v1.3c0,0.8-0.4,1.6-1,1.6c-0.2,0-0.4-0.1-0.5-0.2l-1,1.3c0.4,0.4,1,0.7,1.6,0.7c0.9,0,1.6-0.7,1.6-1.6V11.9z',
handleSize: '110%',
handleStyle: {
color: '#00a1ea',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
fillerColor: 'rgba(255,255,255,0.1)',
borderColor: '#57617B',
backgroundColor: 'rgba(255,255,255,0.05)',
textStyle: {
color: '#F1F1F3'
}
}, {
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 50
}],
grid: {
left: '3%',
right: '3%',
bottom: '18%',
top: '25%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
axisLine: {
lineStyle: {
color: '#57617B',
width: 2
}
},
axisLabel: {
color: "rgba(255,255,255,.8)",
fontSize: 11,
fontWeight: 500
},
axisTick: {
lineStyle: {
color: '#57617B',
width: 1.5
}
},
splitLine: {
show: false
}
}],
yAxis: [{
type: 'value',
name: '接口数量',
nameTextStyle: {
color: '#F1F1F3',
fontSize: 13,
fontWeight: 500
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#57617B',
width: 2
}
},
axisLabel: {
margin: 12,
color: "rgba(255,255,255,.7)",
fontSize: 12,
fontWeight: 500
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.08)",
type: 'dashed'
}
}
}],
series: [{
name: '接口增加量',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 3,
color: '#00ff88',
shadowColor: 'rgba(0,255,136,0.4)',
shadowBlur: 8,
shadowOffsetY: 4
}
},
itemStyle: {
normal: {
color: '#00ff88',
borderColor: 'rgba(255,255,255,0.8)',
borderWidth: 1
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: 'rgba(0,255,136,0.25)'},
{offset: 1, color: 'rgba(0,255,136,0)'}
]
}
}
},
data: [50, 52, 52, 52, 52, 58, 52, 55, 48, 52, 52, 52, 54, 52, 52, 52, 50, 52, 52, 52, 52, 52, 55, 52, 52, 49, 52, 52, 52, 52, 52],
markLine: {
symbol: ['none', 'none'],
data: [{
name: '阈值54',
yAxis: 54,
label: {
show: true,
position: 'end',
backgroundColor: 'rgba(255,93,29,0.9)',
borderRadius: 4,
padding: [6, 10],
color: '#fff',
fontSize: 11,
fontWeight: 600,
formatter: '{b}'
},
lineStyle: {
normal: {
width: 3,
color: "#FF5D1D",
type: 'dashed'
}
}
}]
}
}, {
name: '接口减少量',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 3,
color: '#00a1ea',
shadowColor: 'rgba(0,161,234,0.4)',
shadowBlur: 8,
shadowOffsetY: 4
}
},
itemStyle: {
normal: {
color: '#00a1ea',
borderColor: 'rgba(255,255,255,0.8)',
borderWidth: 1
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: 'rgba(0,161,234,0.25)'},
{offset: 1, color: 'rgba(0,161,234,0)'}
]
}
}
},
data: [30, 32, 32, 32, 32, 38, 32, 33, 36, 32, 32, 32, 34, 32, 32, 32, 39, 32, 32, 32, 32, 32, 33, 32, 32, 23, 32, 32, 32, 32, 32],
markLine: {
symbol: ['none', 'none'],
data: [{
name: '阈值30',
yAxis: 30,
label: {
show: true,
position: 'end',
backgroundColor: 'rgba(255,93,29,0.9)',
borderRadius: 4,
padding: [6, 10],
color: '#fff',
fontSize: 11,
fontWeight: 600,
formatter: '{b}'
},
lineStyle: {
normal: {
width: 3,
color: "#FF5D1D",
type: 'dashed'
}
}
}]
}
}, {
name: '接口变化量',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
width: 3,
color: '#ffeb3b',
shadowColor: 'rgba(255,235,59,0.4)',
shadowBlur: 8,
shadowOffsetY: 4
}
},
itemStyle: {
normal: {
color: '#ffeb3b',
borderColor: 'rgba(255,255,255,0.8)',
borderWidth: 1
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: 'rgba(255,235,59,0.25)'},
{offset: 1, color: 'rgba(255,235,59,0)'}
]
}
}
},
data: [10, 11, 12, 13, 11, 9, 11, 12, 13, 11, 9, 8, 10, 12, 13, 11, 9, 8, 10, 12, 10, 13, 11, 9, 11, 12, 13, 11, 9, 8, 10],
markLine: {
symbol: ['none', 'none'],
data: [{
name: '阈值10',
yAxis: 10,
label: {
show: true,
position: 'end',
backgroundColor: 'rgba(255,93,29,0.9)',
borderRadius: 4,
padding: [6, 10],
color: '#fff',
fontSize: 11,
fontWeight: 600,
formatter: '{b}'
},
lineStyle: {
normal: {
width: 3,
color: "#FF5D1D",
type: 'dashed'
}
}
}]
}
}]
};
完整示例代码
相关文件下载地址
