A script to display echarts charts in jupyter notebook, both in notebook and in vscode!

jupyter_echarts.py

# -- consts --

ECHARTS_CDN = "https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min"
ECHARTS_REQUIREJS_CONF = f"requirejs.config({{paths: {{echarts: '{ECHARTS_CDN}',}}}});"
ECHARTS_TEMPLATE = f"""
    <div id="{{ID}}" style="width: {{WIDTH}};height:{{HEIGHT}};"></div>
    <script type="module">
    {ECHARTS_REQUIREJS_CONF}    
    requirejs(["echarts"], (echarts) => {{
                    let myChart = echarts.init(document.getElementById('{{ID}}'));
                    myChart.setOption({{OPTION}});
            }}
        )
    </script>
"""


def _multi_replace(string: str, replacements: dict):
    for k, v in replacements.items():
        string = string.replace(k, v)
    return string


def echarts(option: dict, width="800px", height="500px", id='chart'):
    import json
    from IPython.display import HTML

    option = json.dumps(option)
    h = _multi_replace(
        ECHARTS_TEMPLATE, {"{WIDTH}": width, "{HEIGHT}": height, "{OPTION}": option, "{ID}": id}
    )

    return HTML(h)


def main() -> None:
    from IPython.display import display

    option = {
        "xAxis": {
            "type": "category",
            "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        "yAxis": {"type": "value"},
        "series": [{"data": [150, 230, 224, 218, 135, 147, 260], "type": "line"}],
    }

    display(echarts(option))

The 'main' function demonstrates how to use this in jupyter