created basic echarts element

nicegui/elements/echarts.js

@@ -0,0 +1,37 @@
+export default {
+  template: "<div></div>",
+  mounted() {
+    setTimeout(() => {
+      const imports = this.extras.map((extra) => import(window.path_prefix + extra));
+      Promise.allSettled(imports).then(() => {
+        this.chart = echarts.init(this.$el);
+        this.chart.setOption(this.options);
+        this.chart.resize();
+      });
+    }, 0); // NOTE: wait for window.path_prefix to be set in app.mounted()
+  },
+  beforeDestroy() {
+    this.destroyChart();
+  },
+  beforeUnmount() {
+    this.destroyChart();
+  },
+  methods: {
+    update_chart() {
+      if (this.chart) {
+        console.log(this.options);
+        this.chart.setOption(this.options);
+      }
+    },
+    destroyChart() {
+      if (this.chart) {
+        this.chart.destroy();
+      }
+    },
+  },
+  props: {
+    type: String,
+    options: Object,
+    extras: Array,
+  },
+};

nicegui/elements/echarts.py

@@ -0,0 +1,31 @@
+from typing import Dict, List
+
+from ..element import Element
+
+
+class ECharts(
+    Element, component="echarts.js", libraries=["lib/echarts/*.js"], extra_libraries=["lib/echarts/extensions/*.js"]
+):
+    def __init__(self, options: Dict, *, extras: List[str] = []) -> None:
+        """Chart
+
+        An element to create a chart using `ECharts <https://echarts.apache.org/>`_.
+        Updates can be pushed to the chart by changing the `options` property.
+        After data has changed, call the `update` method to refresh the chart.
+
+        :param options: dictionary of EChart options
+        :param extras: list of extra extensions to include
+        """
+        super().__init__()
+        self._props["type"] = type
+        self._props["options"] = options
+        self._props["extras"] = extras
+        self.libraries.extend(library for library in self.extra_libraries if library.path.stem in extras)
+
+    @property
+    def options(self) -> Dict:
+        return self._props["options"]
+
+    def update(self) -> None:
+        super().update()
+        self.run_method("update_chart")