How to integrate pyecharts?

[BurningWind]

Question

pyecharts：https://github.com/pyecharts/pyecharts-gallery/blob/master/README_EN.md

[falkoschindler]

https://pyecharts.org/#/en-us/

I'm not sure. At a first glance, pyecharts allows to create charts like this:

from pyecharts.charts import Bar

bar = Bar()
bar.add_xaxis(["shirts", "cardigans", "chiffons", "trousers", "heels", "socks"])
bar.add_yaxis("Merchant A", [5, 20, 36, 10, 75, 90])
bar.render()

render will generate a local HTML file, by default render.html will be generated in the current directory.
You can also pass in a path parameter, e.g. bar.render("mycharts.html").

You can also use bar.render_embed() to get a string of the rendered HTML. But since the result is the whole HTML page including html, head and body tag, I'm not sure how to easily extract individual components for ui.add_head_html, ui.add_body_html and ui.html. Maybe there's a way to avoid the rendering step and extract the options dictionary for ui.echart directly?

[Xiaotian13]

Since the key is to extract the corresponding options from pyecharts, you might want to try this:

from json import loads
ui.echart(options=loads(bar.dump_options_with_quotes())

The variable bar is a chart created from pyecharts. In my case it works.

[falkoschindler]

@deepindeep491 There's an error on the JavaScript console:

TypeError: Cannot read properties of undefined (reading 'regions')

Maybe this is related: apache/echarts#17291

[deepindeep491]

@falkoschindler Thanks for the reply! I'm new to python and don't know about echarts js lib.
What I want to do with nicegui is to display a interactive map from local GeoJson files, is there any way to achieve this?

[falkoschindler]

@deepindeep491 You can try using NiceGUI's map element ui.leaflet for rendering GeoJSON:

geojson_feature = {
    'type': 'Feature',
    'properties': {'name': 'Coors Field'},
    'geometry': {'type': 'Point', 'coordinates': [-104.99404, 39.75621]}
}
m = ui.leaflet(center=(39.75621, -104.99404)).classes('h-96')
m.generic_layer(name='geoJSON', args=[geojson_feature])

This is only a proof of concept. Please refer to ui.leaflet and the Leaflet and GeoJSON documentation for more details.

[Hazedd]

@falkoschindler thx! helpt me out was trying to add the whole feature collection, then it's just adding 1 feature...

anny change you know a way to get the click on feature event to work ?

[falkoschindler]

@Hazedd Sorry, I can't find a way to subscribe to click events on a feature.