import { Component , ViewChild , ElementRef , Input } from '@angular/core' ; import { NavController , ModalController , } from '@ionic/angular' ; @ Component ( { selector : 'own-airdetector-chart' , templateUrl : 'own-airdetector-chart.html' , styleUrls : [ 'own-airdetector-chart.scss' ] } ) export class OwnAirdetectorChartPage { @ Input ( ) device ; public myChart : any ; public myDate ; @ ViewChild ( 'chartCanvas' , { read : ElementRef , static : true } ) chartCanvas : ElementRef ; constructor ( public navCtrl , public modalCtrl ) { } ionViewDidLoad ( ) { this . initChart ( ) ; this . myDate = this . getNowFormatDate ( ) ; } chosen = 0 ; chose ( num ) { this . chosen = num ; } valueChange ( e ) { console . log ( this . myDate ) ; } getData ( ) { } RandomNumBoth ( Min , Max ) { var Range = Max - Min ; var Rand = Math . random ( ) ; var num = Min + Math . round ( Rand * Range ) ; return num ; } initChart ( ) { let shijian = new Date ( ) ; let times = [ ] ; for ( var i = 0 ; i < 24 ; i ++ ) { shijian = new Date ( shijian . valueOf ( ) + 3600000 ) ; times . push ( [ shijian , this . RandomNumBoth ( 0 , 300 ) ] ) ; } let option = { dataZoom : [ { type : 'inside' , filterMode : 'none' , minValueSpan : 6 , startValue : times [ 0 ] [ 0 ] , endValue : times [ 6 ] [ 0 ] } ] , tooltip : { trigger : 'axis' } , visualMap : { show : false , showLabel : false , pieces : [ { gte : 0 , lte : 50 , color : '#10AF8B' } , { gte : 51 , lte : 100 , color : '#FFDE33' } , { gte : 101 , lte : 150 , color : '#FF9933' } , { gt : 151 , lte : 200 , color : '#660099' } , ] , outOfRange : { color : '#7E0023' } } , xAxis : { axisLine : { lineStyle : { color : [ '#FFFFFF' ] } } , type : 'time' , } , yAxis : { axisLine : { lineStyle : { color : [ '#FFFFFF' ] } } , type : 'value' } , series : [ { name : 'AQI' , type : 'line' , smooth : true , data : times , } , ] , } ; this . myChart . setOption ( option ) ; } getNowFormatDate ( ) { let date = new Date ( ) ; let year = date . getFullYear ( ) ; let month = date . getMonth ( ) + 1 ; let day = date . getDate ( ) ; let yearString = year . toString ( ) ; ; let monthString = month . toString ( ) ; ; let dayString = day . toString ( ) ; ; if ( month >= 1 && month <= 9 ) { monthString = "0" + monthString ; } if ( day >= 0 && day <= 9 ) { dayString = "0" + dayString ; } var currentdate = yearString + '-' + monthString + '-' + dayString ; return currentdate ; } }