How can I obtain the ECharts instance using the ID set by props after the ECharts has been created on the current page?

[zhangguolin333]

from nicegui import ui

option = {
    "title": {"text": "NED Coordinate System"},
    "tooltip": {"trigger": "axis", "axisPointer": {"type": "cross"}},
    "xAxis": {"type": "value", "name": "East (X)"},
    "yAxis": {"type": "value", "name": "North (Y)"},
    "series": [{
        "name": "Trajectory",
        "type": "line",
        "data": [[1, 2], [2, 3], [3, 5], [4, 7]]
    }]
}

def create_chart():
    with ui.element('div').style('width: 100%; height: 100vh; padding: 0; margin: 0;'):
        ui.echart(options=option).props('id=myEChart_01;').style('height: 100%; width: 100%')
        ui.add_body_html("""
            <script>
                window.addEventListener('load', () => {
                    const chartElement = document.getElementById('myEChart_01');
                    console.log(55555, chartElement);
                    if (chartElement) {
                        const myChart = echarts.init(chartElement);
                        options = myChart.getOption(); 
                        console.log(6666, options);
                    }
                });
            </script>
        """)

with ui.column():
    ui.button('create chart', on_click=create_chart)

ui.run(title='NED Chart', reload=False, native=False)

[python-and-novella]

please put code in code block.

[zhangguolin333]

Is already available in the code block

[python-and-novella]

where? plz use code block.

print('hello')

[python-and-novella]

you can get the id by

ui.echart().id

[python-and-novella]

from nicegui import ui

@ui.page('/')
def page_index():
    echart = ui.echart({
        'xAxis': {'type': 'value'},
        'yAxis': {'type': 'category', 'data': ['A', 'B'], 'inverse': True},
        'legend': {'textStyle': {'color': 'gray'}},
        'series': [
            {'type': 'bar', 'name': 'Alpha', 'data': [0.1, 0.2]},
            {'type': 'bar', 'name': 'Beta', 'data': [0.3, 0.4]},
        ],
    })

    ui.add_body_html("""
        <script>
            window.addEventListener('load', () => {
                const chartElement = document.getElementById('"""+f"c{echart.id}"+"""');
                console.log(55555, chartElement);
                if (chartElement) {
                    const myChart = echarts.getInstanceByDom(chartElement);
                    options = myChart.getOption();
                    console.log(6666, options);
                }
            });
        </script>
""")

ui.run()

[zhangguolin333]

@ui.page('/index_page')
def index_page():
    create_header()
    create_main_layout()
    create_footer()

def create_main_layout():
    global splitter_mid
    with ui.column().classes('absolute-center items-start w-full h-full mt-0 pt-0 border-0'):
        with ui.column().classes('w-full h-full mb-0 pt-0 border-0'):
            with ui.splitter(value=15.5, limits=(15.5, 15.5)).classes('w-full h-full') as splitter_mid:
                create_left_splitter(splitter_mid)
                create_right_splitter(splitter_mid)

def create_right_splitter(splitter_mid):
    global right_content_div

    if right_content_div is not None:
        right_content_div.clear() 

    with splitter_mid.after:
        with ui.column().classes('w-full h-full'):
            right_content_div = ui.element('div').classes('w-full h-full').style(
                'position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: auto;')

”create_left_splitter“ is the button area that triggers the display of the specified page , container "right_content_div" is all of the pages display in this area

[python-and-novella]

plz show minimal example,describe you problem clearly,
BTW,you're off-topic now,you're making the discussion complex.

[zhangguolin333]

It seems that I have found a solution, as follows:

def show_page(page_url, main_menu):
    main_menu.close()
    with right_content_div:
        # ui.open(page_url, new_tab=False)
        ui.element('iframe').props('src="' + page_url + '"').style('width:100%;height:100%;border:none;')

@ui.page('/page1')
def page1():
    # ui.button('返回主页面', on_click=lambda: ui.run_javascript('window.history.back()'))
    ui.label('This is Page 1')
    echart = ui.echart({
        'xAxis': {'type': 'value'},
        'yAxis': {'type': 'category', 'data': ['A', 'B'], 'inverse': True},
        'legend': {'textStyle': {'color': 'gray'}},
        'series': [
            {'type': 'bar', 'name': 'Alpha', 'data': [0.1, 0.2]},
            {'type': 'bar', 'name': 'Beta', 'data': [0.3, 0.4]},
        ],
    })

    ui.add_body_html("""
            <script>
                window.addEventListener('load', () => {
                    const chartElement = document.getElementById('"""+f"c{echart.id}"+"""');
                    console.log(55555, chartElement);
                    if (chartElement) {
                        const myChart = echarts.getInstanceByDom(chartElement);
                        options = myChart.getOption();
                        console.log(6666, options);
                    }
                });
            </script>
        """)

[zhangguolin333]

“add_body_html” is effective in the current page，is my understanding correct?

[rodja]

Yes.