@ebuilding/chart 2.1.6 → 2.1.8

package/echart/index.d.ts

@@ -6,3 +6,5 @@ export { EchartNumberModule, EchartNumberMainComponent } from './number';
 export { EchartPieModule, EchartPieMainComponent } from './pie';
 export { EchartRadarModule, EchartRadarMainComponent } from './radar';
 export { EchartSortModule, EchartSortMainComponent } from './sort';
+export { EchartGaugeModule, EchartGaugeMainComponent } from './gauge';
+export { EchartCategoryStackModule, EchartCategoryStackComponent } from './category-stack';

package/fesm2022/chart.echart.mjs

@@ -3,7 +3,7 @@ import { Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as echarts from 'echarts/core';
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, RadarChart, GaugeChart } from 'echarts/charts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { GramBaseChartService } from '@ebuilding/chart/service';
@@ -187,17 +187,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$7 = [EchartBarMainComponent];
+const components$9 = [EchartBarMainComponent];
 class EchartBarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartBarModule, imports: [EchartBarMainComponent], exports: [EchartBarMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBarModule, imports: [components$7] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBarModule, imports: [components$9] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$7],
-                    exports: [...components$7],
+                    imports: [...components$9],
+                    exports: [...components$9],
                 }]
         }] });
 
@@ -350,17 +350,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$6 = [EchartBar2MainComponent];
+const components$8 = [EchartBar2MainComponent];
 class EchartBar2Module {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBar2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartBar2Module, imports: [EchartBar2MainComponent], exports: [EchartBar2MainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBar2Module, imports: [components$6] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBar2Module, imports: [components$8] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBar2Module, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$6],
-                    exports: [...components$6],
+                    imports: [...components$8],
+                    exports: [...components$8],
                 }]
         }] });
 
@@ -407,17 +407,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div class=\"indicator-box\">\n    <div class=\"header\">\n        <div class=\"name\">\u5171\u8BA1</div>\n        <div class=\"value\">{{total}}</div>\n    </div>\n    <ul class=\"content\">\n        <li *ngFor=\"let item of list\">\n            <div class=\"name\">{{item.name}}</div>\n            <div class=\"value\">{{item.value}}</div>\n        </li>\n    </ul>\n</div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}:host ::ng-deep .indicator-box{display:flex;flex:1;flex-direction:column}:host ::ng-deep .indicator-box .header{display:flex;flex-direction:row;align-items:center;padding:10px 15px;border-bottom:1px solid #f0f0f0}:host ::ng-deep .indicator-box .header .name{flex:1}:host ::ng-deep .indicator-box .header .value{color:#2f7deb;font-weight:600}:host ::ng-deep .indicator-box ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}:host ::ng-deep .indicator-box ul li{display:flex;flex-direction:row;align-items:center;padding:7px 12px;border-bottom:1px dotted #f0f0f0}:host ::ng-deep .indicator-box ul li .name{flex:1}:host ::ng-deep .indicator-box ul li .value{padding:2px 10px;color:#2f7deb;background:#eaf2fd;border-radius:6px}:host ::ng-deep .indicator-box ul li:nth-last-child(1){border-bottom:0}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$5 = [EchartIndicatorMainComponent];
+const components$7 = [EchartIndicatorMainComponent];
 class EchartIndicatorModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorModule, imports: [EchartIndicatorMainComponent], exports: [EchartIndicatorMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorModule, imports: [components$5] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorModule, imports: [components$7] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$5],
-                    exports: [...components$5],
+                    imports: [...components$7],
+                    exports: [...components$7],
                 }]
         }] });
 
@@ -556,17 +556,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$4 = [EchartLineMainComponent];
+const components$6 = [EchartLineMainComponent];
 class EchartLineModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartLineModule, imports: [EchartLineMainComponent], exports: [EchartLineMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartLineModule, imports: [components$4] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartLineModule, imports: [components$6] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartLineModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$4],
-                    exports: [...components$4],
+                    imports: [...components$6],
+                    exports: [...components$6],
                 }]
         }] });
 
@@ -603,17 +603,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "{{text}}", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%;align-items:center;justify-content:center;color:#323232;font-size:120px}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$3 = [EchartNumberMainComponent];
+const components$5 = [EchartNumberMainComponent];
 class EchartNumberModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberModule, imports: [EchartNumberMainComponent], exports: [EchartNumberMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberModule, imports: [components$3] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberModule, imports: [components$5] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$3],
-                    exports: [...components$3],
+                    imports: [...components$5],
+                    exports: [...components$5],
                 }]
         }] });
 
@@ -720,17 +720,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$2 = [EchartPieMainComponent];
+const components$4 = [EchartPieMainComponent];
 class EchartPieModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartPieModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartPieModule, imports: [EchartPieMainComponent], exports: [EchartPieMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartPieModule, imports: [components$2] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartPieModule, imports: [components$4] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartPieModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$2],
