This guide uses a small Flask project as example to demonstrate how to use pyecharts in Flask. Please make sure you have installed Flask. If haven't installed yet, use pip install flask or other methods.

Step 0: Let's create a mini flask project

Linux/MacOS system

$ mkdir flask-echarts
$ cd flask-echarts
$ mkdir templates

Windows system

Create a flask-echarts folder. And then create templates subfolder in flask-echarts.

Step 1: Provide your own template for the project

Save the following html template code as a pyecharts.html file and move it to the new templates folder from the previous step.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Proudly presented by ECharts</title>
    {% for jsfile_name in script_list %}
        <script src="{{ host }}/{{ jsfile_name }}.js"></script>
    {% endfor %}
</head>

<body>
  {{ myechart|safe }}
</body>

</html>

Step 2: render your chart using chart_instance.render_embed()

Please save the following python file as server.py under your project root directory.

import random
from pyecharts import Scatter3D
from pyecharts.constants import DEFAULT_HOST
from flask import Flask, render_template


app = Flask(__name__)


@app.route("/")
def hello():
    s3d = scatter3d()
    return render_template('pyecharts.html',
                           myechart=s3d.render_embed(),
                           host=DEFAULT_HOST,
                           script_list=s3d.get_js_dependencies())


def scatter3d():
    data = [generate_3d_random_point() for _ in range(80)]
    range_color = [
        '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
        '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    scatter3D = Scatter3D("3D scattering plot demo", width=1200, height=600)
    scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)
    return scatter3D


def generate_3d_random_point():
    return [random.randint(0, 100),
            random.randint(0, 100),
            random.randint(0, 100)]

script_list is a list of echarts libraries that are required for the chart rendering on the page. The number of libraries varies according to the dependency requirements of the charts to be rendered.

host refers to the host for echarts libraries. The default host is https://pyecharts.github.io/assets/js. You can change them if you wish. And if you do so, please clone https://github.com/pyecharts/assets. Then, place js folder onto your own server.

Now the flask-echarts directory is

├── server.py
└── templates
    └── pyecharts.html

Step 3: run it

Linux/MacOS system

$ export FLASK_APP=server.py
$ flask run
* Serving Flask app "server"
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Windows system

$ set FLASK_APP=server.py
$ flask run
* Serving Flask app "server"
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Here's what you will get:

flask-0

Template extension

Here is a description of the template. {{ myechart|safe }} package is:

<div id="{{ chart_id }}" style="width:{{ my_width }}px;height:{{ my_height }}px;"></div>
<script type="text/javascript">
    var myChart_{{ chart_id }} = echarts.init(document.getElementById('{{ chart_id }}'), null, {renderer: '{{ renderer}}'});
    {{ custom_function }}
    var option_{{ chart_id }} = {{ options | safe }};
    myChart_{{ chart_id }}.setOption(option_{{ chart_id }});
    myChart_{{ chart_id }}.on("{{ event_name }}", {{ handler_name }});
</script>

So the actual combined template is like this

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Proudly presented by ECharts</title>
    {% for jsfile_name in script_list %}
        <script src="{{ host }}/{{ jsfile_name }}.js"></script>
    {% endfor %}
</head>

<body>
  <div id="{{ chart_id }}" style="width:{{ my_width }}px;height:{{ my_height }}px;"></div>
     <script type="text/javascript">
        var myChart_{{ chart_id }} = echarts.init(document.getElementById('{{ chart_id }}'), null, {renderer: '{{ renderer}}'});
        {{ custom_function }}
        var option_{{ chart_id }} = {{ options | safe }};
        myChart_{{ chart_id }}.setOption(option_{{ chart_id }});
        myChart_{{ chart_id }}.on("{{ event_name }}", {{ handler_name }});
    </script>
</body>

</html>

Developers could make changes to the template. Here is how to make the graph generated by pyecharts adaptive width using resize method. The template is modified as follows:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Proudly presented by ECharts</title>
    {% for jsfile_name in script_list %}
        <script src="{{ host }}/{{ jsfile_name }}.js"></script>
    {% endfor %}
</head>

<body>
  <div id="{{ chart_id }}" style="width:{{ my_width }};height:{{ my_height }}px;"></div>
    <script type="text/javascript">
        window.onload = function() {
            setTimeout(function() {
                var myChart_{{ chart_id }} = echarts.init(document.getElementById('{{ chart_id }}'), null, {renderer: '{{ renderer}}'});
                {{ custom_function }}
                var option_{{ chart_id }} = {{ options | safe }};
                myChart_{{ chart_id }}.setOption(option_{{ chart_id }});
                window.onresize = function() {
                    myChart_{{ chart_id }}.resize();
                };
            }, 1000);
        };
    </script>
</body>

</html>

The code is modified as follows

from pyecharts import Bar
from pyecharts_javascripthon.api import TRANSLATOR
from flask import Flask, render_template


REMOTE_HOST = "https://pyecharts.github.io/assets/js"

app = Flask(__name__)


@app.route("/")
def hello():
    _bar = bar_chart()
    javascript_snippet = TRANSLATOR.translate(_bar.options)
    return render_template(
        "pyecharts.html",
        chart_id=_bar.chart_id,
        host=REMOTE_HOST,
        renderer=_bar.renderer,
        my_width="100%",
        my_height=600,
        custom_function=javascript_snippet.function_snippet,
        options=javascript_snippet.option_snippet,
        script_list=_bar.get_js_dependencies(),
    )


def bar_chart():
    bar = Bar("我的第一个图表", "这里是副标题")
    bar.add(
        "服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90]
    )
    return bar

Effect

flask-1

Conclusion

It is extremely simple to include a pyexcharts instance in a Flask app. Please go ahead and put your own charts in flask.

For your reference, please find the example code in pyecharts/docs folder.