chore(deps): update dependency echarts to v6

package.json

@@ -94,7 +94,7 @@
     "@ngx-formly/core": "^6.2.2",
     "@ngx-translate/core": "16.0.4",
     "@siemens/ngx-datatable": "^24.0.0",
-    "echarts": "5.6.0",
+    "echarts": "6.0.0",
     "flag-icons": "7.5.0",
     "google-libphonenumber": "3.2.42",
     "gridstack": "11.5.1",

projects/charts-ng/package.json

@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@angular/common": "20",
     "@angular/core": "20",
-    "echarts": "^5.6.0"
+    "echarts": "^6.0.0"
   },
   "exports": {
     "./docs.json": {

projects/charts-ng/src/shared/echarts.custom.ts

@@ -34,6 +34,7 @@ import {
   VisualMapComponent
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
+import { LegacyGridContainLabel } from 'echarts/features';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 
 echarts.use([
@@ -70,7 +71,10 @@ echarts.use([
 
   // renderers
   CanvasRenderer,
-  SVGRenderer
+  SVGRenderer,
+
+  // features
+  LegacyGridContainLabel
 ]);
 
 export { echarts };

projects/charts-ng/src/shared/themes/element.ts

@@ -139,13 +139,15 @@ export const themeElement = {
       textStyle: {
         fontFamily
       },
-
+      richInheritPlainLabel: false,
       color: colorPalettes.default,
       gradientColor: gradientColors.default,
       backgroundColor: 'transparent',
       animationDuration: 700,
 
       title: {
+        left: 0,
+        top: 0,
         padding: [10, 0, 0, 10],
         textStyle: {
           fontFamily,
@@ -167,6 +169,7 @@ export const themeElement = {
         left: 'auto',
         right: 20,
         top: 35,
+        itemGap: 10,
         textStyle: {
           fontFamily,
           color: textColor,
@@ -274,6 +277,7 @@ export const themeElement = {
           hideOverlap: true
         },
         axisTick: {
+          show: true,
           alignWithLabel: true
         },
         splitLine: {
@@ -302,6 +306,7 @@ export const themeElement = {
           hideOverlap: true
         },
         axisTick: {
+          show: true,
           alignWithLabel: true
         },
         splitLine: {
@@ -342,7 +347,8 @@ export const themeElement = {
         },
         selectedDataBackground: {
           areaStyle: {
-            color: dataZoomLineColor
+            color: dataZoomLineColor,
+            opacity: 0.2
           },
           lineStyle: {
             color: dataZoomLineColor
@@ -388,10 +394,12 @@ export const themeElement = {
         areaStyle: {
           opacity: 0.3
         },
-        symbol: 'circle'
+        symbol: 'circle',
+        symbolSize: 4
       },
 
       pie: {
+        radius: [0, '75%'],
         label: {
           fontFamily,
           formatter: '{d}%',
@@ -400,6 +408,7 @@ export const themeElement = {
           fontSize
         },
         labelLine: {
+          length2: 15,
           lineStyle: {
             color: elementTextSecondary
           }