Toggle navigation
波动预警图
By
长***离
2019-08-23 07:21:45
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
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);
