# Show and Tell - Dash ECharts Components

**URL:** <https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [May 20, 2021, 7:37am UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120 "2021-05-20T07:37:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dameng](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dameng/32/14605_2.png) [@dameng](https://community.plotly.com/u/dameng)\
**Post date:** [May 20, 2021, 7:37am UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/1 "2021-05-20T07:37:00Z")

</div>

Hello Dashers!

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

[dash-echarts](https://github.com/mergeforward/dash_echarts)

## how to install

```bash
pip install 'dash_echarts[play]'

```

## gallery demo command

```bash
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f5e000ec7e1f1941637cf6d58e3fe1cd0197a4c6.gif)  
 ![dash_echarts_bar](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/32b18aae46122be52e6dc5b8977bcb30f481e392.gif)  
 ![dash_echarts_heat](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/df707c5bd1a2f6e710fa1dde0ac8d186731dd20c.gif)  
 ![dash_echarts_histbar](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/7/7ccd02434008c4a05be6a1028d62cb16f58af146.gif)  
 ![dash_echarts_linebar_mix](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/94af44320aea000cd205de854844f59bcd6ba1a4.gif)  
 ![dash_echarts_map](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/3/31423c52130110b8ab6ea1a76d51146d0bab5cc9.gif)  
 ![dash_echarts_scatter3d](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/2f50d3359df1135b2eee2503e65f3104a4375850.gif)  
 ![dash_echarts_stock](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/2aa9a980c11c47d68c1aea16393a2be529e39ed6.gif)

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 🙂

---

<div class="post-metadata">

**Author:** ![dameng](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dameng/32/14605_2.png) [@dameng](https://community.plotly.com/u/dameng)\
**Post date:** [May 20, 2021, 7:39am UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/2 "2021-05-20T07:39:22Z")

</div>

[![](https://raw.githubusercontent.com/mergeforward/dash-echarts/main/dash_echarts_air.gif) ](https://raw.githubusercontent.com/mergeforward/dash-echarts/main/dash_echarts_air.gif)

[![](https://raw.githubusercontent.com/mergeforward/dash-echarts/main/dash_echarts_mapbox_bar3d.gif) ](https://raw.githubusercontent.com/mergeforward/dash-echarts/main/dash_echarts_mapbox_bar3d.gif)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [May 24, 2021, 6:17pm UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/3 "2021-05-24T18:17:41Z")

</div>

Great stuff! Thanks for publishing this.

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

---

<div class="post-metadata">

**Author:** ![dameng](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dameng/32/14605_2.png) [@dameng](https://community.plotly.com/u/dameng)\
**Post date:** [May 26, 2021, 8:36am UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/4 "2021-05-26T08:36:50Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [May 27, 2021, 7:53pm UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/5 "2021-05-27T19:53:20Z")

</div>

Very nice! Thanks for sharing the example.

---

<div class="post-metadata">

**Author:** ![dameng](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dameng/32/14605_2.png) [@dameng](https://community.plotly.com/u/dameng)\
**Post date:** [May 29, 2021, 2:33am UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/6 "2021-05-29T02:33:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nicobockko](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@nicobockko](https://community.plotly.com/u/nicobockko)\
**Post date:** [May 15, 2024, 10:46am UTC](https://community.plotly.com/t/show-and-tell-dash-echarts-components/53120/8 "2024-05-15T10:46:02Z")

</div>

sir! i have a question about that!!  
can i use click\_event for legend??  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/6/06ce3310f5e80ca6eae0b6ffee9275db655f33aa.png)