@ebuilding/chart 2.0.0

package/fesm2022/chart.echart.mjs

@@ -0,0 +1,885 @@
+import * as i0 from '@angular/core';
+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 { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { GramBaseChartService } from '@ebuilding/chart/service';
+import _ from 'lodash';
+
+/**
+ * 柱状图
+ */
+echarts.use([BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartBarMainComponent 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,
+                    label: this.config.data?.label ? this.config.data.label : {},
+                    itemStyle: isSingle == true
+                        ? {
+                            normal: {
+                                borderRadius: [12, 12, 0, 0],
+                                color: (a) => {
+                                    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',
+                    },
+                },
+            },
+            xAxis: {
+                type: 'category',
+                data: this.initChartAxis(),
+                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: EchartBarMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartBarMainComponent, isStandalone: true, selector: "echart-bar", 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: EchartBarMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-bar', 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$7 = [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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$7],
+                    exports: [...components$7],
+                }]
+        }] });
+
+/**
+ * 条形图
+ */
+echarts.use([BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartBar2MainComponent extends GramBaseChartService {
+    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) => {
+                let obj = {
+                    type: 'bar',
+                    name: item.text,
+                    data: item.data,
+                    barMaxWidth: 35,
+                    itemStyle: isSingle == true
+                        ? {
+                            normal: {
+                                borderRadius: [0, 12, 12, 0],
+                                color: (a) => {
+                                    return this.color[a.dataIndex];
+                                },
+                            },
+                        }
+                        : {
+                            normal: {
+                                borderRadius: [0, 12, 12, 0],
+                            },
+                        },
+                };
+                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 = {
+            color: this.color,
+            grid: {
+                left: '3%',
+                right: '18',
+                y2: '50',
+                containLabel: true,
+            },
+            legend: this.chartLegend,
+            tooltip: {},
+            yAxis: {
+                type: 'category',
+                data: this.initChartAxis(),
+                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',
+                    },
+                },
+            },
+            xAxis: {
+                type: 'value',
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        type: 'dashed',
+                    },
+                },
+            },
+            series: this.chartData,
+        };
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            this.initChartData();
+            this.initChartLegend();
+            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: EchartBar2MainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartBar2MainComponent, isStandalone: true, selector: "echart-bar2", 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: EchartBar2MainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-bar2', 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$6 = [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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartBar2Module, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$6],
+                    exports: [...components$6],
+                }]
+        }] });
+
+/**
+ * 指标图
+ */
+class EchartIndicatorMainComponent extends GramBaseChartService {
+    total = 0;
+    list = [];
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            let xData = _.get(this.config, "data.x.data");
+            if (xData && Array.isArray(xData) && xData.length > 0) {
+                this.list = [];
+                let valueData = _.get(this.config, "data.val[0].data");
+                if (valueData && Array.isArray(valueData) && valueData.length > 0 && xData.length == valueData.length) {
+                    xData.forEach((name, index) => {
+                        let item = {
+                            name: name,
+                            value: valueData[index] == null ? 0 : valueData[index]
+                        };
+                        this.total = this.total + item.value;
+                        this.list.push(item);
+                    });
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartIndicatorMainComponent, isStandalone: true, selector: "echart-indicator", usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-indicator', imports: [
+                        CommonModule
+                    ], 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];
+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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartIndicatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$5],
+                    exports: [...components$5],
+                }]
+        }] });
+
+/**
+ * 线条图
+ */
+echarts.use([LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartLineMainComponent extends GramBaseChartService {
+    constructor() {
+        super();
+    }
+    ngOnInit() { }
+    /**
+     * 初始化数据
+     */
+    initChartData() {
+        if (this.config && this.config.data && this.config.data.val && Array.isArray(this.config.data.val)) {
+            this.chartData = this.config.data.val.map((item, index) => {
+                let obj = {
+                    type: 'line',
+                    name: item.text,
+                    data: item.data,
+                    smooth: this.config?.izSmooth == true ? true : false,
+                    areaStyle: this.config?.izArea == true ? {} : null,
+                };
+                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 = {
+            color: this.color,
+            grid: {
+                left: '3%',
+                right: '18',
+                y2: '50',
+                containLabel: true,
+            },
+            legend: this.chartLegend,
+            tooltip: {},
+            yAxis: {
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        type: 'dashed',
+                    },
+                },
+            },
+            xAxis: {
+                type: 'category',
+                data: this.initChartAxis(),
+                axisPointer: {
+                    type: 'shadow',
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#dbdbdb',
+                        width: '1',
+                        type: 'dotted',
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: ['#dbdbdb'],
+                        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.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: EchartLineMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartLineMainComponent, isStandalone: true, selector: "echart-line", 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: EchartLineMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-line', 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$4 = [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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartLineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$4],
+                    exports: [...components$4],
+                }]
+        }] });
+
+/**
+ * 数字图
+ */
+class EchartNumberMainComponent extends GramBaseChartService {
+    text = 0;
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            if (this.config.val && Array.isArray(this.config.val) && this.config.val.length > 0) {
+                let item = this.config.val[0];
+                if (item && item.data && Array.isArray(item.data) && item.data.length > 0) {
+                    this.text = item.data[0];
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartNumberMainComponent, isStandalone: true, selector: "echart-number", usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-number', imports: [
+                        CommonModule
+                    ], 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];
+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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartNumberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$3],
+                    exports: [...components$3],
+                }]
+        }] });
+
+/**
+ * 饼图
+ */
+echarts.use([PieChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartPieMainComponent extends GramBaseChartService {
+    constructor() {
+        super();
+    }
+    ngOnInit() { }
+    /**
+     * 初始化数据
+     */
+    initChartData() {
+        if (this.config && this.config.data && this.config.data.val && Array.isArray(this.config.data.val)) {
+            let xData = _.get(this.config, 'data.x.data');
+            let yData = _.get(this.config, 'data.val');
+            if (xData && Array.isArray(xData)) {
+                let newData = [];
+                xData.forEach((x, i) => {
+                    if (yData && Array.isArray(yData)) {
+                        yData.forEach((y) => {
+                            if (y.data && Array.isArray(y.data)) {
+                                let obj = { name: x, value: y.data[i] };
+                                newData.push(obj);
+                            }
+                        });
+                    }
+                });
+                this.chartData = newData;
+            }
+        }
+    }
+    /**
+     * 初始化图表配置
+     */
+    initChartOption() {
+        this.chartOption = {
+            color: this.color,
+            legend: this.chartLegend,
+            tooltip: {
+                trigger: 'item',
+            },
+            animation: false,
+            series: [
+                {
+                    type: 'pie',
+                    data: this.chartData,
+                    radius: this.config?.izDoughnut == true ? ['50%', '75%'] : '50%',
+                    avoidLabelOverlap: false,
+                    itemStyle: {
+                        borderRadius: 5,
+                        borderColor: '#fff',
+                        borderWidth: 2,
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: '30',
+                            fontWeight: 'bold',
+                        },
+                    },
+                    labelLine: {
+                        show: true,
+                    },
+                },
+            ],
+        };
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            this.initChartData();
+            this.initChartLegend();
+            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: EchartPieMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartPieMainComponent, isStandalone: true, selector: "echart-pie", 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: EchartPieMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-pie', 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$2 = [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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartPieModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$2],
+                    exports: [...components$2],
+                }]
+        }] });
+
+/**
+ * 雷达图
+ */
+echarts.use([RadarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);
+class EchartRadarMainComponent extends GramBaseChartService {
+    indicatorData = [];
+    constructor() {
+        super();
+    }
+    ngOnInit() { }
+    /**
+     * 初始化数据
+     */
+    initChartData() {
+        if (this.config && this.config.data && this.config.data.val && Array.isArray(this.config.data.val)) {
+            let xData = _.get(this.config, 'data.x.data');
+            if (xData && Array.isArray(xData)) {
+                this.indicatorData = xData.map((item) => {
+                    return {
+                        name: item,
+                    };
+                });
+            }
+            this.chartData = [
+                {
+                    type: 'radar',
+                    data: this.config.data.val.map((item, index) => {
+                        return {
+                            value: item.data,
+                            name: item.text,
+                        };
+                    }),
+                },
+            ];
+        }
+    }
+    /**
+     * 初始化图表配置
+     */
+    initChartOption() {
+        this.chartOption = {
+            color: this.color,
+            title: {
+                text: null,
+            },
+            legend: this.chartLegend,
+            radar: [
+                {
+                    indicator: this.indicatorData,
+                },
+            ],
+            series: this.chartData,
+        };
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+            this.initChartData();
+            this.initChartLegend();
+            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: EchartRadarMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartRadarMainComponent, isStandalone: true, selector: "echart-radar", 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: EchartRadarMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-radar', 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 = [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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartRadarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components$1],
+                    exports: [...components$1],
+                }]
+        }] });
+
+/**
+ * 排序图
+ */
+class EchartSortMainComponent extends GramBaseChartService {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+    /**
+     * 初始化图表数据
+     */
+    loadChartInfo() {
+        if (this.config) {
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortMainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: EchartSortMainComponent, isStandalone: true, selector: "echart-sort", usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'echart-sort', imports: [
+                        CommonModule
+                    ], 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];
+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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EchartSortModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components],
+                    exports: [...components],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EchartBar2MainComponent, EchartBar2Module, EchartBarMainComponent, EchartBarModule, EchartIndicatorMainComponent, EchartIndicatorModule, EchartLineMainComponent, EchartLineModule, EchartNumberMainComponent, EchartNumberModule, EchartPieMainComponent, EchartPieModule, EchartRadarMainComponent, EchartRadarModule, EchartSortMainComponent, EchartSortModule };
+//# sourceMappingURL=chart.echart.mjs.map