[完善] 根据年月查询 更新echarts视图

src/app/statistic-analysis/state/page-two-time/page-two-time.component.html

@@ -11,7 +11,7 @@
   <div class="header">
 
     <div class="queryField" *ngIf="!isQuery && echartsData.statefulInspectionToggle">
-      <mat-radio-group [(ngModel)]="selectType">
+      <mat-radio-group [(ngModel)]="selectType" (change)='changeTime($event)'>
         <mat-radio-button value="month">月</mat-radio-button>
         <mat-radio-button value="year" style="margin-left: 10px;">年</mat-radio-button>
       </mat-radio-group>

src/app/statistic-analysis/state/page-two-time/page-two-time.component.ts

@@ -46,12 +46,18 @@ export class PageTwoTimeComponent implements OnInit {
 
   selectType:string = 'month'; //选择当前的 查询类型 按月/年
 
+  changeTime (e) {
+    let data = e.value
+    this.appEcharts.changeTime(data)
+  }
+
   //查询数据
   years:any = []
   selectMonth:any = [1,2,3,4,5,6,7,8,9,10,11,12]
   tiaoshiPao:any
   datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
   datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
+
   //气泡提示数据获取
   bianli(){
     var arrshuzu='[';
@@ -61,8 +67,6 @@ export class PageTwoTimeComponent implements OnInit {
     arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
     arrshuzu+=']'
     this.tiaoshiPao=JSON.parse(arrshuzu)
-    console.log(this.tiaoshiPao)
-    //return tishiPao
   }
 
   //日期初始化
@@ -137,9 +141,11 @@ export class echartsComponent implements OnInit {
   constructor(public snackBar: MatSnackBar,private adapter: DateAdapter<any>,public echartsData:EchartsDataService) { }
 
   tiaoshiPao:any
-  datayuey=[270, 253, 244, 199, 189, 173, 160, 198,200]
+  datayuey=[270, 253, 244, 199, 189, 173, 160, 198, 200]
   datayuex=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月']
-  //气泡提示数据获取
+  dataYearX = ['2020','2020']
+  dataYearY = [1078, 936]
+    //气泡提示数据获取
   bianli(){
     var arrshuzu='[';
     for(var i=0;i<this.datayuey.length;i++){
@@ -148,8 +154,6 @@ export class echartsComponent implements OnInit {
     arrshuzu=arrshuzu.substring(0,arrshuzu.length-1)
     arrshuzu+=']'
     this.tiaoshiPao=JSON.parse(arrshuzu)
-    console.log(this.tiaoshiPao)
-    //return tishiPao
   }
   ngOnInit(): void {
     window.setTimeout(()=>{
@@ -178,15 +182,47 @@ export class echartsComponent implements OnInit {
     this.sixExample.dispose()
   }
 
+  changeTime (e) {
+    this.oneExample.clear()
+    this.oneExample.dispose()
+    this.twoExample.clear()
+    this.twoExample.dispose()
+    this.threeExample.clear()
+    this.threeExample.dispose()
+    this.fourExample.clear()
+    this.fourExample.dispose()
+    this.fiveExample.clear()
+    this.fiveExample.dispose()
+    this.sixExample.clear()
+    this.sixExample.dispose()
+
+    if (e=='year') {
+      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.dataYearY,this.dataYearX)
+      this.oneInit(this.dataYearX,this.dataYearY)
+      this.twoInit(this.dataYearX,this.dataYearY)
+      this.threeInit(this.dataYearX,this.dataYearY)
+      this.fourInit(this.dataYearX,this.dataYearY)
+      this.fiveInit(this.dataYearX,this.dataYearY)
+      this.sixInit(this.dataYearX,this.dataYearY)
+    } else {
+      this.tiaoshiPao=this.echartsData.qipao(this.tiaoshiPao,this.datayuey,this.datayuex)
+      this.oneInit()
+      this.twoInit()
+      this.threeInit()
+      this.fourInit()
+      this.fiveInit()
+      this.sixInit()
+    }
+  }
+
   oneExample:any;
-  oneInit () {
+  oneInit (X=this.datayuex, Y=this.datayuey) {
     this.oneExample = echarts.init(document.getElementById('one'),'walden');
     var option = {
       grid: {
         top: 50,
         left:40,
         right: 20,
-        
       },
       tooltip: {
         trigger: 'axis',
@@ -214,7 +250,7 @@ export class echartsComponent implements OnInit {
       // x轴
       xAxis: {
         type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+        data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
@@ -251,11 +287,10 @@ export class echartsComponent implements OnInit {
           name: '单位预案编制数量',
           type: 'line',
           markPoint: {
-            
             symbolSize:[65, 65],
             data: this.tiaoshiPao
-        },
+         },
-          data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+          data: Y,
         }
       ],
     };
@@ -263,7 +298,7 @@ export class echartsComponent implements OnInit {
   }
 
   twoExample:any;
-  twoInit () {
+  twoInit (X=this.datayuex, Y=this.datayuey) {
     let that = this
     this.twoExample = echarts.init(document.getElementById('two'), 'skinUpp');
     var option = {
@@ -294,7 +329,7 @@ export class echartsComponent implements OnInit {
       // x轴
       xAxis: {
         type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+        data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
@@ -335,7 +370,7 @@ export class echartsComponent implements OnInit {
             symbolSize:[65, 65],
             data: this.tiaoshiPao
         },
-          data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+          data: Y,
         }
       ],
     };
@@ -347,7 +382,7 @@ export class echartsComponent implements OnInit {
   }
 
   threeExample:any;
-  threeInit () {
+  threeInit (X=this.datayuex, Y=this.datayuey) {
     let that = this
     this.threeExample = echarts.init(document.getElementById('three'), 'skinUpp');
     var option = {
@@ -377,7 +412,7 @@ export class echartsComponent implements OnInit {
       // x轴
       xAxis: {
         type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+        data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
@@ -418,7 +453,7 @@ export class echartsComponent implements OnInit {
             symbolSize:[65, 65],
             data: this.tiaoshiPao
         },
-          data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+          data: Y,
         }
       ],
     };
@@ -430,7 +465,7 @@ export class echartsComponent implements OnInit {
   }
 
   fourExample:any;
-  fourInit () {
+  fourInit (X=this.datayuex, Y=this.datayuey) {
     let that = this
     this.fourExample = echarts.init(document.getElementById('four'), 'skinUpp');
     var option = {
@@ -461,7 +496,7 @@ export class echartsComponent implements OnInit {
       // x轴
       xAxis: {
         type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+        data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
@@ -502,7 +537,7 @@ export class echartsComponent implements OnInit {
             symbolSize:[65, 65],
             data: this.tiaoshiPao
         },
-          data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+          data: Y,
         }
       ],
     };
@@ -514,7 +549,7 @@ export class echartsComponent implements OnInit {
   }
 
   fiveExample:any;
-  fiveInit () {
+  fiveInit (X=this.datayuex, Y=this.datayuey) {
     let that = this
     this.fiveExample = echarts.init(document.getElementById('five'), 'skinUpp');
     var option = {
@@ -546,7 +581,7 @@ export class echartsComponent implements OnInit {
       // x轴
       xAxis: {
         type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+        data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
@@ -587,7 +622,7 @@ export class echartsComponent implements OnInit {
             symbolSize:[65, 65],
             data: this.tiaoshiPao
         },
-          data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+          data: Y,
         }
       ],
     };
@@ -599,7 +634,7 @@ export class echartsComponent implements OnInit {
   }
 
   sixExample:any;
-  sixInit () {
+  sixInit (X=this.datayuex, Y=this.datayuey) {
     let that = this
     this.sixExample = echarts.init(document.getElementById('six'), 'skinUpp');
     var option = {
@@ -630,7 +665,7 @@ export class echartsComponent implements OnInit {
       // x轴
       xAxis: {
         type: 'category',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月'],
+        data: X,
         boundaryGap: true,
         axisLabel: {
           color: "#000", //刻度线标签颜色
@@ -671,7 +706,7 @@ export class echartsComponent implements OnInit {
             symbolSize:[65, 65],
             data: this.tiaoshiPao
         },
-          data: [270, 253, 244, 199, 189, 173, 160, 198,200],
+          data: Y,
         }
       ],
     };