波动预警图echarts 折线配置项内容和展示
配置项如下
var eventWaveData = [{
"level": "正常",
"real": 1,
"up": 1,
"pointTime": "2019-07-01 15:00:00",
"down": 1,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-02 06:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 1,
"up": 2.621320343559643,
"pointTime": "2019-07-02 21:00:00",
"down": -1.6213203435596428,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 2.398717474235544,
"pointTime": "2019-07-03 12:00:00",
"down": -1.0653841409022111,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 1,
"up": 2.232050807568877,
"pointTime": "2019-07-04 03:00:00",
"down": -1.2320508075688772,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 1,
"up": 2.2431676725154985,
"pointTime": "2019-07-04 18:00:00",
"down": -1.0431676725154984,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 2.2158600051496333,
"pointTime": "2019-07-05 09:00:00",
"down": -0.8825266718163002,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 1,
"up": 2.1749960229031178,
"pointTime": "2019-07-06 00:00:00",
"down": -1.032138880045975,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 2.177647508520297,
"pointTime": "2019-07-06 15:00:00",
"down": -0.9276475085202969,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 2.1366943856397453,
"pointTime": "2019-07-07 06:00:00",
"down": -1.0255832745286342,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 2.08113883008419,
"pointTime": "2019-07-07 21:00:00",
"down": -1.0811388300841898,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.9491933384829667,
"pointTime": "2019-07-08 12:00:00",
"down": -1.149193338482967,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.9491933384829667,
"pointTime": "2019-07-09 03:00:00",
"down": -1.149193338482967,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.7491376746189438,
"pointTime": "2019-07-09 18:00:00",
"down": -1.1491376746189437,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.7491376746189438,
"pointTime": "2019-07-10 09:00:00",
"down": -1.1491376746189437,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.464911064067352,
"pointTime": "2019-07-11 00:00:00",
"down": -1.064911064067352,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.0486832980505139,
"pointTime": "2019-07-11 15:00:00",
"down": -0.8486832980505138,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 1.0486832980505139,
"pointTime": "2019-07-12 06:00:00",
"down": -0.8486832980505138,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-12 21:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-13 12:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-14 03:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-14 18:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-15 09:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-16 00:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-16 15:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-17 06:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-17 21:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-18 12:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-19 03:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-19 18:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-20 09:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-21 00:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-21 15:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-22 06:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-22 21:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-23 12:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-24 03:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-24 18:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-25 09:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-26 00:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-26 15:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-27 06:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-27 21:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-28 12:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-29 03:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-29 18:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-30 09:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
},
{
"level": "正常",
"real": 0,
"up": 0,
"pointTime": "2019-07-31 00:00:00",
"down": 0,
"lowerlimit": 0,
"upperlimit": 100
}
]
var data = eventWaveData.map(v => {
return {
value: v.real,
date: v.pointTime,
l: v.down,
u: v.up
}
})
var base = -data.reduce(function(min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
console.log(base)
var option = {
backgroundColor: 'white',
color: ['#4ECB73', '#FBD338'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false
},
formatter: function(params) {
return params[2].name + '<br />' + params[2].value
}
},
grid: {
left: '3%',
right: '3%',
bottom: '1px',
top: '5px',
containLabel: true
},
xAxis: [{
type: 'category',
data: data.map(function(item) {
return item.date
}),
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
nameTextStyle: {
fontSize: 14
},
axisLabel: {
// interval: 0,
formatter: function(value) {
const rs = value
.split(' ')
.reverse()
.join('\n')
return rs
}
}
}],
yAxis: [{
show: true,
type: 'value',
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#485465'
},
formatter: function(val) {
return (val - base);
}
},
axisLine: {
show: false
},
splitLine: {
show: true
}
}],
series: [{
name: 'L',
type: 'line',
data: data.map(function(item) {
return item.l + base;
}),
lineStyle: {
normal: {
opacity: 0
}
},
stack: 'confidence-band',
symbol: 'none'
}, {
name: 'U',
type: 'line',
data: data.map(function(item) {
return item.u - item.l;
}),
lineStyle: {
normal: {
opacity: 0
}
},
areaStyle: {
normal: {
color: 'rgb(236,246,230)'
}
},
stack: 'confidence-band',
symbol: 'none'
},
{
type: 'line',
data: data.map(function(item) {
return item.value + base;
}),
hoverAnimation: false,
symbolSize: 6,
itemStyle: {
normal: {
color: 'rgb(73,246,240)'
}
},
showSymbol: false
}
]
}
myChart.setOption(option);
截图如下
