NanJingLamanRadarProject/04.系统编码/Frontend/src/model/high-chart-create.ts

import * as Highcharts from 'highcharts';
//import * as Exporting from 'highcharts/modules/exporting';

// // 初始化导出模块
// Exporting(Highcharts);

export class HighChartCreate {
    private readonly id: string;

    private highChart: any;
    private chart: any;
    private xAxis: Array<any> = [];
    private yAxis: Array<any> = [];
    private series: Array<any> = [];
    private legend: any = null;
    private tooltip: any = null;
    private time: any = null;
    constructor(id: string) {
        this.id = id;
    }

    public setChart(inverted: boolean = false, type: string = 'line', width: number = null, height: number = null): void {
        this.chart = {
            type: type,
            inverted: inverted,
            width: width,
            height: height
        };
    }

    public setXAxis(text: string,  reversed: boolean = true){
        this.xAxis.push({
            reversed: reversed,
            title: {
                enabled: true,
                text: text,
                style: {
                    color: '#000000',
                    fontSize: '18px',
                    fontFamily: '微软雅黑'
                }
            },
            categories: [],
            showLastLabel: true,
            showFirstLabel: true,
        });
    }

    public setXAxisTypeDate(): void{
        this.time = {
            useUTC: false
        }

        this.xAxis.push({
            type: 'datetime',
            labels: {
                style: {
                    fontSize:'20px'
                },
                formatter: function () {
                    return Highcharts.dateFormat('%d日%H时', this.value);
                }
            }
            // dateTimeLabelFormats: {
			// 	millisecond: '%H:%M:%S.%L',
			// 	second: '%H:%M:%S',
			// 	minute: '%H:%M',
			// 	hour: '%H:%M',
			// 	day: '%m-%d',
			// 	week: '%m-%d',
			// 	month: '%Y-%m',
			// 	year: '%Y'
			// }
        })
    }

    public setSpecialXAxis(text: string, max: number, min: number, tickInterval: number,  opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true) {
        this.xAxis.push({
            title: {
                enabled: true,
                text: text,
                style: {
                    color: '#000000',
                    fontSize: '18px',
                    fontFamily: '微软雅黑'
                }
            },
            labels: {
                style: {
                    fontSize:'20px'
                },
            },
            max: max,
            min: min,
            tickInterval: tickInterval,
            lineWidth: lineWidth,
            opposite: opposite,

        })
    }
    public setYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){
        this.yAxis.push({
            title: {
                text: text,
                style: {
                    color: '#000000',
                    fontSize: '18px',
                    fontFamily: '微软雅黑'
                }
            },
            max: max,
            min: min,
            tickInterval: tickInterval,
            tickAmount: tickAmount,
            lineWidth: lineWidth,
            opposite: opposite
        });
    }

    public setSpecialYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){
        this.yAxis.push({
            title: {
                text: text,
                style: {
                    color: '#000000',
                    fontSize: '18px',
                    fontFamily: '微软雅黑'
                }
            },
            labels: {
                y: 8,
                style: {
                    fontSize:'20px'
                },
            },
            max: max,
            min: min,
            tickInterval: tickInterval,
            tickAmount: tickAmount,
            lineWidth: lineWidth,
            opposite: opposite
        });
    }



    //图例标识
    public setLegend(enabled: boolean = false){
        this.legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            floating: true,
            x: 20,
            y: 0,
            enabled: enabled,
            itemStyle : {
                'fontSize' : '18px',
                'fontWeight' : 'normal'
            }
        }
    }

    public setTooltip(pointFormat: string, headerFormat: string = '<b>{series.name}</b><br/>'){
        this.tooltip = {
            headerFormat: headerFormat,
            pointFormat: pointFormat
        }
    }

    // public setSeries(name: string)
    public setSeries(name: string, yAxis: number = 0, valueSuffix: string = null, color: string = null, linColor: string = null){
        let series: any = {
            name: name,
            data: [],
            color: linColor
        }
        if (color == null || valueSuffix == null){
            this.series.push(series);
            return
        }

        series.yAxis = yAxis;
        series.tooltip = {
            valueSuffix: valueSuffix
        };
        series.color = color;
        this.series.push(series);
    }

    public init(): void{
        // 不换算单位, 不然出现 k
        Highcharts.setOptions({
            lang: {
                numericSymbols: null
            },
        })

        const options = this.getOptions();
        this.highChart = Highcharts.chart(this.id, options);
        // return this.highChart;
    }

    private getOptions(){
        let options: any = {
            credits: {
                enabled: false
            },
            chart: this.chart,
            title: {
                text: null
            },
            xAxis: this.xAxis,
            yAxis: this.yAxis,
            tooltip: this.tooltip,
            series: this.series
        };
        if (this.legend != null)
            options.legend = this.legend;

        if (this.time != null)
            options.time = this.time;

        return options;
    }

    public updateSeries(index: number, data: Array<any>): void{
        this.highChart.series[index].setData(data);
    }

    public updateXAxis(categories: Array<any>, index: number = 0){
        this.highChart.xAxis[index].setCategories(categories);
    }

}