-                    exports: [...components$2],
+                    imports: [...components$4],
+                    exports: [...components$4],
                 }]
         }] });
 
@@ -823,17 +823,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [] });
 
-const components$1 = [EchartRadarMainComponent];
+const components$3 = [EchartRadarMainComponent];
 class EchartRadarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartRadarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartRadarModule, imports: [EchartRadarMainComponent], exports: [EchartRadarMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartRadarModule, imports: [components$1] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartRadarModule, imports: [components$3] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartRadarModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...components$1],
-                    exports: [...components$1],
+                    imports: [...components$3],
+                    exports: [...components$3],
                 }]
         }] });
 
@@ -863,13 +863,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], template: "", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%;align-items:center;justify-content:center;color:#323232;font-size:120px}\n"] }]
         }], ctorParameters: () => [] });
 
-const components = [EchartSortMainComponent];
+const components$2 = [EchartSortMainComponent];
 class EchartSortModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartSortModule, imports: [EchartSortMainComponent], exports: [EchartSortMainComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortModule, imports: [components] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortModule, imports: [components$2] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$2],
+                    exports: [...components$2],
+                }]
+        }] });
+
+/**
+ * gauge
+ */
+echarts.use([GaugeChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartGaugeMainComponent extends GramBaseChartService {
+    color = [
+        '#71D1FF',
+        '#71A9FF',
+        '#8C94FC',
+        '#DDB0F0',
+        '#FFCA5E',
+        '#FFB15E',
+        '#71D1FF',
+        '#71A9FF',
+        '#8C94FC',
+        '#DDB0F0',
+        '#FFCA5E',
+        '#FFB15E',
+    ];
+    constructor() {
+        super();
+    }
+    ngOnInit() { }
+    initChartData() {
+        if (this.config && this.config?.data && this.config?.data?.val && Array.isArray(this.config.data.val) && this.config.data.val.length > 0) {
+            let item = this.config.data.val[0];
+            if (item && item?.data && item?.data?.length > 0) {
+                this.chartData = [
+                    {
+                        value: item?.data[0],
+                        name: null
+                    }
+                ];
+            }
+        }
+    }
+    /**
+     * 初始化图表配置
+     */
+    initChartOption() {
+        this.chartOption = {
+            tooltip: {
+                formatter: '{a} <br/>{b} : {c}%'
+            },
+            series: [
+                {
+                    name: 'Pressure',
+                    type: 'gauge',
+                    startAngle: 180,
+                    endAngle: 0,
+                    progress: {
+                        show: true
+                    },
+                    detail: {
+                        valueAnimation: true,
+                        formatter: '{value}'
+                    },
+                    data: this.chartData
+                }
+            ]
+        };
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            this.initChartData();
+            this.initChartLegend();
+            this.initChartTitle();
+            this.initChartOption();
+            setTimeout(() => {
+                this.renderChart();
+            }, 0);
+        }
+    }
+    /**
+     * 渲染图表
+     */
+    renderChart() {
+        if (!this.chartInstance) {
+            this.chartInstance = echarts.init(this.chartContainer.nativeElement);
+            this.chartInstance.setOption(this.chartOption);
+            window.addEventListener('resize', () => {
+                this.chartInstance?.resize();
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartGaugeMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartGaugeMainComponent, isStandalone: true, selector: "echart-gauge", usesInheritance: true, ngImport: i0, template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartGaugeMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-gauge', imports: [
+                        CommonModule
+                    ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+const components$1 = [EchartGaugeMainComponent];
+class EchartGaugeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartGaugeModule, imports: [EchartGaugeMainComponent], exports: [EchartGaugeMainComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartGaugeModule, imports: [components$1] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartGaugeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$1],
+                    exports: [...components$1],
+                }]
+        }] });
+
+/**
+ * 堆积图
+ */
+echarts.use([BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartCategoryStackComponent extends GramBaseChartService {
+    color = [
+        '#71D1FF',
+        '#71A9FF',
+        '#8C94FC',
+        '#DDB0F0',
+        '#FFCA5E',
+        '#FFB15E',
+        '#71D1FF',
+        '#71A9FF',
+        '#8C94FC',
+        '#DDB0F0',
+        '#FFCA5E',
+        '#FFB15E',
+    ];
+    constructor() {
+        super();
+    }
+    ngOnInit() { }
+    /**
+     * 初始化数据
+     */
+    initChartData() {
+        if (this.config && this.config.data && this.config.data.val && Array.isArray(this.config.data.val)) {
+            let isSingle = this.config.data.val.length == 1;
+            this.chartData = this.config.data.val.map((item, index) => {
+                if (!isSingle) {
+                    item.data = item.data.map((a) => {
+                        let newA = { value: a, itemStyle: { color: this.color[index] } };
+                        return newA;
+                    });
+                }
+                let obj = {
+                    type: 'bar',
+                    name: item.text,
+                    data: item.data,
+                    barMaxWidth: 35,
+                    stack: 'total',
+                    label: this.config.data?.label ? this.config.data.label : {},
+                    // itemStyle:
+                    //   isSingle == true
+                    //     ? {
+                    //       normal: {
+                    //         borderRadius: [12, 12, 0, 0],
+                    //         color: (a: any) => {
+                    //           return this.color[a.dataIndex];
+                    //         },
+                    //       },
+                    //     }
+                    //     : {
+                    //       normal: {
+                    //         borderRadius: [12, 12, 0, 0],
+                    //       },
+                    //     },
+                };
+                if (item?.type && item.type == 'line') {
+                    obj['type'] = 'line';
+                    obj['lineStyle'] = {
+                        color: this.color[index],
+                    };
+                }
+                return obj;
+            });
+        }
+    }
+    /**
+     * 初始化X轴
+     * @returns
+     */
+    initChartAxis() {
+        if (this.config &&
+            this.config.data &&
+            this.config.data.x &&
+            this.config.data.x.data &&
+            Array.isArray(this.config.data.x.data)) {
+            return _.cloneDeep(this.config.data.x.data);
+        }
+    }
+    /**
+     * 初始化图表配置
+     */
+    initChartOption() {
+        this.chartOption = {
+            title: this.chartTitle,
+            animation: this.config?.animation == false ? false : true,
+            color: this.color,
+            grid: {
+                left: '3%',
+                right: '18',
+                y2: '50',
+                containLabel: true,
+            },
+            legend: this.chartLegend,
+            tooltip: {},
+            yAxis: {
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        type: 'dashed',
+                    },
+                },
+                type: 'category',
+                data: this.initChartAxis(),
+            },
+            xAxis: {
+                type: "value",
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        type: 'dashed',
+                    },
+                },
+                axisPointer: {
+                    type: 'shadow',
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#dbdbdb',
+                        width: '1',
+                        type: 'dotted',
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: '#4d4d4d',
+                    },
+                },
+                nameTextStyle: {
+                    color: '#4d4d4d',
+                },
+                axisTick: {
+                    lineStyle: {
+                        show: true,
+                        color: '#dbdbdb',
+                        type: 'dotted',
+                    },
+                },
+            },
+            series: this.chartData,
+        };
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            this.initChartData();
+            this.initChartLegend();
+            this.initChartTitle();
+            this.initChartOption();
+            setTimeout(() => {
+                this.renderChart();
+            }, 0);
+        }
+    }
+    /**
+     * 渲染图表
+     */
+    renderChart() {
+        if (!this.chartInstance) {
+            this.chartInstance = echarts.init(this.chartContainer.nativeElement);
+            this.chartInstance.setOption(this.chartOption);
+            window.addEventListener('resize', () => {
+                this.chartInstance?.resize();
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartCategoryStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartCategoryStackComponent, isStandalone: true, selector: "echart-category-stack", usesInheritance: true, ngImport: i0, template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartCategoryStackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-category-stack', imports: [
+                        CommonModule
+                    ], template: "<div #chartContainer id=\"chartContainer\" style=\"width: 100%; height: 100%;\"></div>", styles: [":host ::ng-deep{display:flex;flex:1;flex-direction:column;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+const components = [EchartCategoryStackComponent];
+class EchartCategoryStackModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartCategoryStackModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: EchartCategoryStackModule, imports: [EchartCategoryStackComponent], exports: [EchartCategoryStackComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartCategoryStackModule, imports: [components] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartCategoryStackModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...components],
@@ -881,5 +1188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EchartBar2MainComponent, EchartBar2Module, EchartBarMainComponent, EchartBarModule, EchartIndicatorMainComponent, EchartIndicatorModule, EchartLineMainComponent, EchartLineModule, EchartNumberMainComponent, EchartNumberModule, EchartPieMainComponent, EchartPieModule, EchartRadarMainComponent, EchartRadarModule, EchartSortMainComponent, EchartSortModule };
+export { EchartBar2MainComponent, EchartBar2Module, EchartBarMainComponent, EchartBarModule, EchartCategoryStackComponent, EchartCategoryStackModule, EchartGaugeMainComponent, EchartGaugeModule, EchartIndicatorMainComponent, EchartIndicatorModule, EchartLineMainComponent, EchartLineModule, EchartNumberMainComponent, EchartNumberModule, EchartPieMainComponent, EchartPieModule, EchartRadarMainComponent, EchartRadarModule, EchartSortMainComponent, EchartSortModule };
 //# sourceMappingURL=chart.echart.mjs.map