Cannot load custom js with <script> on version 6.x

Hi @RRosio , thanks for your help. But still not work. Here is an easy test html script you can try.
script = '''
'\n            <!DOCTYPE html>\n            <html lang="en" style="height: 100%">\n            <head>\n            <meta charset="utf-8">\n            </head>\n            <body style="height: 100%; margin: 0">\n\n            \n            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>   <div id="1716194668.8439384" style="height: 600px; width: 800px"></div>\n            \n            <script type="text/javascript">\n            var dom = document.getElementById(\'1716194668.8439384\');\n            dom.innerHTML = ""\n            dom.setAttribute(\'_echarts_instance_\', \'\')\n            var myChart = echarts.init(dom, null, {\n                renderer: \'canvas\',\n                useDirtyRect: false\n                });\n            var app = {};\n\n            var option;\n    option = {"echarts_id": "1716194668.8439384", "link_id": null, "figname": "", "title": {"show": true, "text": "dsds", "link": "", "target": "blank", "textStyle": {"fontStyle": "normal", "fontWeight": "bolder", "fontFamily": "sans-serif", "fontSize": 15, "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "subtext": "", "sublink": "", "subtarget": "blank", "textAlign": "center", "textVerticalAlign": "auto", "padding": 0, "itemGap": 10, "z": 2, "left": "55%", "top": "5%", "right": "auto", "bottom": "auto", "backgroundColor": "transparent", "borderColor": "#ccc", "changed_name_key": {"id_": "id"}}, "grid": {"show": true, "width": "auto", "height": "auto", "z": 2, "left": "20%", "top": "10%", "right": "10%", "bottom": "5%", "borderColor": "#ccc", "borderWidth": 1, "containLabel": true, "backgroundColor": "transparent", "changed_name_key": {"id_": "id"}}, "legend": {"show": true, "type": "plain", "width": "auto", "height": "auto", "orient": "vertical", "align": "auto", "itemWidth": 25, "itemHeight": 14, "symbolRotate": "inherit", "selectedMode": true, "padding": 5, "itemGap": 10, "z": 2, "left": "1%", "top": "center", "right": "auto", "bottom": "auto", "borderColor": "#ccc", "borderWidth": 1, "inactiveColor": "#ccc", "inactiveBorderColor": "#ccc", "inactiveBorderWidth": "auto", "selected": {}, "textStyle": {"overflow": "truncate"}, "pageButtonItemGap": 5, "pageButtonPosition": "end", "pageFormatter": "{current}/{total}", "pageIconColor": "#2f4554", "pageIconInactiveColor": "#aaa", "pageIconSize": 15, "animationDurationUpdate": 800, "selectorItemGap": 7, "selectorButtonGap": 10}, "brush": null, "yAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 35, "min": -1.198, "max": 1.198, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": 40.0}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "xAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 30, "min": -1.2, "max": 1.2, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": null}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "parallelAxis": null, "series": [{"type": "scatter", "name": "0", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[-0.42577929156507216, -0.9048270524660198], [-0.8763066800438636, 0.4817536741017152], [0.7289686274214119, -0.6845471059286883], [0.0627905195293133, 0.9980267284282716], [-0.7289686274214117, 0.6845471059286885], [0.18738131458572452, 0.9822872507286887], [-0.9685831611286311, -0.24868988716485502], [0.9297764858882513, 0.368124552684678], [0.42577929156507266, 0.9048270524660196], [0.4257792915650726, -0.9048270524660196], [-0.8090169943749473, 0.5877852522924732], [-0.8090169943749472, -0.5877852522924734], [0.30901699437494745, 0.9510565162951535], [-0.18738131458572482, 0.9822872507286886], [-0.9921147013144779, -0.12533323356430429], [-0.9685831611286311, 0.24868988716485482], [-0.9921147013144779, 0.1253332335643041], [0.9921147013144779, 0.12533323356430426], [0.5358267949789965, 0.8443279255020151], [0.9921147013144779, -0.1253332335643038], [-0.30901699437494756, -0.9510565162951535], [0.63742398974869, -0.770513242775789], [0.06279051952931372, -0.9980267284282716], [-0.5358267949789963, -0.8443279255020153], [0.30901699437494723, -0.9510565162951536], [0.8763066800438636, 0.4817536741017153], [0.9685831611286311, 0.2486898871648548], [0.5358267949789968, -0.844327925502015], [1.0, 0.0], [-0.6374239897486895, -0.7705132427757894], [-0.5358267949789969, 0.844327925502015], [-0.18738131458572463, -0.9822872507286887], [-0.4257792915650727, 0.9048270524660195], [-0.0627905195293134, 0.9980267284282716], [0.6374239897486896, 0.7705132427757893], [-1.0, -3.216245299353273e-16], [-0.9297764858882512, -0.3681245526846783], [0.9685831611286312, -0.2486898871648545], [0.9297764858882515, -0.36812455268467786], [-0.9297764858882515, 0.36812455268467775], [-0.30901699437494756, 0.9510565162951535], [0.18738131458572513, -0.9822872507286886], [0.8090169943749478, -0.5877852522924726], [0.8763066800438636, -0.4817536741017153], [-0.7289686274214116, -0.6845471059286887], [0.7289686274214116, 0.6845471059286887], [-0.6374239897486897, 0.7705132427757893], [-0.8763066800438636, -0.4817536741017154], [-0.06279051952931321, -0.9980267284282716], [0.8090169943749475, 0.5877852522924731]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}, {"type": "scatter", "name": "1", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[0.3406234332520581, -0.7238616419728157], [-0.6472135954999579, 0.4702282018339786], [0.14990505166857962, 0.785829800582951], [0.7936917610515823, 0.1002665868514434], [0.5831749019371293, 0.547637684742951], [0.7936917610515823, -0.10026658685144303], [-0.24721359549995806, 0.7608452130361228], [-0.743821188710601, -0.29449964214774266], [-0.42866143598319706, -0.6754623404016122], [-0.7748665289029049, 0.19895190973188387], [0.05023241562345098, -0.7984213827426173], [0.42866143598319745, -0.675462340401612], [0.5099391917989518, 0.6164105942206315], [-0.3406234332520582, 0.7238616419728157], [0.8, 0.0], [0.6472135954999583, -0.47022820183397807], [0.774866528902905, -0.1989519097318836], [-0.5099391917989519, 0.6164105942206315], [0.2472135954999578, -0.760845213036123], [-0.7936917610515823, -0.10026658685144343], [-0.7748665289029049, -0.19895190973188404], [-0.4286614359831975, 0.675462340401612], [0.647213595499958, 0.4702282018339785], [0.5831749019371295, -0.5476376847429506], [-0.24721359549995806, -0.7608452130361228], [0.14990505166858012, -0.7858298005829509], [0.7438211887106012, -0.2944996421477423], [-0.7936917610515823, 0.10026658685144328], [-0.8, -2.572996239482619e-16], [-0.7010453440350909, -0.3854029392813723], [-0.1499050516685797, -0.785829800582951], [-0.14990505166857987, 0.7858298005829509], [0.7748665289029049, 0.19895190973188384], [-0.5831749019371294, 0.5476376847429508], [-0.7010453440350909, 0.3854029392813722], [0.4286614359831973, 0.6754623404016121], [-0.05023241562345057, -0.7984213827426173], [-0.34062343325205774, -0.7238616419728159], [0.7438211887106011, 0.2944996421477424], [-0.5099391917989516, -0.6164105942206315], [-0.7438211887106012, 0.2944996421477422], [0.05023241562345065, 0.7984213827426173], [0.7010453440350909, 0.38540293928137226], [0.24721359549995797, 0.7608452130361228], [0.7010453440350909, -0.38540293928137226], [-0.5831749019371293, -0.547637684742951], [-0.050232415623450724, 0.7984213827426173], [-0.6472135954999578, -0.47022820183397873], [0.3406234332520581, 0.7238616419728157], [0.509939191798952, -0.6164105942206313]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}], "visualMap": null, "toolbox": {"show": true, "orient": "horizontal", "itemSize": 15, "itemGap": 8, "showTitle": true, "feature": {"dataZoom": {}, "saveAsImage": {}}, "z": 2, "left": "auto", "top": "auto", "right": "1%", "bottom": "auto", "width": "auto", "height": "auto", "popup": true, "changed_name_key": {"id_": "id"}}, "tooltip": {"show": true, "trigger": "item", "axisPointer": {"show": true, "type": "line"}, "showContent": true, "triggerOn": "mousemove|click", "hideDelay": 100, "enterable": true, "renderMode": "html", "transitionDuration": 0.4, "borderColor": "#333", "padding": 5, "order": "seriesAsc"}, "dataZoom": null, "event": null, "graphic": null, "radar": null, "figsize": {"height": 600, "width": 800}, "color": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"], "controler_data": null, "save_img": false, "port": "5004"};option = support_popup(option=option, height="600px", width="800px", inner_html=`\n\n        <html lang="en" style="height: 100%">\n        <title>EchartsLib</title>\n        <head> <meta charset="utf-8"> </head>\n        <body style="height: 100%; margin: 0">\n        \n        \n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/echarts_js"><\\/script>\n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/echarts_gl_js"><\\/script>\n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/dat_js"><\\/script>\n            <script type="text/javascript" src="http://127.0.0.1:5004/resources/echarts_wc_js"><\\/script>\n            \n\n        <div id="1716194668.8439384" style="height: 90%; width: 90%"></div>\n        <script type="text/javascript">\n            var dom = document.getElementById(\'1716194668.8439384\');\n            var myChart = echarts.init(dom, null, {\n                renderer: \'canvas\',\n                useDirtyRect: false\n                });\n            var app = {};\n\n            var option;\n        option = {"echarts_id": "1716194668.8439384", "link_id": null, "figname": "", "title": {"show": true, "text": "dsds", "link": "", "target": "blank", "textStyle": {"fontStyle": "normal", "fontWeight": "bolder", "fontFamily": "sans-serif", "fontSize": 15, "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "subtext": "", "sublink": "", "subtarget": "blank", "textAlign": "center", "textVerticalAlign": "auto", "padding": 0, "itemGap": 10, "z": 2, "left": "55%", "top": "5%", "right": "auto", "bottom": "auto", "backgroundColor": "transparent", "borderColor": "#ccc", "changed_name_key": {"id_": "id"}}, "grid": {"show": true, "width": "auto", "height": "auto", "z": 2, "left": "20%", "top": "10%", "right": "10%", "bottom": "5%", "borderColor": "#ccc", "borderWidth": 1, "containLabel": true, "backgroundColor": "transparent", "changed_name_key": {"id_": "id"}}, "legend": {"show": true, "type": "plain", "width": "auto", "height": "auto", "orient": "vertical", "align": "auto", "itemWidth": 25, "itemHeight": 14, "symbolRotate": "inherit", "selectedMode": true, "padding": 5, "itemGap": 10, "z": 2, "left": "1%", "top": "center", "right": "auto", "bottom": "auto", "borderColor": "#ccc", "borderWidth": 1, "inactiveColor": "#ccc", "inactiveBorderColor": "#ccc", "inactiveBorderWidth": "auto", "selected": {}, "textStyle": {"overflow": "truncate"}, "pageButtonItemGap": 5, "pageButtonPosition": "end", "pageFormatter": "{current}/{total}", "pageIconColor": "#2f4554", "pageIconInactiveColor": "#aaa", "pageIconSize": 15, "animationDurationUpdate": 800, "selectorItemGap": 7, "selectorButtonGap": 10}, "brush": null, "yAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 35, "min": -1.198, "max": 1.198, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": 40.0}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "xAxis": [{"show": true, "type": "value", "position": "bottom", "name": "", "nameLocation": "center", "nameTextStyle": {"color": "black", "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "backgroundColor": "", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "none", "ellipsis": "..."}, "nameGap": 30, "min": -1.2, "max": 1.2, "splitNumber": 5, "logBase": 10, "axisTick": {"show": true, "alignWithLabel": "none", "interval": "auto", "length": 5}, "axisLabel": {"show": true, "margin": 8, "showMinLabel": false, "showMaxLabel": false, "fontStyle": "normal", "fontWeight": "normal", "fontFamily": "sans-serif", "fontSize": 12, "backgroundColor": "transparent", "borderType": "solid", "shadowColor": "transparent", "textBorderType": "solid", "textShadowColor": "transparent", "overflow": "truncate", "ellipsis": "...", "width": null}, "splitLine": {"show": true, "interval": "auto"}, "splitArea": {"show": false, "interval": "auto"}, "dimension": "2d", "ignored": false, "changed_name_key": {"min_": "min", "max_": "max", "type_": "type", "name_": "name"}}], "parallelAxis": null, "series": [{"type": "scatter", "name": "0", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[-0.42577929156507216, -0.9048270524660198], [-0.8763066800438636, 0.4817536741017152], [0.7289686274214119, -0.6845471059286883], [0.0627905195293133, 0.9980267284282716], [-0.7289686274214117, 0.6845471059286885], [0.18738131458572452, 0.9822872507286887], [-0.9685831611286311, -0.24868988716485502], [0.9297764858882513, 0.368124552684678], [0.42577929156507266, 0.9048270524660196], [0.4257792915650726, -0.9048270524660196], [-0.8090169943749473, 0.5877852522924732], [-0.8090169943749472, -0.5877852522924734], [0.30901699437494745, 0.9510565162951535], [-0.18738131458572482, 0.9822872507286886], [-0.9921147013144779, -0.12533323356430429], [-0.9685831611286311, 0.24868988716485482], [-0.9921147013144779, 0.1253332335643041], [0.9921147013144779, 0.12533323356430426], [0.5358267949789965, 0.8443279255020151], [0.9921147013144779, -0.1253332335643038], [-0.30901699437494756, -0.9510565162951535], [0.63742398974869, -0.770513242775789], [0.06279051952931372, -0.9980267284282716], [-0.5358267949789963, -0.8443279255020153], [0.30901699437494723, -0.9510565162951536], [0.8763066800438636, 0.4817536741017153], [0.9685831611286311, 0.2486898871648548], [0.5358267949789968, -0.844327925502015], [1.0, 0.0], [-0.6374239897486895, -0.7705132427757894], [-0.5358267949789969, 0.844327925502015], [-0.18738131458572463, -0.9822872507286887], [-0.4257792915650727, 0.9048270524660195], [-0.0627905195293134, 0.9980267284282716], [0.6374239897486896, 0.7705132427757893], [-1.0, -3.216245299353273e-16], [-0.9297764858882512, -0.3681245526846783], [0.9685831611286312, -0.2486898871648545], [0.9297764858882515, -0.36812455268467786], [-0.9297764858882515, 0.36812455268467775], [-0.30901699437494756, 0.9510565162951535], [0.18738131458572513, -0.9822872507286886], [0.8090169943749478, -0.5877852522924726], [0.8763066800438636, -0.4817536741017153], [-0.7289686274214116, -0.6845471059286887], [0.7289686274214116, 0.6845471059286887], [-0.6374239897486897, 0.7705132427757893], [-0.8763066800438636, -0.4817536741017154], [-0.06279051952931321, -0.9980267284282716], [0.8090169943749475, 0.5877852522924731]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}, {"type": "scatter", "name": "1", "colorBy": "series", "z": 2, "xAxisIndex": 0, "yAxisIndex": 0, "legendHoverLink": true, "stackStrategy": "samesign", "cursor": "pointer", "clip": true, "emphasis": {"focus": "none"}, "seriesLayoutBy": "column", "data": [[0.3406234332520581, -0.7238616419728157], [-0.6472135954999579, 0.4702282018339786], [0.14990505166857962, 0.785829800582951], [0.7936917610515823, 0.1002665868514434], [0.5831749019371293, 0.547637684742951], [0.7936917610515823, -0.10026658685144303], [-0.24721359549995806, 0.7608452130361228], [-0.743821188710601, -0.29449964214774266], [-0.42866143598319706, -0.6754623404016122], [-0.7748665289029049, 0.19895190973188387], [0.05023241562345098, -0.7984213827426173], [0.42866143598319745, -0.675462340401612], [0.5099391917989518, 0.6164105942206315], [-0.3406234332520582, 0.7238616419728157], [0.8, 0.0], [0.6472135954999583, -0.47022820183397807], [0.774866528902905, -0.1989519097318836], [-0.5099391917989519, 0.6164105942206315], [0.2472135954999578, -0.760845213036123], [-0.7936917610515823, -0.10026658685144343], [-0.7748665289029049, -0.19895190973188404], [-0.4286614359831975, 0.675462340401612], [0.647213595499958, 0.4702282018339785], [0.5831749019371295, -0.5476376847429506], [-0.24721359549995806, -0.7608452130361228], [0.14990505166858012, -0.7858298005829509], [0.7438211887106012, -0.2944996421477423], [-0.7936917610515823, 0.10026658685144328], [-0.8, -2.572996239482619e-16], [-0.7010453440350909, -0.3854029392813723], [-0.1499050516685797, -0.785829800582951], [-0.14990505166857987, 0.7858298005829509], [0.7748665289029049, 0.19895190973188384], [-0.5831749019371294, 0.5476376847429508], [-0.7010453440350909, 0.3854029392813722], [0.4286614359831973, 0.6754623404016121], [-0.05023241562345057, -0.7984213827426173], [-0.34062343325205774, -0.7238616419728159], [0.7438211887106011, 0.2944996421477424], [-0.5099391917989516, -0.6164105942206315], [-0.7438211887106012, 0.2944996421477422], [0.05023241562345065, 0.7984213827426173], [0.7010453440350909, 0.38540293928137226], [0.24721359549995797, 0.7608452130361228], [0.7010453440350909, -0.38540293928137226], [-0.5831749019371293, -0.547637684742951], [-0.050232415623450724, 0.7984213827426173], [-0.6472135954999578, -0.47022820183397873], [0.3406234332520581, 0.7238616419728157], [0.509939191798952, -0.6164105942206313]], "animation": true, "animationThreshold": 2000, "animationDuration": 1000, "animationEasing": "cubicOut", "animationDurationUpdate": 300, "animationEasingUpdate": "cubicOut", "color": "", "coordinateSystem": "cartesian2d", "symbol": "circle", "symbolSize": 10, "symbolOffset": [0, 0], "large": true, "largeThreshold": 500, "progressive": 400, "progressiveThreshold": 3000, "data_dict": {}, "is_text": false, "ignore_axis": false}], "visualMap": null, "toolbox": {"show": true, "orient": "horizontal", "itemSize": 15, "itemGap": 8, "showTitle": true, "feature": {"dataZoom": {}, "saveAsImage": {}}, "z": 2, "left": "auto", "top": "auto", "right": "1%", "bottom": "auto", "width": "auto", "height": "auto", "popup": true, "changed_name_key": {"id_": "id"}}, "tooltip": {"show": true, "trigger": "item", "axisPointer": {"show": true, "type": "line"}, "showContent": true, "triggerOn": "mousemove|click", "hideDelay": 100, "enterable": true, "renderMode": "html", "transitionDuration": 0.4, "borderColor": "#333", "padding": 5, "order": "seriesAsc"}, "dataZoom": null, "event": null, "graphic": null, "radar": null, "figsize": {"height": 600, "width": 800}, "color": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"], "controler_data": null, "save_img": false, "port": "5004"};function setInnerHTML(elm, html) {\n  elm.innerHTML = html;\n  \n  Array.from(elm.querySelectorAll("script"))\n    .forEach( oldScriptEl => {\n      const newScriptEl = document.createElement("script");\n      \n      Array.from(oldScriptEl.attributes).forEach( attr => {\n        newScriptEl.setAttribute(attr.name, attr.value) \n      });\n      \n      const scriptText = document.createTextNode(oldScriptEl.innerHTML);\n      newScriptEl.appendChild(scriptText);\n      \n      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);\n  });\n};\nfunction support_scientific_notation(option) {\n  if (Array.isArray(option[\'yAxis\'])) {\n    for (var tar_ind = 0; tar_ind < option[\'yAxis\'].length; tar_ind++) {\n      if (option[\'yAxis\'][tar_ind][\'type\'] === \'value\') {\n        option[\'yAxis\'][tar_ind][\'axisLabel\'][\'formatter\'] = function(val) {\n          const superscripts = [\'⁰\', \'¹\', \'²\', \'³\', \'⁴\', \'⁵\', \'⁶\', \'⁷\', \'⁸\', \'⁹\',\'¹⁰\',\n                    \'¹¹\', \'¹²\', \'¹³\', \'¹⁴\', \'¹⁵\', \'¹⁶\', \'¹⁷\', \'¹⁸\', \'¹⁹\',\'²⁰\',\n                    \'²¹\', \'²²\', \'²³\', \'²⁴\', \'²⁵\', \'²⁶\', \'²⁷\', \'²⁸\', \'²⁹\'];\n          function toSuperscript(val) {\n            if (val.toString().length > 6) {\n              val = Number(val).toExponential().toString();\n              if (val.includes(\'-\')) {\n                val = val.split(\'-\');\n                var val0 = val[0];\n                var val1 = superscripts[val[1]];\n                return val0 + \'⁻\' + val1\n              }\n              else if (val.includes(\'+\')) {\n                val = val.split(\'+\');\n                var val0 = val[0];\n                var val1 = superscripts[val[1]];\n                return val0 + \'⁺\' + val1\n              }\n            }\n            else {\n              return val\n            }\n          }\n          return toSuperscript(val)\n        }\n      }\n    }\n  }\n  else {\n    if (option[\'yAxis\'][\'type\'] === \'value\') {\n      option[\'yAxis\'][\'axisLabel\'][\'formatter\'] = function(val) {\n        const superscripts = [\'⁰\', \'¹\', \'²\', \'³\', \'⁴\', \'⁵\', \'⁶\', \'⁷\', \'⁸\', \'⁹\',\'¹⁰\',\n                \'¹¹\', \'¹²\', \'¹³\', \'¹⁴\', \'¹⁵\', \'¹⁶\', \'¹⁷\', \'¹⁸\', \'¹⁹\',\'²⁰\',\n                \'²¹\', \'²²\', \'²³\', \'²⁴\', \'²⁵\', \'²⁶\', \'²⁷\', \'²⁸\', \'²⁹\'];\n        function toSuperscript(val) {\n          if (val.toString().length > 6) {\n            val = Number(val).toExponential().toString();\n            if (val.includes(\'-\')) {\n              val = val.split(\'-\');\n              var val0 = val[0];\n              var val1 = superscripts[val[1]];\n              return val0 + \'⁻\' + val1\n            }\n            else if (val.includes(\'+\')) {\n              val = val.split(\'+\');\n              var val0 = val[0];\n              var val1 = superscripts[val[1]];\n              return val0 + \'⁺\' + val1\n            }\n          }\n          else {\n            return val\n          }\n        }\n        return toSuperscript(val)\n      }\n    }\n  };\n  return option;\n};\n\nfunction custom_scatter_size(option) {\n  \n  for (var ind = 0; ind < option[\'series\'].length; ind++) {\n    if (option[\'series\'][ind][\'symbolSize\'] === \'array_size\') {\n      var ind_ = option[\'series\'][ind][\'data_dict\'][\'size\']\n      option[\'series\'][ind][\'symbolSize\'] = function (data) {return data[ind_];}\n    }\n  }\n  return option;\n  \n};\n\nfunction show_scatter_label(option) {\n  \n  for (var ind = 0; ind < option[\'series\'].length; ind++) {\n    if (option[\'series\'][ind][\'label\'] === \'show_label\') {\n      var ind_ = option[\'series\'][ind][\'data_dict\'][\'label\']\n      option[\'series\'][ind][\'label\'] = {\n        show: true,\n        formatter: function (params) {return params.data[ind_]; }\n      }\n    }\n  }\n  return option;\n};\n\nfunction custom_axis_label(option) {\n  if (Array.isArray(option[\'xAxis\'])) {\n    for (var ind = 0; ind < option[\'xAxis\'].length; ind++) {\n      if (option[\'xAxis\'][ind][\'axisLabel\'][\'formatter_func\']) {\n        var f = new Function(option[\'xAxis\'][ind][\'axisLabel\'][\'formatter_func\'].arguments,\n                             option[\'xAxis\'][ind][\'axisLabel\'][\'formatter_func\'].body)\n        option[\'xAxis\'][ind][\'axisLabel\'][\'formatter\'] = f\n      }\n    }\n  }\n  else {\n    if (option[\'xAxis\'][\'axisLabel\'][\'formatter_func\']) {\n      var f = new Function(option[\'xAxis\'][\'axisLabel\'][\'formatter_func\'].arguments,\n                           option[\'xAxis\'][\'axisLabel\'][\'formatter_func\'].body)\n      option[\'xAxis\'][\'axisLabel\'][\'formatter\'] = f\n    }\n  }\n  if (Array.isArray(option[\'yAxis\'])) {\n    for (var ind = 0; ind < option[\'yAxis\'].length; ind++) {\n      if (option[\'yAxis\'][ind][\'axisLabel\'][\'formatter_func\']) {\n        var f = new Function(option[\'yAxis\'][ind][\'axisLabel\'][\'formatter_func\'].arguments,\n                             option[\'yAxis\'][ind][\'axisLabel\'][\'formatter_func\'].body)\n        option[\'yAxis\'][ind][\'axisLabel\'][\'formatter\'] = f\n      }\n    }\n  }\n  else {\n    if (option[\'yAxis\'][\'axisLabel\'][\'formatter_func\']) {\n      var f = new Function(option[\'yAxis\'][\'axisLabel\'][\'formatter_func\'].arguments,\n                           option[\'yAxis\'][\'axisLabel\'][\'formatter_func\'].body)\n      option[\'yAxis\'][\'axisLabel\'][\'formatter\'] = f\n    }\n  }\n  return option;\n}\n\nfunction custom_tooltip(option, dimension=2, formatter=true) {\n\n  if (dimension === 2) {\n    var xaxis_key = \'xAxis\'\n    var yaxis_key = \'yAxis\'\n  }\n\n  else if (dimension === 3) {\n    var xaxis_key = \'xAxis3D\'\n    var yaxis_key = \'yAxis3D\'\n    var zaxis_key = \'zAxis3D\'\n  }\n\n  if (option[\'radar\']) {\n    var radar_names = []\n    for (var ind_ = 0; ind_ < option[\'radar\'][\'indicator\'].length; ind_++) {\n      radar_names.push(option[\'radar\'][\'indicator\'][ind_][\'name\']) \n    }\n  }\n  \n  \n  if (option[xaxis_key][\'name\'] !== null && option[xaxis_key][\'name\'] !== \'\' && Array.isArray(option[xaxis_key])!==true) {\n    var xaxis_name = option[xaxis_key][\'name\'];\n  }\n  else {\n    var xaxis_name = \'X\';\n  }\n\n  if (option[yaxis_key][\'name\'] !== null && option[yaxis_key][\'name\'] !== \'\'&& Array.isArray(option[xaxis_key])!==true) {\n    var yaxis_name = option[yaxis_key][\'name\'];\n  }\n  else {\n    var yaxis_name = \'Y\';\n  }\n\n  if (typeof zaxis_key !== \'undefined\') {\n    if (option[zaxis_key][\'name\'] !== \'\'&& Array.isArray(option[xaxis_key])!==true) {\n      var zaxis_name = option[zaxis_key][\'name\'];\n    }\n    else {\n      var zaxis_name = \'\';\n    }\n  }\n  \n  if (option[\'tooltip\']) {\n    if (option[\'tooltip\'][\'precision\']) {\n      var precision = option[\'tooltip\'][\'precision\']\n      option[\'tooltip\'][\'valueFormatter\'] = (value) => Number(value).toFixed(precision)\n    }\n\n    for (var ind_ = 0; ind_ < option[\'series\'].length; ind_++) {\n      if (option[\'series\'][ind_][\'tooltip\']) {\n        if (option[\'series\'][ind_][\'tooltip\'][\'precision\']) {\n          var precision = option[\'series\'][ind_][\'tooltip\'][\'precision\']\n          const fix = precision_ => value => value.toFixed(precision_),\n          fix_p = fix(precision);\n          option[\'series\'][ind_][\'tooltip\'][\'valueFormatter\'] = function (value) {\n            return fix_p(value)\n          } \n        }\n      }\n    }\n\n    if (formatter) {\n      option[\'tooltip\'][\'formatter\'] = function(params) {\n        if (params.seriesName.includes(\'series\')) {\n          var series_name = \'\'\n        }\n        \n        else {\n          var series_name = params.seriesName + \'<br>\'\n        }\n    \n        if (params.seriesType === \'scatter\') {\n          formatter = series_name\n              + xaxis_name + \': \'+ Math.round(params.value[0] * 100) / 100\n              +\'<br>\' + yaxis_name + \': \' + Math.round(params.value[1] * 100) / 100\n        }\n    \n        else if (params.seriesType === \'scatter3D\') {\n          formatter = series_name\n              + xaxis_name + \': \'+ Math.round(params.value[0] * 100) / 100\n              +\'<br>\' + yaxis_name + \': \' + Math.round(params.value[1] * 100) / 100\n              +\'<br>\' + zaxis_name + \': \' + Math.round(params.value[2] * 100) / 100\n        }\n        \n        else if (params.seriesType === \'radar\') {\n          formatter = params.name  + \'<br>\';\n          for (var ind_ = 0; ind_ < option[\'radar\'][\'indicator\'].length; ind_++) {\n            if (ind_ !== option[\'radar\'][\'indicator\'].length - 1) {\n              formatter += radar_names[ind_] + \': \' + Math.round(params.value[ind_] * 100) / 100 + \'<br>\'\n            }\n            else {\n              formatter += radar_names[ind_] + \': \' + Math.round(params.value[ind_] * 100) / 100\n            }\n          }\n        }\n      return formatter;\n      } \n    }\n  }\n  return option;\n};\n\nfunction support_brush_event(option) {\n  if (option[\'event\'][\'type_\'] === \'brushselected\') {\n    if (option[\'link_id\'] === null) {\n      var link_id = option[\'echarts_id\'];\n    }\n    else {\n      var link_id = option[\'link_id\'];\n    }\n    var dom = document.getElementById(link_id);\n    var bind_chart = echarts.init(dom, null, {\n        renderer: \'canvas\',\n        useDirtyRect: false\n    });\n    var last_selected = [];\n    bind_chart.on(option[\'event\'][\'type_\'], (params) => {\n      var brushed = [];\n      var brushComponent = params.batch[0];\n      for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {\n        var rawIndices = brushComponent.selected[sIdx].dataIndex;\n        brushed.push(rawIndices);\n      }\n      var brushed_all = brushed[0];\n\n      if (JSON.stringify(last_selected) !== JSON.stringify(brushed_all)) {\n\n        // Update memory\n        let testRequest = new Request(\'http://localhost:\' + option[\'port\'] +\'/function/js_call_python_function\', {\n          method: \'post\',\n          headers: {\n              \'Content-Type\': \'application/json;charset=utf-8;\',\n              \'Access-Control-Allow-Origin\':\'*\',\n              \'Access-Control-Allow-Credentials\': \'true\',\n              \'Access-Control-Allow-Methods\':\'POST,PATCH,OPTIONS\'\n          },\n          body: JSON.stringify({\'js_func_input\':{\'selected\': brushed_all},\n                                \'event_id\': option[\'event\'][\'event_id\']})\n        });\n        var dom_dict = {}\n        fetch(testRequest).then(response => {\n          var result = response.json();\n          result.then(res => {\n            dom_dict[res[\'link_id\']] = document.getElementById(res[\'link_id\']);\n            setInnerHTML(dom_dict[res[\'link_id\']], res[\'html\']);\n          });\n        });\n        last_selected = brushed_all;\n      }\n                            \n    // bind_chart.setOption(option);\n    })\n  }\n  return option;\n};\n\nfunction support_click_event(option) {\n  if (option[\'event\'][\'type_\'] === \'click\') {\n    if (option[\'link_id\'] === null) {\n      var link_id = option[\'echarts_id\'];\n    }\n    else {\n      var link_id = option[\'link_id\'];\n    }\n    var dom = document.getElementById(link_id);\n    var bind_chart = echarts.init(dom, null, {\n        renderer: \'canvas\',\n        useDirtyRect: false\n    });\n\n    if (option[\'series\'][0][\'orient\'] === \'vertical\') {\n      var value_idx = 0\n    }\n    else {\n      var value_idx = 1\n    }\n    \n\n    bind_chart.on(option[\'event\'][\'type_\'], (params) => {\n      if (option[\'event\'][\'task\'] === \'singleselect\') {\n        for (var ind_2 = 0; ind_2 < option[\'series\'][0][\'data\'].length; ind_2++) {\n          if (option[\'series\'][0][\'data\'][ind_2][\'itemStyle\'][\'color\'] !== \'#1f77b4\') {\n            option[\'series\'][0][\'data\'][ind_2][\'itemStyle\'][\'color\'] = \'#1f77b4\';\n          }\n        }\n        var idx = option[\'series\'][0][\'x_value\'].indexOf(params.value[value_idx])\n        option[\'series\'][0][\'data\'][idx][\'itemStyle\'][\'color\'] = \'#ff7f0e\';\n\n        var selected = params.value[value_idx];\n      }\n      else {\n        console.log(params);\n      }\n      \n      let testRequest = new Request(\'http://localhost:\' + option[\'port\'] +\'/function/js_call_python_function\', {\n        method: \'post\',\n        headers: {\n          \'Content-Type\': \'application/json;charset=utf-8;\',\n          \'Access-Control-Allow-Origin\':\'*\',\n          \'Access-Control-Allow-Credentials\': \'true\',\n          \'Access-Control-Allow-Methods\':\'POST,PATCH,OPTIONS\'\n        },\n        body: JSON.stringify({\'js_func_input\':{\'selected\': selected},\n                              \'event_id\': option[\'event\'][\'event_id\']})\n      });\n      var dom_dict = {}\n      fetch(testRequest).then(response => {\n        var result = response.json();\n        result.then(res => {\n          dom_dict[res[\'link_id\']] = document.getElementById(res[\'link_id\']);\n          setInnerHTML(dom_dict[res[\'link_id\']], res[\'html\']);\n        });\n      });\n      bind_chart.setOption(option);\n    });\n  }\n  return option;\n};function add_controler(option) {\n\n  var div_id = option[\'controler_data\'][\'div_id\'];\n  var schema = option[\'controler_data\'][\'schema\'];\n  var configParameters = option[\'controler_data\'][\'config\'];\n  var folder = option[\'controler_data\'][\'folder\'];\n  var label = option[\'controler_data\'][\'label\'];\n  var url = \'http://localhost:\'.concat(option[\'port\']);\n  \n  var DEFAULT_PALETTE = [\'#FF1F5B\', \'#00CD6C\', \'#009ADE\', \'#AF58BA\', \'#FFC61E\',\n  \'#F28522\', \'#A0B1BA\', \'#A6761D\']\n\n  var fieldIndices = schema.reduce(function (obj, item) {\n    obj[item.name] = item.index;\n    return obj;\n  }, {});\n\n  app.config = {};\n  for (var ind = 0; ind < Object.keys(configParameters).length; ind++) {\n    var attribute_name = Object.keys(configParameters)[ind];\n    app.config[attribute_name] = configParameters[attribute_name][\'default\']\n  }\n  \n  var data;\n  async function data_update() {\n\n    //if (labels.length == 1) {\n    //  labels = labels[0]\n    //}\n\n    var content = {\'sample_method\': app.config.Method,\n                   \'sample_max_size\': app.config.MaxNum,\n                   \'label\': label};\n    \n    \n    let testRequest = new Request(url + \'/function/get_sampled_data\', {\n      method: \'post\',\n      headers: {\n        \'Content-Type\': \'application/json;charset=utf-8;\',\n        \'Access-Control-Allow-Origin\':\'http://127.0.0.1:8888\',\n        \'Access-Control-Allow-Credentials\': \'true\',\n        \'Access-Control-Allow-Methods\':\'POST,PATCH,OPTIONS\'\n      },\n      body: JSON.stringify(content)\n    });\n    await fetch(testRequest).then(async response => {\n      let result = await response.json();\n      data = result[\'sampled_data\'];\n    });\n\n    series = []\n    for (var ind = 0; ind < data.length; ind++) {\n      series.push({\n        dimensions: [app.config.xAxis3D, app.config.yAxis3D, app.config.yAxis3D],\n        itemStyle: {opacity: app.config.opacity},\n        // symbol: app.config.symbol,\n        symbolSize: app.config.symbolSize,\n        color: DEFAULT_PALETTE[ind],\n        data: data[ind].map(function (item, idx) {\n          return [\n            item[fieldIndices[app.config.xAxis3D]],\n            item[fieldIndices[app.config.yAxis3D]],\n            item[fieldIndices[app.config.zAxis3D]],\n            idx\n          ];\n        })\n      });\n    }\n\n    myChart.setOption({\n      xAxis3D: {\n        name: app.config.xAxis3D\n      },\n      yAxis3D: {\n        name: app.config.yAxis3D\n      },\n      zAxis3D: {\n        name: app.config.zAxis3D\n      },\n      series: series\n    });\n  };\n\n  app.config[\'onDataChange\'] = data_update\n  data_update()\n\n  \n  app.config[\'onChange\'] = function () {\n\n    series = []\n    for (var ind = 0; ind < data.length; ind++) {\n      series.push({\n        dimensions: [app.config.xAxis3D, app.config.yAxis3D, app.config.yAxis3D],\n        // symbol: app.config.symbol,\n        itemStyle: {opacity: app.config.opacity},\n        symbolSize: app.config.symbolSize,\n        color: DEFAULT_PALETTE[ind],\n        data: data[ind].map(function (item, idx) {\n          return [\n            item[fieldIndices[app.config.xAxis3D]],\n            item[fieldIndices[app.config.yAxis3D]],\n            item[fieldIndices[app.config.zAxis3D]],\n            idx\n          ];\n        })\n      });\n    };\n  \n    myChart.setOption({\n      xAxis3D: {\n        name: app.config.xAxis3D\n      },\n      yAxis3D: {\n        name: app.config.yAxis3D\n      },\n      zAxis3D: {\n        name: app.config.zAxis3D\n      },\n      series: series\n    });\n  };\n  \n  app.configParameters = configParameters;\n  if (div_id !== null) {\n    var datgui = new dat.GUI({ name: \'settings\', autoPlace: false, width: \'25%\', closeOnTop: true});\n  }\n  else {\n    var datgui = new dat.GUI({ name: \'settings\', autoPlace: true, width: \'25%\', closeOnTop: true});\n  }\n\n  var folder_dict = {\'\': datgui}; \n  for (folder_name of Object.keys(folder)){\n    folder_dict[folder_name] = datgui.addFolder(folder_name)\n    folder_dict[folder_name].open()\n  }\n\n\tlet dom_dat_outer = document.getElementsByClassName(\'dg ac\');\n  let dom_dat = document.getElementsByClassName(\'dg main a\');\n\t// let pos = dom.getBoundingClientRect();\n\tdom_dat_outer[0].style.top = \'5%\';\n\tdom_dat[0].style.width = \'25%\';\n  \n\t//dom_dat[0].style.left = pos.left + \'px\';\n\n  for (let key of Object.keys(app.configParameters)) {\n    const param = app.configParameters[key]\n\n    if (param.folder == \'Sampler\') {\n      if ("min" in param) {\n        folder_dict[param.folder].add(app.config, key).min(param.min).max(param.max).step(1).name(param.display_name).onChange(app.config.onDataChange);\n      } else if ("options" in param) {\n        folder_dict[param.folder].add(app.config, key, param.options).name(param.display_name).onChange(app.config.onDataChange);\n      }\n    }\n\n    else if (key === \'opacity\') {\n      folder_dict[param.folder].add(app.config, key).min(param.min).max(param.max).step(0.1).name(param.display_name).onChange(app.config.onChange);\n    }\n\n    else if (param.folder === \'hide\') {\n      continue\n    }\n\n    else {\n      if ("min" in param) {\n        folder_dict[param.folder].add(app.config, key).min(param.min).max(param.max).step(1).name(param.display_name).onChange(app.config.onChange);\n      } else if ("options" in param) {\n        folder_dict[param.folder].add(app.config, key, param.options).name(param.display_name).onChange(app.config.onChange);\n      }\n    }\n  }\n\n  if (div_id !== null) {\n    const containerEl = document.getElementById(div_id)\n    containerEl.appendChild(gui.domElement);\n  }\n  \n  return datgui;\n};option = support_scientific_notation(option=option);option = custom_tooltip(option=option, dimension=2, formatter=true);option = custom_scatter_size(option=option);option = show_scatter_label(option=option);option = custom_axis_label(option=option);\n\n            if (option && typeof option === \'object\') {\n                myChart.setOption(option);\n                }\n\n            window.addEventListener(\'resize\', myChart.resize);\n        <\\/script>\n        </body>\n        </html>\n    <style>\n.dg.main.taller-than-window .close-button {\n    border-top: 1px solid #ddd;\n}\n\n.dg.main .close-button {\n    background-color: #e8e8e8;\n}\n \n.dg.main .close-button:hover {\n    background-color: #ddd;\n}\n\n.dg {\n    color: #555;\n    text-shadow: none !important;\n}\n\n.dg.main::-webkit-scrollbar {\n    background: #fafafa;\n}\n\n.dg.main::-webkit-scrollbar-thumb {\n    background: #bbb;\n}\n \n.dg li:not(.folder) {\n    background: #fafafa;\n    border-bottom: 1px solid #ddd;\n}\n \n.dg li.save-row .button {\n    text-shadow: none !important;\n}\n\n.dg li.title {\n    background: #e8e8e8 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;\n}\n\n.dg .cr.function:hover,.dg .cr.boolean:hover {\n    background: #fff;\n}\n \n.dg .c input[type=text] {\n    background: #e9e9e9;\n}\n \n.dg .c input[type=text]:hover {\n    background: #eee;\n}\n \n.dg .c input[type=text]:focus {\n    background: #eee;\n    color: #555;\n}\n \n.dg .c .slider {\n    background: #e9e9e9;\n}\n\n.dg .c .slider:hover {\n    background: #eee;\n}<\\/style>`);option = support_scientific_notation(option=option);option = custom_tooltip(option=option, dimension=2, formatter=true);option = custom_scatter_size(option=option);option = show_scatter_label(option=option);option = custom_axis_label(option=option);\n\n            if (option && typeof option === \'object\') {\n                myChart.setOption(option);\n                }\n\n            var resizeObserver = new ResizeObserver((entries) => {\n                myChart.resize();\n            });\n            resizeObserver.observe(dom);\n\n        </script>\n        </body>\n        </html>\n    '
'''
from IPython.display import HTML, display
display(HTML(script))
This works well in 5.x and 7.x
For plot appearance, you may need to change the div id to your iframe div id. And if you have any other js package example instead of echarts that works you can also send to me let mt try.
jupyter / notebook

Cannot load custom js with <script> on version 6.x #7325
