echart: enable svg rendering (#3936)

add `enable_svg` option on echart to change chart renderer from `canvas
`to `svg`

---------

Co-authored-by: Falko Schindler <mail@falkoschindler.de>

nicegui/elements/echart.js

@@ -9,7 +9,7 @@ export default {
       await import("echarts-gl");
     }
 
-    this.chart = echarts.init(this.$el);
+    this.chart = echarts.init(this.$el, null, { renderer: this.renderer });
     this.chart.on("click", (e) => this.$emit("pointClick", e));
     for (const event of [
       "click",
@@ -90,5 +90,6 @@ export default {
   props: {
     options: Object,
     enable_3d: Boolean,
+    renderer: String,
   },
 };

nicegui/elements/echart.py

@@ -1,4 +1,4 @@
-from typing import Callable, Dict, Optional
+from typing import Callable, Dict, Literal, Optional
 
 from typing_extensions import Self
 
@@ -22,7 +22,12 @@ class EChart(Element,
              dependencies=['lib/echarts/echarts.min.js', 'lib/echarts-gl/echarts-gl.min.js'],
              default_classes='nicegui-echart'):
 
-    def __init__(self, options: Dict, on_point_click: Optional[Handler[EChartPointClickEventArguments]] = None, *, enable_3d: bool = False) -> None:
+    def __init__(self,
+                 options: Dict,
+                 on_point_click: Optional[Handler[EChartPointClickEventArguments]] = None, *,
+                 enable_3d: bool = False,
+                 renderer: Literal['canvas', 'svg'] = 'canvas',
+                 ) -> None:
         """Apache EChart
 
         An element to create a chart using `ECharts <https://echarts.apache.org/>`_.
@@ -32,10 +37,12 @@ class EChart(Element,
         :param options: dictionary of EChart options
         :param on_click_point: callback that is invoked when a point is clicked
         :param enable_3d: enforce importing the echarts-gl library
+        :param renderer: renderer to use ("canvas" or "svg")
         """
         super().__init__()
         self._props['options'] = options
         self._props['enable_3d'] = enable_3d or any('3D' in key for key in options)
+        self._props['renderer'] = renderer
 
         if on_point_click:
             self.on_point_click(on_point_click)