support arguments with JavaScript expressions

nicegui/elements/echart.js

@@ -20,6 +20,10 @@ export default {
       this.chart.setOption(this.options, { notMerge: this.chart.options?.series.length != this.options.series.length });
     },
     run_chart_method(name, ...args) {
+      if (name.startsWith(":")) {
+        name = name.slice(1);
+        args = args.map((arg) => new Function("return " + arg)());
+      }
       return this.chart[name](...args);
     },
   },

nicegui/elements/echart.py

@@ -66,8 +66,8 @@ class EChart(Element, component='echart.js', libraries=['lib/echarts/echarts.min
         If the function is awaited, the result of the method call is returned.
         Otherwise, the method is executed without waiting for a response.
 
-        :param name: name of the method
-        :param args: arguments to pass to the method
+        :param name: name of the method (a prefix ":" indicates that the arguments are JavaScript expressions)
+        :param args: arguments to pass to the method (Python objects or JavaScript expressions)
         :param timeout: timeout in seconds (default: 1 second)
         :param check_interval: interval in seconds to check for a response (default: 0.01 seconds)
 

website/documentation/content/echart_documentation.py

@@ -49,7 +49,11 @@ def dynamic_properties() -> None:
 
 @doc.demo('Run methods', '''
     You can run methods of the EChart instance using the `run_chart_method` method.
-    This demo shows how to show and hide the loading animation and how to get the current width of the chart.
+    This demo shows how to show and hide the loading animation, how to get the current width of the chart,
+    and how to add tooltips with a custom formatter.
+
+    The colon ":" in front of the method name "setOption" indicates that the argument is a JavaScript expression
+    that is evaluated on the client before it is passed to the method.
 ''')
 def methods_demo() -> None:
     echart = ui.echart({
@@ -66,5 +70,9 @@ def methods_demo() -> None:
         ui.notify(f'Width: {width}')
     ui.button('Get Width', on_click=get_width)
 
+    ui.button('Set Tooltip', on_click=lambda: echart.run_chart_method(
+        ':setOption', r'{tooltip: {formatter: params => "$" + params.value}}',
+    ))
+
 
 doc.reference(ui.echart)