ECharts pane with a Surface3D chart seems to be broken

[julioasotodv]

Quick example, which can be ran in the notebook:

import panel as pn

pn.extension("echarts")

# Create ECharts 3D surface figure.
# can be done either from pyecharts or with JSON directly:
import math
from pyecharts.charts import Surface3D
from pyecharts import options as opts

def float_range(start, end, step, round_number=2):
    """Generates a range for the 3d surface"""
    temp = []
    while True:
        if start < end:
            temp.append(round(start, round_number))
            start += step
        else:
            break
    return temp


def surface3d_data():
    """Generates data for the plot"""
    for t0 in float_range(-3, 3, 0.05):
        y = t0
        for t1 in float_range(-3, 3, 0.05):
            x = t1
            z = math.sin(x ** 2 + y ** 2) * x / 3.14
            yield [x, y, z]

_data = list(surface3d_data())
surface3d = Surface3D(init_opts=opts.InitOpts(height="600px", 
                                              width="800px"))
surface3d.add(
        series_name="",
        shading="color",
        data=list(surface3d_data()),
        xaxis3d_opts=opts.Axis3DOpts(type_="value"),
        yaxis3d_opts=opts.Axis3DOpts(type_="value"),
        grid3d_opts=opts.Grid3DOpts(width=100, height=40, depth=100),
    )
surface3d.set_global_opts(title_opts=opts.TitleOpts(title="Scatter-VisualMap(Color)"),
                          visualmap_opts=opts.VisualMapOpts(dimension=2,
                                                            max_=1,
                                                            min_=-1,
                                                            range_color=["#313695",
                                                                         "#4575b4",
                                                                         "#74add1",
                                                                         "#abd9e9",
                                                                         "#e0f3f8",
                                                                         "#ffffbf",
                                                                         "#fee090",
                                                                         "#fdae61",
                                                                         "#f46d43",
                                                                         "#d73027",
                                                                         "#a50026"],
                                                           )
                         )

# We can pass to pn.pane.ECharts either a JSON or a pyecharts object.
# For the JSON object, we can just create it from the pyecharts figure
# created above:
import json
surface3d_json = json.loads(surface3d.dump_options())

echarts_pane = pn.pane.ECharts(surface3d)  # could also be pn.pane.ECharts(surface3d_json)

# It looks like ECharts pane is broken in Jupyter notebook. However,
# we can create a Bokeh Server from the notebook directly:
bokeh_server = echarts_pane.show()

# A new tab will be opened, but the chart will not appear...

So, the JS error in the web console is the following:

Error rendering Bokeh items: Error: Component series.surface not exists. Load it first.

And that's it. Thank you so much for the current ECharts integration in Panel!

[philippjfr]

Fixed in #1796 but note that echarts-gl either requires a size on the container (e.g. a Row or Column) or a fixed size on the ECharts pane itself.

[philippjfr]

For reference:

[julioasotodv]

Wow @philippjfr that was fast! Thanks a ton!