How to add pyecharts into a Dash app?

Dash Python
1

Hello, everybody.

In my project, I want to use interactive offline maps. So far, I’ve found a solution that might be more appropriate, which is to combine Dash and pyecharts, but at present the official website only gives the combination of pyecharts and flask, who can convert the following cases into Dash version?

Looking forward to your enthusiastic reply.

Greatly appreciated！

‘’’

from flask import Flask
from sklearn.externals import joblib
from flask import Flask,render_template,url_for
import pyecharts

server = Flask(__name__)

def render_test_1():
    attr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    v1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    v2 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    line = pyecharts.Line("Title1", "Title2")
    line.add("v1", attr, v1, mark_point=['average'])
    line.add("v2", attr, v2, mark_line=['average'], is_smooth=True)
    line.render('templates/bar01.html')

@server.route('/')
def do_main():
    render_test_1()
    return render_template('bar01.html')

if __name__ == '__main__':
    server.run(debug=True, port=9993, host="0.0.0.0")
2

I think you need to take a step back and try and understand what are you trying to achieve? Rather than skipping straight to how are you going to achieve it.

Dash is a Python abstraction layer over Plotly and ultimately React.js, components are built using React and properties are exposed that allow them to be updated and manipulated from the Python server.

While you can, with a little bit of difficulty, put other stuff inside a Dash application you will not get the callback controls over it that is what makes Dash useful.

pyecharts is a Python abstraction layer over echarts, which is built on top of zrender. Bridging these technologies is probably not going to be an easy task and likely will require a lot of maintenance. Perhaps if instead ask what you would like to do, e.g. Bar Chart animations with Dash, there might be an easy answer.

FYI: Plotly (and therefore Dash) offers multiple Map charts: https://plot.ly/python/maps/

3

Dear Damian

Thank you very much for your sincere reply, as you said, I really should think calmly about what I want, instead of skipping the process and running straight to the target.

Thank you for recommending the map link of Dash, I will seriously study and choose the type of map suitable for my project, if there is a question I will consult you and hope your help again .

4

Great question, I am really interested in an example as well!

5

Maybe give dash_echarts a try? GitHub - mergeforward/dash_echarts
here’s the code for the map of China!

import dash_echarts
import dash, random
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from os import path
import json


def main():
    '''
    dash_echarts examples
    name: china map
    author: dameng <pingf0@gmail.com>
    '''
    app = dash.Dash(__name__)

    option =  {
        'title': {
            'text': '中国地图测试',
            'subtext': '中国地图测试',
            'sublink': 'localhost:8050'
        },
        'tooltip': {
            'trigger': 'item',
            'formatter': '{b}<br/>{c}'
        },
        'toolbox': {
            'show': True,
            'orient': 'vertical',
            'left': 'right',
            'top': 'center',
            'feature': {
                'dataView': {'readOnly': False},
                'restore': {},
                'saveAsImage': {}
            }
        },
        'visualMap': {
            'min': 0,
            'max': 200,
            'text': ['High', 'Low'],
            'realtime': False,
            'calculable': True,
            'inRange': {
                'color': ['lightskyblue', 'yellow', 'orangered']
            }
        },
        'series': [
            {
                'name': '中国地图测试',
                'type': 'map',
                'mapType': 'china', 
                'label': {
                    'show': True
                },
                'data': [
                    {'name': '河南省', 'value': 16.7},
                    {'name': '上海市', 'value': 0.634050},
                    {'name': '北京市', 'value': 1.641054},
                    {'name': '广东省', 'value': 17.972507},
                    {'name': '新疆维吾尔自治区', 'value': 166.4897},
                    {'name': '西藏自治区', 'value': 122.84},
                ],
            }
        ]
    }

    events = ["click"]
    basepath = path.dirname(__file__)
    filepath = path.abspath(path.join(basepath, 'china.json'))


    with open(filepath) as json_file:
        china_map = json.load(json_file)

    app.layout = html.Div([
        html.P("hello", id='output'),
        dash_echarts.DashECharts(
            option = option,
            events = events,
            id='echarts',
            style={
                "width": '100vw',
                "height": '100vh',
            },
            maps={
                "china": china_map
            }
        ),
    ])


    @app.callback(
        Output('output', 'children'),
        [Input('echarts', 'n_clicks_data')])
    def update(data):
        if data:
            return f"clicked: {data['name']}"
        return 'not clicked!'


    app.run_server(debug=True)

if __name__ == '__main__':
    main()