add custom echarts integration to nicegui

How to integrate Apache ECharts in NiceGUI, but slightly customized.
Based on the zauberzeug/nicegui discussion apache echart always renders twice, why? #4501.

Example illustrating the problem https://depley.github.io/nicegui-custom-echarts/

research

TL;DR:

• just subclass ui.element and implement a corresponding Vue component
• currently echarts is integrated mainly via nicegui/elements/echart.py, nicegui/elements/echart.js

how to

• nicegui docs Configuration & Deployment: custom_vue_components
• nicegui example: Custom Vue Component

current implementation

• search 'echart' in nicegui repo, the interesting results:
  • .. nicegui/elements/echart.py
  • .. nicegui/elements/echart.js
  • .. nicegui/events.py
  • .. nicegui/ui.py
  • .. tests/test_echart.py

let's go

1. setup

   uv init
   uv add nicegui

2. create new package custom_elements with 1:1 copies of the original echart integration (nicegui/elements/echart.py, nicegui/elements/echart.js)

   • src/custom_elements/my_echart.py
   • src/custom_elements/my_echart.js

3. install new package editable

   uv pip install -e .

4. code

   • edits at custom_elements each indicated in comments between SECTION .. !SECTION
   • create main.py to run it

5. 🚀