|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div style="width: 100%;height: 100%">
|
|
|
- <div id="charts"></div>
|
|
|
+ <div id="rpcharts"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -14,7 +14,7 @@ export default {
|
|
|
watch: {
|
|
|
drawData: {
|
|
|
handler(newValue, oldValue) {
|
|
|
- this.draw(newValue.times, newValue.realDatas, newValue.value, newValue.capacity)
|
|
|
+ this.draw(newValue.time,newValue.sj,newValue.cdq,newValue.dq,newValue.cap)
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
@@ -47,17 +47,20 @@ export default {
|
|
|
this.chart = null
|
|
|
},
|
|
|
methods: {
|
|
|
- draw(timeaxis, realpower, value, capacity) {
|
|
|
- this.chart = echarts.init(document.getElementById('charts'))
|
|
|
- this.chart.setOption({
|
|
|
+ draw(timeaxis, sj,cdq,dq,cap) {
|
|
|
+ console.log(sj)
|
|
|
+ console.log(cdq)
|
|
|
+ console.log(dq)
|
|
|
+ this.chart = echarts.init(document.getElementById('rpcharts'))
|
|
|
+ var option = {
|
|
|
backgroundColor: 'transparent',
|
|
|
title: {
|
|
|
top: 20,
|
|
|
- text: '超短期预测实时时刻查询',
|
|
|
+ text: '预测数据对比',
|
|
|
textStyle: {
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: 16,
|
|
|
- color: '#F1F1F3'
|
|
|
+ color: '#000000'
|
|
|
},
|
|
|
left: '1%'
|
|
|
},
|
|
@@ -65,7 +68,7 @@ export default {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
- color: '#57617B'
|
|
|
+ color: '#000000'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -75,11 +78,11 @@ export default {
|
|
|
itemWidth: 14,
|
|
|
itemHeight: 5,
|
|
|
itemGap: 13,
|
|
|
- data: ['实际功率', '第1时刻', '第2时刻', '第3时刻', '第4时刻', '第5时刻', '第6时刻', '第7时刻', '第8时刻', '第9时刻', '第10时刻', '第11时刻', '第12时刻', '第13时刻', '第14时刻', '第15时刻', '第16时刻'],
|
|
|
+ data: ['实际功率'],
|
|
|
right: '4%',
|
|
|
textStyle: {
|
|
|
fontSize: 12,
|
|
|
- color: '#F1F1F3'
|
|
|
+ color: '#000000'
|
|
|
}
|
|
|
},
|
|
|
dataZoom: [{
|
|
@@ -90,7 +93,7 @@ export default {
|
|
|
left: "15%",
|
|
|
right: "15%",
|
|
|
textStyle: {
|
|
|
- color: "#ffffff"
|
|
|
+ color: "#000000"
|
|
|
}
|
|
|
}, {
|
|
|
type: 'inside'
|
|
@@ -107,7 +110,7 @@ export default {
|
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#ffffff'
|
|
|
+ color: "#000000"
|
|
|
}
|
|
|
},
|
|
|
data: timeaxis
|
|
@@ -115,13 +118,12 @@ export default {
|
|
|
yAxis: [{
|
|
|
type: 'value',
|
|
|
name: '(MW)',
|
|
|
- max: capacity,
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: '#ffffff'
|
|
|
+ color: '#000000'
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
@@ -139,532 +141,57 @@ export default {
|
|
|
series: [{
|
|
|
name: '实际功率',
|
|
|
type: 'line',
|
|
|
- smooth: true,
|
|
|
+ smooth: false,
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 5,
|
|
|
showSymbol: false,
|
|
|
+ connectNulls:true,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 2
|
|
|
}
|
|
|
},
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
|
|
|
color: cc.sj,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderColor: 'rgba(219,50,51,0.2)',
|
|
|
borderWidth: 12
|
|
|
}
|
|
|
},
|
|
|
- data: realpower
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第1时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line1,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value1
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第2时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line2,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value2
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第3时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line3,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value3
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第4时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line4,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value4
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第5时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line5,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value5
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第6时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line6,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value6
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第7时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line7,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value7
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第8时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line8,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value8
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第9时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line9,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value9
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第10时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line10,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value10
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第11时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
-
|
|
|
- color: cc.line11,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value11
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第12时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
+ data: sj
|
|
|
+ }]
|
|
|
+ }
|
|
|
|
|
|
- color: cc.line12,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value12
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第13时刻',
|
|
|
+ option.yAxis[0].max = cap
|
|
|
+ option.legend.data = ['实际功率','超短期','短期']
|
|
|
+ option.series.push({
|
|
|
+ name: '超短期',
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 5,
|
|
|
showSymbol: false,
|
|
|
+ connectNulls:true,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 2
|
|
|
}
|
|
|
},
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
|
|
|
- color: cc.line13,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value13
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第14时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
- color: cc.line14,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ color: cc.cdq,
|
|
|
+ borderColor: 'rgba(219,50,51,0.2)',
|
|
|
borderWidth: 12
|
|
|
}
|
|
|
},
|
|
|
- data: value.value14
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第15时刻',
|
|
|
+ data: cdq
|
|
|
+ },{
|
|
|
+ name: '短期',
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
+ connectNulls:true,
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 5,
|
|
|
showSymbol: false,
|
|
@@ -673,71 +200,24 @@ export default {
|
|
|
width: 2
|
|
|
}
|
|
|
},
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
|
|
|
- color: cc.line15,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
- borderWidth: 12
|
|
|
- }
|
|
|
- },
|
|
|
- data: value.value15
|
|
|
- },
|
|
|
- {
|
|
|
- name: '第16时刻',
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 5,
|
|
|
- showSymbol: false,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2
|
|
|
- }
|
|
|
- },
|
|
|
- // areaStyle: {
|
|
|
- // normal: {
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: 'rgba(50,194,219, 0.3)'
|
|
|
- // }, {
|
|
|
- // offset: 0.8,
|
|
|
- // color: 'rgba(219, 50, 51, 0)'
|
|
|
- // }], false),
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- // shadowBlur: 10
|
|
|
- // }
|
|
|
- // },
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: cc.line16,
|
|
|
- borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ color: cc.dq,
|
|
|
+ borderColor: 'rgba(219,50,51,0.2)',
|
|
|
borderWidth: 12
|
|
|
}
|
|
|
},
|
|
|
- data: value.value16
|
|
|
- }]
|
|
|
- })
|
|
|
+ data: dq
|
|
|
+ }
|
|
|
+ )
|
|
|
+ this.chart.setOption(option,true)
|
|
|
},
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-#charts {
|
|
|
+#rpcharts {
|
|
|
width: 100%;
|
|
|
height: calc(80vh - 50px);
|
|
|
}
|