How to add echarts into dash app?

Dash Python
1

THe visualization of plotly is fantastic , but it is complex to draw plots or maps. Plotly only provides the map of USA , I can not use it to draw a map of china’s district . I am only a data analyst , coding is so so so hard for me , especially plotly’s mapbox… oh gosh … it’s disaster…555
I find it is easy to draw maps in python echarts (http://pyecharts.org/#/) . (http://pyecharts.org/#/zh-cn/charts?id=map（地图）) .
And I love dash to write html data reports. So i want to combine the advantages of both of them.
How to insert echarts into a dash app ??
I am struggling…

1 Like
2

I create a echarts plugin to make it easier

to use it with map, you can try run echarts_map after you install it (via pip install ‘dash_echarts[play]’)
and here’s the code

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} (p / km2)'
        },
        '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},
                ],
                'nameMap': {
                }
            }
        ]
    }

    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()
3 
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+'/static', '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', 'click_data')])
    def update(data):
        if data:
            return f"clicked: {data['name']}"
        return 'not clicked!'


    app.run_server(debug=True)

if __name__ == '__main__':
    main()

updated for new version of dash_echarts

1 Like