import { HttpClient } from '@angular/common/http' ; import { Component , ElementRef , ViewChild } from '@angular/core' ; import { Observable } from 'rxjs' ; import { NzNotificationService } from 'ng-zorro-antd' ; import * as Moment from 'moment' ; import { ChartService } from './chart.service' ; import { ISystemLog , IArticleType , IArticleTag } from './model/chart.model' ; import { Echarts } from '@utils/echarts' ; require ( 'echarts/lib/chart/bar' ) ; require ( 'echarts/lib/chart/line' ) ; require ( 'echarts/lib/chart/pie' ) ; require ( 'echarts/lib/component/title' ) ; require ( 'echarts/lib/component/tooltip' ) ; require ( 'echarts/lib/component/toolbox' ) ; require ( 'echarts/lib/component/legend' ) ; require ( 'echarts/lib/component/legend/ScrollableLegendModel' ) ; require ( 'echarts/lib/component/legend/ScrollableLegendAction' ) ; require ( 'echarts/lib/component/legend/ScrollableLegendView' ) ; @ Component ( { selector : 'app-charts' , templateUrl : './chart.html' , } ) export class ChartComponent { @ ViewChild ( 'systemLog' , { static : false } ) public systemLog : ElementRef ; @ ViewChild ( 'systemLogDate' , { static : false } ) public systemLogDate : ElementRef ; @ ViewChild ( 'articleType' , { static : false } ) public articleType : ElementRef ; @ ViewChild ( 'tag' , { static : false } ) public tag : ElementRef ; public disable : boolean = false ; public date : any = new Date ( ) ; constructor ( private http , private notification , private chartService ) { } public ngOnInit ( ) { this . getData ( ) ; } public ngAfterContentInit ( ) { } public ngDoCheck ( ) { } public getData ( ) { this . chartService . getSystemLog ( ) . subscribe ( ( res ) => { this . initSystemLogChart ( res . data ) ; } , ( err ) => { } ) ; this . changedDate ( ) ; this . chartService . getArticleType ( ) . subscribe ( ( res ) => { this . initArticleTypeChart ( res . data ) ; } , ( err ) => { } ) ; this . chartService . getArticleTag ( ) . subscribe ( ( res ) => { this . initArticleTagChart ( res . data ) ; } , ( err ) => { } ) ; } public changedDate ( ) { this . disable = true ; this . chartService . getSystemLogDate ( Moment ( this . date ) . format ( 'YYYY-MM-DD' ) ) . finally ( ( ) => this . disable = false ) . subscribe ( ( res ) => { this . initSystemLogDateChart ( res . data ) ; } , ( err ) => { } ) ; } private initSystemLogChart ( list ) { const sysLogChart = Echarts . init ( this . systemLog . nativeElement ) ; const xAxis = list . map ( ( m ) => m . date ) ; const data = list . map ( ( m ) => m . total ) ; window . addEventListener ( 'resize' , ( ) => { sysLogChart . resize ( ) ; } ) ; sysLogChart . setOption ( { title : { text : '系统日志' , x : 'center' , } , tooltip : { } , xAxis : { data : xAxis , } , yAxis : { } , series : [ { name : '数量' , type : 'bar' , data , } ] , } ) ; } private initSystemLogDateChart ( dataS ) { const sysLogDateChart = Echarts . init ( this . systemLogDate . nativeElement ) ; const keys = Object . keys ( dataS ) ; const xAxis = keys . filter ( ( k ) => k . match ( /^\d{1,2}时$/ ) ) ; const data = xAxis . map ( ( k ) => dataS [ k ] ) ; window . addEventListener ( 'resize' , ( ) => { sysLogDateChart . resize ( ) ; } ) ; sysLogDateChart . setOption ( { title : { text : '系统日志分时统计' , x : 'center' , } , toolbox : { feature : { dataView : { show : true , readOnly : false } , magicType : { show : true , type : [ 'line' , 'bar' ] } , restore : { show : true } , saveAsImage : { show : true } , } , } , tooltip : { trigger : 'axis' , formatter ( a , b ) { return `${ a [ 0 ] . seriesName } <br/>${ a [ 0 ] . name } : ${ a [ 0 ] . value } (次)` ; } , } , xAxis : { type : 'category' , data : xAxis , axisPointer : { type : 'shadow' , } , } , yAxis : { splitLine : { show : false , } , } , series : [ { name : '次数' , type : 'bar' , data , itemStyle : { normal : { color : '#0f375f' , } , } , } , { name : '次数' , type : 'line' , data , lineStyle : { normal : { color : '#60a0a8' , } , } , } ] , } ) ; } private initArticleTypeChart ( list ) { const articleTypeChart = Echarts . init ( this . articleType . nativeElement ) ; const xAxis = list . map ( ( m ) => m . type_name ) ; const data = list . map ( ( m ) => ( { value : m . total , name : m . type_name } ) ) ; window . addEventListener ( 'resize' , ( ) => { articleTypeChart . resize ( ) ; } ) ; articleTypeChart . setOption ( { title : { text : '文章类型' , x : 'center' , } , legend : { orient : 'vertical' , left : 'left' , data : xAxis , } , tooltip : { trigger : 'item' , formatter : '{a} <br/>{b} : {c} ({d}%)' , } , series : [ { name : '文章类型' , type : 'pie' , radius : '55%' , center : [ '50%' , '60%' ] , data , } ] , color : [ '#9aca61' , '#0096BF' , '#f6ab00' , '#e44f6d' , '#719fdb' , '#001f4b' , '#555555' ] , } ) ; } private initArticleTagChart ( list ) { const articleTagChart = Echarts . init ( this . tag . nativeElement ) ; const xAxis = list . map ( ( m ) => m . name ) ; const data = list . map ( ( m ) => ( { value : m . total , name : m . name } ) ) ; window . addEventListener ( 'resize' , ( ) => { articleTagChart . resize ( ) ; } ) ; articleTagChart . setOption ( { title : { text : '文章标签' , x : 'center' , } , tooltip : { trigger : 'item' , formatter : '{a} <br/>{b} : {c} ({d}%)' , } , legend : { type : 'scroll' , orient : 'vertical' , right : 10 , top : 20 , bottom : 20 , data : xAxis , } , series : [ { name : '标签' , type : 'pie' , radius : '55%' , center : [ '40%' , '60%' ] , data , itemStyle : { emphasis : { shadowBlur : 10 , shadowOffsetX : 0 , shadowColor : 'rgba(0, 0, 0, 0.5)' , } , } , } , ] , } ) ; } public disabledDate ( current ) { return current && current . getTime ( ) > Date . now ( ) ; } }