|
@@ -0,0 +1,749 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%;height: 100%" >
|
|
|
+ <div id="charts"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import resize from '../../../../components/Charts/mixins/resize'
|
|
|
+ import echarts from 'echarts'
|
|
|
+ import cc from '../../../curvecolors'
|
|
|
+ export default {
|
|
|
+ mixins: [resize],
|
|
|
+ watch: {
|
|
|
+ drawData:{
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.draw(newValue.times, newValue.realDatas,newValue.value,newValue.capacity)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ resizeKey:function(newQuestion, oldQuestion){
|
|
|
+ if(this.chart !=null){
|
|
|
+ this.chart.resize();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ drawData:{
|
|
|
+ type:Object,
|
|
|
+ },
|
|
|
+ resizeKey:{
|
|
|
+ type:Number
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ lineColor:'',
|
|
|
+ chart: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if(sessionStorage.getItem('styleSwitch') === 'blue'){
|
|
|
+ this.lineColor = 'white'
|
|
|
+ }else{
|
|
|
+ this.lineColor = '#3b3b3b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (!this.chart) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.chart.dispose()
|
|
|
+ this.chart = null
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ draw(timeaxis,realpower,value,capacity) {
|
|
|
+ this.chart = echarts.init(document.getElementById('charts'))
|
|
|
+ this.chart.setOption({
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ title: {
|
|
|
+ top: 20,
|
|
|
+ text: '超短期预测实时时刻查询',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ fontSize: 16,
|
|
|
+ color: this.lineColor
|
|
|
+ },
|
|
|
+ left: '1%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 20,
|
|
|
+ icon: 'rect',
|
|
|
+ itemWidth: 14,
|
|
|
+ itemHeight: 5,
|
|
|
+ itemGap: 13,
|
|
|
+ data: ['实际功率','第1时刻','第2时刻','第3时刻','第4时刻','第5时刻','第6时刻','第7时刻','第8时刻','第9时刻','第10时刻','第11时刻','第12时刻','第13时刻','第14时刻','第15时刻','第16时刻'],
|
|
|
+ right: '4%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ show: true,
|
|
|
+ realtime: true,
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ left:"15%",
|
|
|
+ right:"15%",
|
|
|
+ textStyle:{
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ type: 'inside'
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 100,
|
|
|
+ left: '2%',
|
|
|
+ right: '2%',
|
|
|
+ bottom: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: timeaxis
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ name: '(MW)',
|
|
|
+ max:capacity,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: this.lineColor
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#57617B'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '实际功率',
|
|
|
+ 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.sj,
|
|
|
+ borderColor: 'rgba(50,194,219,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: {
|
|
|
+
|
|
|
+ color: cc.line12,
|
|
|
+ borderColor: 'rgba(50,194,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: value.value12
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '第13时刻',
|
|
|
+ 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.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)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: value.value14
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '第15时刻',
|
|
|
+ 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.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)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: value.value16
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+ #charts{
|
|
|
+ width: 100%;
|
|
|
+ height:calc(80vh - 50px);
|
|
|
+ }
|
|
|
+</style>
|