✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐍Plotly, Coiled CEOs Discuss Partnering & ML Experts show us how Dash + Dask apps work Register for the Webinar.

Show and Tell - Dash ECharts Components

Hello Dashers!

just want to share a new dash component for using dash with Apache ECharts!

dash-echarts

how to install

pip install 'dash_echarts[play]'

gallery demo command

echarts_play

note: the gallery is still in developing, more demos will be added to it in the future.

more gifs with dash_echarts

dash_echarts_bar_race
dash_echarts_bar
dash_echarts_heat
dash_echarts_histbar
dash_echarts_linebar_mix
dash_echarts_map
dash_echarts_scatter3d
dash_echarts_stock

note: as you can see from the gifs, we can use dash_echarts for developing real map mixed dashboards dashboards(via bmap or mapbox) , contact me for the support if you need it(docs still in composing stages).

hoping you guys enjoying it :slight_smile:

3 Likes

2 Likes

Great stuff! Thanks for publishing this.

Do the components include Input properties for clicking, hovering, and selecting points?

there’re two ways to use echarts with dash(for the events part),

  1. use the dash’s event system
  2. use js directly

dash_echarts support both ways

  1. for the dash way,
    currently, clicking(almost fully tested, via click_data callback attribute) and selecting is event (but not fully tested for selecting points in scatter chart),

  2. directly using js in dash_echarts
    for hovering, dash_echarts supports embeded js via funs and fun_values/fun_keys properties,
    I strongly recommend using echart’s hovering feature, we can use almost all of echarts’ own examples via the embeded js.

click_data usage

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()

Very nice! Thanks for sharing the example.

when you install dash_echarts via pip install 'dash_echarts[play]'
then you can run a script called echarts_play
it’s a gallery demo app with source coded inside

1 Like