|
@@ -30,6 +30,7 @@
|
|
|
|
|
|
<script>
|
|
|
import {chartsResize, weatherLineOption} from '../echarts-data'
|
|
|
+import * as echarts from "echarts";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -37,8 +38,209 @@ export default {
|
|
|
screenHeight: window.innerHeight,
|
|
|
weatherChart: null,
|
|
|
fullChart: null,
|
|
|
- chartData: {},
|
|
|
- type:'wind'
|
|
|
+ gfChartData: [],
|
|
|
+ windChartData: [],
|
|
|
+ type:'wind',
|
|
|
+ lineStyle: [
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(219,50,51,0.3)'
|
|
|
+ }, {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(219, 50, 51, 0)'
|
|
|
+ }], false),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(219,50,51)',
|
|
|
+ borderColor: 'rgba(219,50,51,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(219,196,50,0.3)'
|
|
|
+ }, {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(219, 50, 51, 0)'
|
|
|
+ }], false),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(219,196,50)',
|
|
|
+ borderColor: 'rgba(219,196,50,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(101,219,50,0.3)'
|
|
|
+ }, {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(219, 50, 51, 0)'
|
|
|
+ }], false),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(101,219,50)',
|
|
|
+ borderColor: 'rgba(101,219,50,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50,219,171,0.3)'
|
|
|
+ }, {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(219, 50, 51, 0)'
|
|
|
+ }], false),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(50,219,171)',
|
|
|
+ borderColor: 'rgba(50,219,171,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50,118,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: 'rgb(50,118,219)',
|
|
|
+ borderColor: 'rgba(50,118,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(140,50,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: 'rgb(140,50,219)',
|
|
|
+ borderColor: 'rgba(140,50,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(202,50,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: 'rgb(202,50,219)',
|
|
|
+ borderColor: 'rgba(202,50,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(50,199,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: 'rgb(50,199,219)',
|
|
|
+ borderColor: 'rgba(50,199,219,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(219,143,50,0.3)'
|
|
|
+ }, {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(219, 50, 51, 0)'
|
|
|
+ }], false),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgb(219,143,50)',
|
|
|
+ borderColor: 'rgba(219,143,50,0.2)',
|
|
|
+ borderWidth: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
@@ -48,8 +250,9 @@ export default {
|
|
|
params: {
|
|
|
// immediate: true,// 第一次立即监听
|
|
|
handler(value) {
|
|
|
- this.chartData = value
|
|
|
- this.setOptions(this.chartData)
|
|
|
+ this.gfChartData = value.gf
|
|
|
+ this.windChartData = value.wind
|
|
|
+ this.setOptions()
|
|
|
}
|
|
|
}
|
|
|
},
|
|
@@ -85,7 +288,7 @@ export default {
|
|
|
this.type = 'wind'
|
|
|
}
|
|
|
this.weatherChart = this.$echarts.init(document.getElementById('weatherChart'));
|
|
|
- this.setOptions(this.chartData)
|
|
|
+ this.setOptions()
|
|
|
},
|
|
|
openFull(){
|
|
|
const _this = this
|
|
@@ -93,17 +296,40 @@ export default {
|
|
|
_this.$nextTick(() => {
|
|
|
const chartFul = this.$refs.fullChart
|
|
|
if (chartFul) {
|
|
|
- _this.setFullOptions(_this.chartData)// 画图
|
|
|
+ _this.setFullOptions()// 画图
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- setOptions({realList,dqList,cdqList} = {}) {
|
|
|
- const _this = this
|
|
|
+ setOptions() {
|
|
|
let option = JSON.parse(JSON.stringify(weatherLineOption))
|
|
|
- option.series[0].data = realList
|
|
|
- option.series[1].data = dqList
|
|
|
- option.series[2].data = cdqList
|
|
|
- option.series[3].data = cdqList
|
|
|
+ if(sessionStorage.getItem('screen-weather-type')){
|
|
|
+ if (sessionStorage.getItem('screen-weather-type').includes('wind')){
|
|
|
+ option.legend.data = ['平均轮毂风速']
|
|
|
+ option.yAxis[0].name='m/s'
|
|
|
+ option.series=[{
|
|
|
+ name:'平均轮毂风速',
|
|
|
+ type:'line',
|
|
|
+ data: this.windChartData.map(_=>_.value)
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ option.legend.data = ['平均总辐射']
|
|
|
+ option.yAxis[0].name='W/㎡'
|
|
|
+ option.series=[{
|
|
|
+ name:'平均总辐射',
|
|
|
+ type:'line',
|
|
|
+ data: this.gfChartData.map(_=>_.value)
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ option.legend.data = ['平均轮毂风速']
|
|
|
+ option.yAxis[0].name='m/s'
|
|
|
+ option.series=[{
|
|
|
+ name:'平均轮毂风速',
|
|
|
+ type:'line',
|
|
|
+ data: this.windChartData.map(_=>_.value)
|
|
|
+ }]
|
|
|
+ }
|
|
|
this.weatherChart.setOption(option, true)
|
|
|
window.addEventListener("resize", this.chartsResize);
|
|
|
},
|
|
@@ -112,14 +338,64 @@ export default {
|
|
|
this.weatherChart.resize();
|
|
|
}
|
|
|
},
|
|
|
- setFullOptions({realList,dqList,cdqList} = {}) {
|
|
|
- this.fullChart = this.$echarts.init(document.getElementById('main'));
|
|
|
+ setFullOptions() {
|
|
|
+ // 先调用后端获取每个场站具体曲线
|
|
|
+ let weatherType
|
|
|
+ if(sessionStorage.getItem('screen-weather-type')){
|
|
|
+ weatherType = sessionStorage.getItem('screen-weather-type')
|
|
|
+ }else{
|
|
|
+ weatherType = 'wind'
|
|
|
+ }
|
|
|
+ let queryParams = {
|
|
|
+ "weatherType": weatherType
|
|
|
+ }
|
|
|
let option = JSON.parse(JSON.stringify(weatherLineOption))
|
|
|
- option.series[0].data = realList
|
|
|
- option.series[1].data = dqList
|
|
|
- option.series[2].data = cdqList
|
|
|
- option.series[3].data = cdqList
|
|
|
- this.fullChart.setOption(option, true)
|
|
|
+ let index = 0;
|
|
|
+ this.$axios({url: '/largeScreenController/forecastNwpFull', method: 'get',params: queryParams}).then(response => {
|
|
|
+ let stationObj = response.data
|
|
|
+ for (let key in stationObj) {
|
|
|
+ for (let i = 0; i < stationObj[key].length; i++) {
|
|
|
+ stationObj[key][i] = stationObj[key][i] == -99 ? null : stationObj[key][i]
|
|
|
+ }
|
|
|
+ option.legend.data.push(key)
|
|
|
+
|
|
|
+ let sValue = {
|
|
|
+ name: key,
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 0,
|
|
|
+ smooth: false,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 5,
|
|
|
+ showSymbol: false,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: this.lineStyle[index].itemStyle,
|
|
|
+ data: stationObj[key]
|
|
|
+ }
|
|
|
+ option.series.push(sValue)
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(sessionStorage.getItem('screen-weather-type')){
|
|
|
+ if (sessionStorage.getItem('screen-weather-type').includes('wind')){
|
|
|
+ option.yAxis[0].name='m/s'
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ option.yAxis[0].name='W/㎡'
|
|
|
+
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ option.yAxis[0].name='m/s'
|
|
|
+ }
|
|
|
+ this.fullChart = this.$echarts.init(document.getElementById('main'));
|
|
|
+ this.fullChart.setOption(option, true)
|
|
|
+ }).catch(err => {
|
|
|
+ })
|
|
|
+ console.log(option)
|
|
|
+
|
|
|
},
|
|
|
/**
|
|
|
* 切换气象预测按钮
|
|
@@ -132,6 +408,7 @@ export default {
|
|
|
activeItem.classList.add('btu-no-checked')
|
|
|
clickItem.classList.remove('btu-no-checked')
|
|
|
clickItem.classList.add('btu-checked')
|
|
|
+ this.setOptions()
|
|
|
},
|
|
|
}
|
|
|
}
|