1.风向频次图展示调整

ipfcst/ipfcst-reportquery/src/main/frontend/views/realTimeQuery/nwp/chartsWind/index.vue

@@ -55,205 +55,75 @@
     },
     methods: {
       draw(nwpDatas,windTowerStatusDataDatas) {
+
         this.chart = echarts.init(document.getElementById('windCharts'))
-        //风向频率数组，按顺时针方向，上北下南左西右东，16方位
-        let wd10 =nwpDatas.wd10Integers;
-        let wd30 =nwpDatas.wd30Integers;
-        let wd50 = nwpDatas.wd50Integers;
-        let wd70 = nwpDatas.wd70Integers;
-        let wd80 = nwpDatas.wd80Integers;
-        let wd90 = nwpDatas.wd90Integers;
-        let wd100 = nwpDatas.wd100Integers;
-        let wd170 = nwpDatas.wd170Integers;
-        let wdInst10 = windTowerStatusDataDatas.wdInst10Integers;
-        let wdInst30 = windTowerStatusDataDatas.wdInst30Integers;
-        let wdInst50 = windTowerStatusDataDatas.wdInst50Integers;
-        let wdInst70 = windTowerStatusDataDatas.wdInst70Integers;
-        let wdInst80 = windTowerStatusDataDatas.wdInst80Integers;
-        let wdInst90 = windTowerStatusDataDatas.wdInst90Integers;
-        let wdInst100 = windTowerStatusDataDatas.wdInst100Integers;
-        let wdInst170 = windTowerStatusDataDatas.wdInst170Integers;
-        //风向 16方位
-        let nameList = ["北", "北北东", "北东", "东北东", "东", "东南东", "南东", "南南东", "南", "南南西", "南西", "西南西", "西", "西北西", "北西", "北北西"]
-        //数据
-        const wd10s = [];
-        const wd30s = [];
-        const wd50s = [];
-        const wd70s = [];
-        const wd80s = [];
-        const wd90s = [];
-        const wd100s = [];
-        const wd170s = [];
-        const wdInst10s = [];
-        const wdInst30s = [];
-        const wdInst50s = [];
-        const wdInst70s = [];
-        const wdInst80s = [];
-        const wdInst90s = [];
-        const wdInst100s = [];
-        const wdInst170s = [];
-        for (let i = 0; i <= nameList.length; i++) {
-          var jiaodu = (360 / nameList.length) * i;
-          wd10s.push([wd10[i], jiaodu]); //[径向，角度]
-          wd30s.push([wd30[i], jiaodu]); //[径向，角度]
-          wd50s.push([wd50[i], jiaodu]); //[径向，角度]
-          wd70s.push([wd70[i], jiaodu]); //[径向，角度]
-          wd80s.push([wd80[i], jiaodu]); //[径向，角度]
-          wd90s.push([wd90[i], jiaodu]); //[径向，角度]
-          wd100s.push([wd100[i], jiaodu]); //[径向，角度]
-          wd170s.push([wd170[i], jiaodu]); //[径向，角度]
-          wdInst10s.push([wdInst10[i], jiaodu]); //[径向，角度]
-          wdInst30s.push([wdInst30[i], jiaodu]); //[径向，角度]
-          wdInst50s.push([wdInst50[i], jiaodu]); //[径向，角度]
-          wdInst70s.push([wdInst70[i], jiaodu]); //[径向，角度]
-          wdInst80s.push([wdInst80[i], jiaodu]); //[径向，角度]
-          wdInst90s.push([wdInst90[i], jiaodu]); //[径向，角度]
-          wdInst100s.push([wdInst100[i], jiaodu]); //[径向，角度]
-          wdInst170s.push([wdInst170[i], jiaodu]); //[径向，角度]
-        }
+        var seriseData = [
+          {value:nwpDatas.wd10Integers,name:'nwp-10m'},
+          {value:nwpDatas.wd30Integers,name:'nwp-30m'},
+          {value:nwpDatas.wd50Integers,name:'nwp-50m'},
+          {value:nwpDatas.wd70Integers,name:'nwp-70m'},
+          {value:nwpDatas.wd80Integers,name:'nwp-80m'},
+          {value:nwpDatas.wd90Integers,name:'nwp-90m'},
+          {value:nwpDatas.wd100Integers,name:'nwp-100m'},
+          {value:nwpDatas.wd170Integers,name:'nwp-170m'},
+          {value:windTowerStatusDataDatas.wd10Integers,name:'cft-10m'},
+          {value:windTowerStatusDataDatas.wd30Integers,name:'cft-30m'},
+          {value:windTowerStatusDataDatas.wd50Integers,name:'cft-50m'},
+          {value:windTowerStatusDataDatas.wd70Integers,name:'cft-70m'},
+          {value:windTowerStatusDataDatas.wd80Integers,name:'cft-80m'},
+          {value:windTowerStatusDataDatas.wd90Integers,name:'cft-90m'},
+          {value:windTowerStatusDataDatas.wd100Integers,name:'cft-100m'},
+          {value:windTowerStatusDataDatas.wd170Integers,name:'cft-170m'}
+        ]
+        var max = Math.max(...nwpDatas.wd80Integers)+100;
+        console.log(Math.max.apply(null, nwpDatas));
         var option = {
           title: {
-            text: '风向玫瑰图',
-            subtext: '风向频率玫瑰图',
+            text: '风向频次图',
             textStyle: {
-              color: '#fff',
-            }
+              color: '#eeeeee'
+            },
+            top: '0%'
           },
           legend: {
-            textStyle: {
-              color: '#ffffff'
+            textStyle:{
+              color: 'white'
             },
-            icon: 'rect',
-            itemWidth: 14,
-            itemHeight: 5,
-            itemGap: 13,
-            inactiveColor: '#9C9C9C',
-            right: '20',
-            left: '120',
-            data: ['10米风向', "30米风向", "50米风向", "70米风向", "80米风向", "90米风向", "100米风向", "170米风向",'实时10米风向', "实时30米风向", "实时50米风向", "实时70米风向", "实时80米风向", "实时90米风向", "实时100米风向", "实时170米风向" ],
+            selected:{'nwp-10m':false,'cft-10m':false,'nwp-30m':false,'cft-30m':false,'nwp-50m':false,'cft-50m':false
+              ,'nwp-70m':false,'cft-70m':false,'nwp-90m':false,'cft-90m':false,'nwp-100m':false,'cft-100m':false}
           },
-          polar: {},
           tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-            },
+            position: ['80%', '30%'],
+            show: true
           },
-          angleAxis: {
-            type: 'value',
-            startAngle: 90,
-            min: 0, //最小刻度
-            max: 360, //最大刻度
-            interval: 360 / nameList.length, //间隔刻度 16方位间隔22.5，可改8方位
-            axisLabel: {
-              formatter: function (value, index) {
-                return nameList[index];
-              },
-              color: '#fff',
-            },
-          },
-          radiusAxis: {
-            axisLine: {
-              lineStyle: {
-                color: '#bbb',
-              },
-            }
+          radar: {
+            center: ['50%', '50%'],
+            indicator: [
+              {name: '北',max:max},
+              {name: '北北西',max:max},
+              {name: '北西',max:max},
+              {name: '西北西',max:max},
+              {name: '西',max:max},
+              {name: '西南西',max:max},
+              {name: '南西',max:max},
+              {name: '南南西',max:max},
+              {name: '南',max:max},
+              {name: '南南东',max:max},
+              {name: '南东',max:max},
+              {name: '东南东',max:max},
+              {name: '东',max:max},
+              {name: '东北东',max:max},
+              {name: '北东',max:max},
+              {name: '北北东',max:max}
+            ],
           },
-
           series: [
             {
-              coordinateSystem: 'polar',
-              name: '10米风向',
-              type: 'line',
-              data: wd10s,
-            },
-            {
-              coordinateSystem: 'polar',
-              name: '30米风向',
-              type: 'line',
-              data: wd30s,
-            },
-            {
-              coordinateSystem: 'polar',
-              name: '50米风向',
-              type: 'line',
-              data: wd50s,
-            },{
-              coordinateSystem: 'polar',
-              name: '70米风向',
-              type: 'line',
-              data: wd70s,
-            },{
-              coordinateSystem: 'polar',
-              name: '80米风向',
-              type: 'line',
-              data: wd80s,
-            },{
-              coordinateSystem: 'polar',
-              name: '90米风向',
-              type: 'line',
-              data: wd90s,
-            },{
-              coordinateSystem: 'polar',
-              name: '100米风向',
-              type: 'line',
-              data: wd100s,
-            },{
-              coordinateSystem: 'polar',
-              name: '50米风向',
-              type: 'line',
-              data: wd50s,
-            },{
-              coordinateSystem: 'polar',
-              name: '170米风向',
-              type: 'line',
-              data: wd170s,
-            },
-            {
-              coordinateSystem: 'polar',
-              name: '实时10米风向',
-              type: 'line',
-              data: wdInst10s,
-            },
-            {
-              coordinateSystem: 'polar',
-              name: '实时30米风向',
-              type: 'line',
-              data: wdInst30s,
-            },
-            {
-              coordinateSystem: 'polar',
-              name: '实时50米风向',
-              type: 'line',
-              data: wdInst50s,
-            },{
-              coordinateSystem: 'polar',
-              name: '实时70米风向',
-              type: 'line',
-              data: wdInst70s,
-            },{
-              coordinateSystem: 'polar',
-              name: '实时80米风向',
-              type: 'line',
-              data: wdInst80s,
-            },{
-              coordinateSystem: 'polar',
-              name: '实时90米风向',
-              type: 'line',
-              data: wdInst90s,
-            },{
-              coordinateSystem: 'polar',
-              name: '实时100米风向',
-              type: 'line',
-              data: wdInst100s,
-            },
-            {
-              coordinateSystem: 'polar',
-              name: '实时170米风向',
-              type: 'line',
-              data: wdInst170s,
-            },
-          ],
+              name: '风向分布',
+              type: 'radar',
+              data: seriseData
+            }
+          ]
         };
         this.chart.setOption(option,true)
       },