@visionaris-bruno/vs-echarts 6.1.1 → 6.2.0

package/fesm2022/visionaris-bruno-vs-echarts.mjs

@@ -19,6 +19,8 @@ const EChartsTokens = {
     fontSize: 11,
     axisColor: '#666',
     lineColor: '#ddd',
+    sBorderColor: '#a0a0a0ff',
+    sShadowColor: '#2e2e2e80',
     primaryColor: '#08B1D5',
     tooltipBg: 'rgba(255, 255, 255, 0.95)',
     defaultPalette: ['#08B1D5', '#2C3E50', '#F39C12', '#E74C3C', '#27AE60', '#8E44AD', '#3498DB', '#16A085', '#D35400', '#2980B9']
@@ -152,10 +154,6 @@ class BaseEchartsComponent {
     updateSubject = new ReplaySubject(1);
     updateSubscription;
     chartInstance;
-    currentLegendSelected = null;
-    /** Estado de selección para filtros cruzados */
-    selectedCategoryIndex = null;
-    selectedSeriesIndex = null;
     /** Opciones de inicializacion de echarts
      *
      * NgxEchartsDirective.initOpts
@@ -163,14 +161,12 @@ class BaseEchartsComponent {
     initOptions = {
         renderer: 'svg', // svg se visualiza mejor en el reescalado de tableros.
     };
-    /** Opciones configuradas para ngx-echarts */
-    chartOptions = {};
-    mergeOptions = {};
     constructor() {
         this.updateSubscription = this.updateSubject.pipe(debounceTime(150)).subscribe(options => {
-            this.updateOptions(options);
+            this.setOptions(options);
         });
     }
+    // angular hooks //
     ngOnChanges(changes) {
         this.onInputChanges(changes);
     }
@@ -178,33 +174,63 @@ class BaseEchartsComponent {
         this.updateSubscription?.unsubscribe();
         this.chartInstance?.dispose();
     }
+    // metodos privados //
+    /** setear/actualizar opciones del chart
+     *
+     * Ver: https://echarts.apache.org/en/api.html#echartsInstance.setOption
+    */
+    setOptions(chartOptions, opts) {
+        const notMerge = opts?.notMerge ?? true, silent = opts?.silent ?? false, replaceMerge = opts?.replaceMerge ?? [];
+        const _opts = {
+            notMerge,
+            silent,
+            replaceMerge,
+        };
+        this.chartInstance?.setOption(chartOptions, _opts);
+    }
+    // metodos protegidos //
+    dispatchAction(type, d) {
+        if (this.chartInstance == undefined)
+            return;
+        const { seriesIndex = [], dataIndex = [], } = d;
+        this.chartInstance.dispatchAction({
+            type,
+            seriesIndex,
+            dataIndex,
+        });
+    }
+    ;
     /**
-     * Captura la instancia de echarts (usado por ngx-echarts)
+     * Hook de template method invocado por `ngOnChanges`.
+     * Las subclases lo sobreescriben para añadir lógica propia
+     * y deben llamar a `super.onInputChanges(changes)` para preservar
+     * el comportamiento base (detectar inputs relevantes y actualizar el chart).
      */
-    onChartInit(instance) {
-        this.chartInstance = instance;
-        this.setupBaseInteractions();
-        this.updateChartOptions({ notMerge: true });
+    onInputChanges(changes) {
+        if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
+            this.updateChartOptions();
+        }
+    }
+    /**
+   * Gatilla actualización.
+   *
+   */
+    triggerUpdate(options) {
+        this.updateSubject.next(options);
     }
+    // metodos publicos //
     /**
-     * Configura interacciones base como el clic en el fondo para limpiar selección.
+     * Captura la instancia de echarts (usado por ngx-echarts)
      */
-    setupBaseInteractions() {
-        if (!this.chartInstance)
-            return;
-        const zr = this.chartInstance.getZr();
-        zr.on('click', (params) => {
-            if (!params.target) {
-                this.clearSelection();
-            }
-        });
+    onChartInit(instance) {
+        this.chartInstance = instance;
+        this.updateChartOptions();
     }
     onChartClick(event) {
         if (event.componentType === 'series') {
             const index = event.dataIndex;
             const seriesIndex = event.seriesIndex;
             if (index !== undefined && index >= 0) {
-                this.handleSelection(index, seriesIndex);
                 // Emit standardized payload for cross-filtering
                 this.chartClick.emit({
                     type: 'cross-filter',
@@ -218,70 +244,36 @@ class BaseEchartsComponent {
         }
     }
     /**
-     * Maneja la lógica de alternancia de selección.
-     */
-    handleSelection(dataIndex, seriesIndex) {
-        const isSamePoint = this.selectedCategoryIndex === dataIndex && this.selectedSeriesIndex === seriesIndex;
-        if (isSamePoint) {
-            this.clearSelection();
-        }
-        else {
-            this.selectedCategoryIndex = dataIndex;
-            this.selectedSeriesIndex = seriesIndex;
-            this.updateChartOptions();
-        }
-    }
-    /**
-     * Limpia el estado de selección actual.
-     */
-    clearSelection() {
-        this.selectedCategoryIndex = null;
-        this.selectedSeriesIndex = null;
-        this.updateChartOptions();
-    }
-    dispatchAction(type, d) {
-        if (this.chartInstance == undefined)
-            return;
-        const { seriesIndex = [], dataIndex = [], } = d;
-        this.chartInstance.dispatchAction({
-            type,
-            seriesIndex,
-            dataIndex,
-        });
-    }
-    /**
-   * Maneja clics en la leyenda para persistir filtros.
-   */
-    onLegendSelectChanged(event) {
-        if (event && event.selected) {
-            this.currentLegendSelected = event.selected;
-            this.updateChartOptions();
-        }
-    }
-    updateOptions(options) {
-        this.chartOptions = { ...options };
-        this.chartInstance?.setOption(options, { notMerge: true });
-    }
-    /**
-     * Hook de template method invocado por `ngOnChanges`.
-     * Las subclases lo sobreescriben para añadir lógica propia
-     * y deben llamar a `super.onInputChanges(changes)` para preservar
-     * el comportamiento base (detectar inputs relevantes y actualizar el chart).
+     * Seleccion y des seleccion de item.
+     *
+     * Para hacer uso de esta funcion las opciones de series
+     * del grafico deben tener seteado 'selectMode'.
      */
-    onInputChanges(changes) {
-        if (changes['data'] || changes['optionsOverrides'] || changes['palette'] || changes['colorResolver'] || changes['valueFormatter']) {
-            this.updateChartOptions({ notMerge: true });
+    onChartSelectChanged(event) {
+        const { type = '', fromActionPayload, fromAction = '', isFromClick, selected, } = event;
+        if (!isFromClick)
+            return; // avoid internal ECharts selection loop.
+        // limpiar seleccion
+        const seriesIndexes = selected.map(s => s.seriesIndex);
+        const dataIndexes = selected.flatMap(s => s.dataIndex.map(d => d));
+        const ud = {
+            seriesIndex: seriesIndexes,
+            dataIndex: dataIndexes,
+        };
+        this.dispatchAction('unselect', ud);
+        // seleccionar
+        if (fromAction == 'unselect') {
+            return; // avoid selection loop by same.
         }
+        const sd = {
+            seriesIndex: [fromActionPayload.seriesIndex],
+            dataIndex: [fromActionPayload.dataIndexInside],
+        };
+        this.dispatchAction('select', sd);
     }
     /**
-   * Gatilla actualización en ngx-echarts
+   * Método público para forzar el redimensionado desde el padre
    */
-    triggerUpdate(options) {
-        this.updateSubject.next(options);
-    }
-    /**
-     * Método público para forzar el redimensionado desde el padre
-     */
     resize() {
         this.chartInstance?.resize();
     }
@@ -490,7 +482,7 @@ function getTooltipOptions(overrides) {
  * @param selectedSeriesIndex Index of the selected series
  * @returns Modified series array
  */
-function applyLineSelectionStyle$1(series, selectedCategoryIndex, selectedSeriesIndex) {
+function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIndex) {
     if (selectedCategoryIndex === null || !series)
         return series;
     return series.map((s, sIdx) => {
@@ -873,13 +865,13 @@ class EchartsRingComponent extends BaseEchartsComponent {
         emphasis: {
             scale: true,
             scaleSize: 2,
-            itemStyle: {
-                borderColor: '#fff',
-            },
         },
         select: {
             itemStyle: {
-                borderColor: '#fff',
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                borderWidth: 1,
+                shadowBlur: 4,
             },
         },
         animationType: 'scale',
@@ -909,7 +901,6 @@ class EchartsRingComponent extends BaseEchartsComponent {
             this.lastSelectedSeriesIndex = null;
             this.lastSelectedDataIndex = null;
             this.selectedPercent = null;
-            this.currentLegendSelected = null;
             this.currentGraphicText = '';
         }
         super.onInputChanges(changes);
@@ -928,11 +919,6 @@ class EchartsRingComponent extends BaseEchartsComponent {
                 this.lastSelectedDataIndex = null;
                 this.selectedPercent = null;
                 this.setGraphicText('');
-                this.chartInstance.dispatchAction({
-                    type: 'unselect',
-                    seriesIndex: event.seriesIndex,
-                    dataIndex: event.dataIndex
-                });
             }
             else {
                 // SELECT
@@ -961,29 +947,44 @@ class EchartsRingComponent extends BaseEchartsComponent {
             this.setGraphicText('');
         }
     }
-    /**
-     * Captura los cambios en la selección de la leyenda para persistirlos.
-     */
-    onLegendSelectChanged(event) {
-        if (event && event.selected) {
-            this.currentLegendSelected = event.selected;
-            // Resetear la selección actual al cambiar el contexto de la leyenda
-            this.lastSelectedSeriesIndex = null;
-            this.lastSelectedDataIndex = null;
-            this.selectedPercent = null;
-            this.currentGraphicText = '';
-            this.updateChartOptions();
-        }
+    onChartSelectChangedParcheado(e) {
+        /** corrige inside data index cuando se filtran leyendas en ring.
+         *
+         * En ring, cuando se filtran leyendas, no coinciden el 'inside data index'
+         * con el 'selected data index'. El correcto deberia ser el 'inside data intex'
+         * pero en ring por algun motivo esto es distinto.
+         *
+         * apache echarts version: 5.6.0
+        */
+        const patchedEvent = (e) => {
+            /** selected serie index */
+            const ssi = e.fromActionPayload.seriesIndex;
+            const selected = e.selected.find(sel => sel.seriesIndex == ssi);
+            if (e.fromAction == 'unselect' || !selected) {
+                return e;
+            }
+            const fixedDataIndex = selected.dataIndex[0]; // [0] por seleccion single;
+            e.fromActionPayload.dataIndexInside = fixedDataIndex; // aplico corrección de index inside.
+            return e;
+        };
+        super.onChartSelectChanged(patchedEvent(e)); // continuo flujo convencional
     }
     /**
      * Actualiza el texto del Graphic central y persiste la selección en el modelo de opciones.
      */
     setGraphicText(text) {
         this.currentGraphicText = text;
-        this.updateChartOptions();
+        // Persistencia de GRAPHIC (KPI central)
+        this.chartInstance?.setOption({
+            graphic: {
+                style: {
+                    text: this.currentGraphicText,
+                    opacity: this.currentGraphicText ? 1 : 0,
+                }
+            }
+        });
     }
-    updateChartOptions(opts) {
-        const notMerge = opts?.notMerge ?? false;
+    updateChartOptions() {
         if (!this.chartInstance)
             return;
         if (!this.data)
@@ -996,49 +997,18 @@ class EchartsRingComponent extends BaseEchartsComponent {
         };
         this.make(makeOpts);
         // 2. Obtenemos las bases del chart usando el builder
-        let options = this.builder.getResult();
-        // 3. Persistencia de GRAPHIC (KPI central)
-        if (options.graphic && Array.isArray(options.graphic)) {
-            const graphic = options.graphic[0];
-            if (graphic && graphic.style) {
-                graphic.style.text = this.currentGraphicText;
-                graphic.style.opacity = this.currentGraphicText ? 1 : 0;
-            }
-        }
-        // 4. Persistencia de SELECCIÓN (sector elevado)
-        if (options.series && Array.isArray(options.series)) {
-            options.series.forEach((s, sIdx) => {
-                if (s.data && Array.isArray(s.data)) {
-                    s.data.forEach((item, dIdx) => {
-                        if (typeof item === 'object') {
-                            item.selected = (sIdx === this.lastSelectedSeriesIndex && dIdx === this.lastSelectedDataIndex);
-                        }
-                    });
-                }
-            });
-        }
-        // 5. Persistencia de LEYENDA (filtros de usuario)
-        if (this.currentLegendSelected && options.legend) {
-            options.legend = {
-                ...options.legend,
-                selected: { ...this.currentLegendSelected }
-            };
-        }
-        if (notMerge) {
-            // Gatillar actualización en ngx-echarts
-            this.triggerUpdate(options);
-        }
-        this.mergeOptions = { ...options };
+        const options = this.builder.getResult();
+        this.triggerUpdate(options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"chartOptions\" \n  [merge]=\"mergeOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartLegendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsRingComponent, isStandalone: true, selector: "vs-echarts-ring", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChangedParcheado($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsRingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-ring', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"chartOptions\" \n  [merge]=\"mergeOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartLegendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" \n  echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartMouseOver)=\"onChartMouseOver($event)\" \n  (chartMouseOut)=\"onChartMouseOut($event)\" \n  (chartSelectChanged)=\"onChartSelectChangedParcheado($event)\"\n></div>\n ", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -1232,9 +1202,7 @@ class EchartsBarComponent extends BaseEchartsComponent {
      */
     baseSeriesOptions = {
         type: 'bar',
-        barMaxWidth: 50,
-        barGap: '15%',
-        barCategoryGap: '35%',
+        barGap: '10%',
         animation: true,
         animationDuration: 1000,
         animationEasing: 'cubicOut',
@@ -1249,6 +1217,15 @@ class EchartsBarComponent extends BaseEchartsComponent {
         backgroundStyle: {
             color: 'rgba(180, 180, 180, 0.2)' // gris claro
         },
+        selectedMode: 'single',
+        select: {
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: EChartsTokens.sBorderColor,
+                shadowColor: EChartsTokens.sShadowColor,
+                shadowBlur: 6,
+            }
+        },
         label: {
             show: false,
             position: 'top',
@@ -1282,101 +1259,17 @@ class EchartsBarComponent extends BaseEchartsComponent {
         };
         this.make(makeBarOpts);
         const baseOptions = this.builder.getResult();
-        if (this.currentLegendSelected && baseOptions.legend) {
-            baseOptions.legend.selected = { ...this.currentLegendSelected };
-        }
-        if (this.selectedCategoryIndex !== null && baseOptions.series) {
-            const seriesArray = baseOptions.series;
-            baseOptions.series = seriesArray.map((s, sIdx) => {
-                if (s.type === 'bar' && Array.isArray(s.data)) {
-                    return {
-                        ...s,
-                        emphasis: {
-                            disabled: true
-                        },
-                        data: s.data.map((val, idx) => {
-                            const isSelected = idx === this.selectedCategoryIndex;
-                            const isBarSelected = isSelected && sIdx === this.selectedSeriesIndex;
-                            const itemVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
-                            return {
-                                value: itemVal,
-                                itemStyle: {
-                                    opacity: isSelected ? (isBarSelected ? 1 : 0.5) : 0.15,
-                                    borderWidth: 0
-                                }
-                            };
-                        })
-                    };
-                }
-                return s;
-            });
-        }
         this.triggerUpdate(baseOptions);
     }
-    onChartInit(instance) {
-        super.onChartInit(instance);
-        this.setupAdditionalInteractions();
-    }
-    onInputChanges(changes) {
-        if (changes['data']) {
-            this.selectedCategoryIndex = null;
-            this.selectedSeriesIndex = null;
-            this.currentLegendSelected = null;
-        }
-        super.onInputChanges(changes);
-    }
-    setupAdditionalInteractions() {
-        if (!this.chartInstance)
-            return;
-        // 1. ZRender click para sectores de fondo (específico para barras)
-        const zr = this.chartInstance.getZr();
-        zr.on('click', (params) => {
-            if (!params.target) {
-                const pointInPixel = [params.offsetX, params.offsetY];
-                if (this.chartInstance.containPixel('grid', pointInPixel)) {
-                    const xIndexResult = this.chartInstance.convertFromPixel({ xAxisIndex: 0 }, pointInPixel);
-                    const xIndex = Array.isArray(xIndexResult) ? xIndexResult[0] : xIndexResult;
-                    if (typeof xIndex === 'number' && xIndex >= 0) {
-                        this.handleSelection(xIndex, -1);
-                    }
-                }
-            }
-        });
-    }
-    highlightSector(index) {
-        if (!this.chartInstance || this.selectedCategoryIndex !== null)
-            return;
-        const seriesCount = Array.isArray(this.chartOptions.series) ? this.chartOptions.series.length : 0;
-        this.chartInstance.dispatchAction({
-            type: 'highlight',
-            seriesIndex: Array.from({ length: seriesCount }, (_, i) => i),
-            dataIndex: index
-        });
-    }
-    clearHighlight() {
-        if (!this.chartInstance)
-            return;
-        const seriesCount = Array.isArray(this.chartOptions.series) ? this.chartOptions.series.length : 0;
-        this.chartInstance.dispatchAction({
-            type: 'downplay',
-            seriesIndex: Array.from({ length: seriesCount }, (_, i) => i)
-        });
-    }
-    onLegendSelectChanged(event) {
-        if (event && event.selected) {
-            this.currentLegendSelected = event.selected;
-            this.updateChartOptions();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 class EChartsHBarComponent extends EchartsBarComponent {
@@ -1402,14 +1295,14 @@ class EChartsHBarComponent extends EchartsBarComponent {
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsBarStackedComponent extends EchartsBarComponent {
@@ -1432,14 +1325,14 @@ class EChartsBarStackedComponent extends EchartsBarComponent {
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsHBarStackedComponent extends EchartsBarComponent {
@@ -1469,14 +1362,14 @@ class EChartsHBarStackedComponent extends EchartsBarComponent {
         this.director.makeBar(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarStackedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsHBarStackedComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsHBarStackedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsBarStackedRadialComponent extends EchartsBarComponent {
@@ -1503,90 +1396,16 @@ class EChartsBarStackedRadialComponent extends EchartsBarComponent {
         this.director.makeBarRadial(this.data, this.optionsOverrides, makeOpts);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedRadialComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsBarStackedRadialComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsBarStackedRadialComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts [initOpts]=\"initOptions\" [options]=\"chartOptions\" [autoResize]=\"true\" (chartInit)=\"onChartInit($event)\" (chartClick)=\"onChartClick($event)\" (legendSelectChanged)=\"onLegendSelectChanged($event)\"></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div class=\"echarts-container\" echarts \n  [options]=\"{}\"\n  [initOpts]=\"initOptions\" \n  [autoResize]=\"true\" \n  (chartInit)=\"onChartInit($event)\" \n  (chartClick)=\"onChartClick($event)\" \n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>\n", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
-/**
- * Applies a visual selection effect to line-based series.
- * Highlights the selected series and point, and dims everything else.
- *
- * @param series The series array to modify
- * @param selectedCategoryIndex Index of the selected category
- * @param selectedSeriesIndex Index of the selected series
- * @returns Modified series array
- */
-function applyLineSelectionStyle(series, selectedCategoryIndex, selectedSeriesIndex) {
-    if (selectedCategoryIndex === null || !series)
-        return series;
-    return series.map((s, sIdx) => {
-        const isSelectedSeries = sIdx === selectedSeriesIndex;
-        // Serie seleccionada: Línea con opacidad 1 para que destaque la tendencia.
-        // Serie NO seleccionada: Opacidad 0.20 para atenuar fuertemente.
-        const seriesOpacity = isSelectedSeries ? 1 : 0.20;
-        return {
-            ...s,
-            emphasis: {
-                disabled: true // Deshabilitar el énfasis (hover) cuando hay una selección activa
-            },
-            itemStyle: {
-                ...s.itemStyle,
-                opacity: seriesOpacity
-            },
-            lineStyle: {
-                ...s.lineStyle,
-                opacity: seriesOpacity
-            },
-            ...(s.areaStyle ? {
-                areaStyle: {
-                    ...s.areaStyle,
-                    opacity: isSelectedSeries ? 0.6 : 0.1
-                }
-            } : {}),
-            // Personalizamos los puntos individualmente
-            data: (s.data || []).map((val, idx) => {
-                const isSelectedPoint = isSelectedSeries && idx === selectedCategoryIndex;
-                const isOtherPointInSelectedSeries = isSelectedSeries && idx !== selectedCategoryIndex;
-                const originalPoint = (val && typeof val === 'object') ? val : { value: val };
-                if (isSelectedPoint) {
-                    return {
-                        ...originalPoint,
-                        z: 10, // Asegurar que el punto seleccionado esté por encima de los demás
-                        itemStyle: {
-                            ...originalPoint.itemStyle,
-                            opacity: 1,
-                            borderWidth: 2,
-                            borderColor: '#fff',
-                            shadowBlur: 10,
-                            shadowColor: 'rgba(0,0,0,0.5)'
-                        },
-                        symbolSize: 12
-                    };
-                }
-                else if (isOtherPointInSelectedSeries) {
-                    // Puntos de la serie seleccionada que NO son el clicado: un poco más pequeños y traslúcidos
-                    return {
-                        ...originalPoint,
-                        itemStyle: {
-                            ...originalPoint.itemStyle,
-                            opacity: 0.5
-                        },
-                        symbolSize: 6
-                    };
-                }
-                // Puntos de otras series o por defecto
-                return val;
-            })
-        };
-    });
-}
-
 class EchartsLineComponent extends BaseEchartsComponent {
     baseSeriesOptions = {
         type: 'line',
@@ -1595,10 +1414,11 @@ class EchartsLineComponent extends BaseEchartsComponent {
         animationEasing: 'cubicOut',
         smooth: true,
         smoothMonotone: 'x',
+        symbol: 'emptyCircle',
         symbolSize: 6,
         itemStyle: {
             shadowColor: 'rgba(0, 0, 0, 0.2)',
-            shadowBlur: 5,
+            shadowBlur: 4,
             shadowOffsetY: 2,
         },
         lineStyle: {
@@ -1611,15 +1431,19 @@ class EchartsLineComponent extends BaseEchartsComponent {
         },
         emphasis: {
             focus: 'none',
-            itemStyle: {
-                borderWidth: 2,
-                shadowBlur: 10,
-            },
             lineStyle: {
                 width: 4,
-                shadowBlur: 12,
+                shadowBlur: 10,
             }
         },
+        selectedMode: 'single',
+        select: {
+            itemStyle: {
+                color: 'rgba(255, 255, 255, 1)',
+                borderCap: 'round',
+                borderWidth: 8,
+            },
+        },
     };
     baseProduct = {
         chartKey: 'line',
@@ -1632,14 +1456,6 @@ class EchartsLineComponent extends BaseEchartsComponent {
     constructor() {
         super();
     }
-    onInputChanges(changes) {
-        if (changes['data']) {
-            this.selectedCategoryIndex = null;
-            this.selectedSeriesIndex = null;
-            this.currentLegendSelected = null;
-        }
-        super.onInputChanges(changes);
-    }
     make(makeOpts) {
         this.director.makeLine(this.data, this.optionsOverrides, makeOpts);
     }
@@ -1648,7 +1464,6 @@ class EchartsLineComponent extends BaseEchartsComponent {
             return;
         if (!this.data)
             return;
-        // 1.
         const makeBarOpts = {
             valueFormatter: this.valueFormatter,
             palette: this.palette,
@@ -1656,20 +1471,12 @@ class EchartsLineComponent extends BaseEchartsComponent {
         };
         this.make(makeBarOpts);
         const baseOptions = this.builder.getResult();
-        // 2. Re-apply legend selection state if exists
-        if (this.currentLegendSelected && baseOptions.legend) {
-            baseOptions.legend.selected = { ...this.currentLegendSelected };
-        }
-        //3.  Apply persistent selection style if a point is selected
-        if (this.selectedCategoryIndex !== null && baseOptions.series) {
-            baseOptions.series = applyLineSelectionStyle(baseOptions.series, this.selectedCategoryIndex, this.selectedSeriesIndex);
-        }
         this.triggerUpdate(baseOptions);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EchartsLineComponent, isStandalone: true, selector: "vs-echarts-line", providers: [
             provideVSEcharts(),
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EchartsLineComponent, decorators: [{
             type: Component,
@@ -1678,7 +1485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         NgxEchartsDirective,
                     ], providers: [
                         provideVSEcharts(),
-                    ], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 class EChartsAreaComponent extends EchartsLineComponent {
@@ -1695,14 +1502,14 @@ class EChartsAreaComponent extends EchartsLineComponent {
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 class EChartsAreaStackComponent extends EchartsLineComponent {
@@ -1720,14 +1527,14 @@ class EChartsAreaStackComponent extends EchartsLineComponent {
     builder = new EChartBuilder(this.variantBaseProduct);
     director = new VSECDirector(this.builder);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: EChartsAreaStackComponent, isStandalone: true, selector: "vs-echarts-bar", providers: [provideVSEcharts()], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: EChartsAreaStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vs-echarts-bar', standalone: true, imports: [
                         CommonModule,
                         NgxEchartsDirective,
-                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"chartOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (legendSelectChanged)=\"onLegendSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
+                    ], providers: [provideVSEcharts()], template: "<div\n  class=\"echarts-container\"\n  echarts\n  [options]=\"{}\"\n  [initOpts]=\"initOptions\"\n  [autoResize]=\"true\"\n  (chartInit)=\"onChartInit($event)\"\n  (chartClick)=\"onChartClick($event)\"\n  (chartSelectChanged)=\"onChartSelectChanged($event)\"\n></div>", styles: [".echarts-container{width:100%;height:100%;position:relative}\n"] }]
         }] });
 
 // Interfaces de Inputs de Base EChart Component //