.. _jspyechartsrst:

=========
pyecharts
=========


.. only:: html

    **Links:** :download:`notebook <js_pyecharts.ipynb>`, :downloadlink:`html <js_pyecharts2html.html>`, :download:`PDF <js_pyecharts.pdf>`, :download:`python <js_pyecharts.py>`, :downloadlink:`slides <js_pyecharts.slides.html>`, :githublink:`GitHub|_doc/notebooks/2016/pydata/js_pyecharts.ipynb|*`


`pyecharts <https://github.com/pyecharts/pyecharts>`__ a wrapper for a
new library
`echarts <https://ecomfe.github.io/echarts-doc/public/en/index.html>`__
made by `Baidu <https://www.baidu.com/>`__.

`documentation <https://github.com/pyecharts/pyecharts>`__
`source <https://github.com/pyecharts/pyecharts>`__
`installation <https://github.com/pyecharts/pyecharts#pyecharts-1>`__
`tutorial <https://github.com/pyecharts/pyecharts#basic-usage>`__
`gallery <http://gallery.echartsjs.com/>`__

.. code:: ipython3

    from jyquickhelper import add_notebook_menu
    add_notebook_menu()






.. contents::
    :local:





.. code:: ipython3

    from pyecharts import __version__
    __version__




.. parsed-literal::
    '1.0.0'



example
-------

.. code:: ipython3

    from pyecharts.charts import Bar
    from pyecharts import options as opts
    
    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]
    bar = Bar().set_global_opts(title_opts=opts.TitleOpts(title="Bar charts",
                                                          subtitle="precipitation and evaporation one year"))
    bar.add_xaxis(attr)
    ext = opts.MarkLineOpts(data=[opts.MarkLineItem(type_="average")])
    bar.add_yaxis("precipitation", v1, markline_opts=ext)
    bar.add_yaxis("evaporation", v2, markline_opts=ext)
    bar.render_notebook()






.. raw:: html

    <script>
        require.config({
            paths: {
                'echarts':'https://assets.pyecharts.org/assets/echarts.min'
            }
        });
    </script>

        <div id="0a5b39a28b0e4cc8b40e3f95c8e00f16" style="width:900px; height:500px;"></div>


    <script>
        require(['echarts'], function(echarts) {
            var chart_0a5b39a28b0e4cc8b40e3f95c8e00f16 = echarts.init(
                document.getElementById('0a5b39a28b0e4cc8b40e3f95c8e00f16'), 'white', {renderer: 'canvas'});
            var option_0a5b39a28b0e4cc8b40e3f95c8e00f16 = {
        "color": [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#749f83",
            "#ca8622",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3",
            "#f05b72",
            "#ef5b9c",
            "#f47920",
            "#905a3d",
            "#fab27b",
            "#2a5caa",
            "#444693",
            "#726930",
            "#b2d235",
            "#6d8346",
            "#ac6767",
            "#1d953f",
            "#6950a1",
            "#918597"
        ],
        "series": [
            {
                "type": "bar",
                "name": "precipitation",
                "data": [
                    2.0,
                    4.9,
                    7.0,
                    23.2,
                    25.6,
                    76.7,
                    135.6,
                    162.2,
                    32.6,
                    20.0,
                    6.4,
                    3.3
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "top",
                    "fontSize": 12
                },
                "markLine": {
                    "silent": false,
                    "precision": 2,
                    "label": {
                        "show": true,
                        "position": "top",
                        "fontSize": 12
                    },
                    "data": [
                        {
                            "type": "average"
                        }
                    ]
                }
            },
            {
                "type": "bar",
                "name": "evaporation",
                "data": [
                    2.6,
                    5.9,
                    9.0,
                    26.4,
                    28.7,
                    70.7,
                    175.6,
                    182.2,
                    48.7,
                    18.8,
                    6.0,
                    2.3
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "top",
                    "fontSize": 12
                },
                "markLine": {
                    "silent": false,
                    "precision": 2,
                    "label": {
                        "show": true,
                        "position": "top",
                        "fontSize": 12
                    },
                    "data": [
                        {
                            "type": "average"
                        }
                    ]
                }
            }
        ],
        "legend": [
            {
                "data": [
                    "precipitation",
                    "evaporation"
                ],
                "selected": {
                    "precipitation": true,
                    "evaporation": true
                },
                "show": true
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "text": "Bar charts",
                "subtext": "precipitation and evaporation one year"
            }
        ],
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "Jun",
                    "Jul",
                    "Aug",
                    "Sep",
                    "Oct",
                    "Nov",
                    "Dec"
                ]
            }
        ]
    };
            chart_0a5b39a28b0e4cc8b40e3f95c8e00f16.setOption(option_0a5b39a28b0e4cc8b40e3f95c8e00f16);
        });
    </script>




After you install
`pyecharts-snapshot <https://github.com/pyecharts/pyecharts-snapshot>`__
and `phantom-js <http://phantomjs.org/download.html>`__ (not needed
anymore apparently).

.. code:: ipython3

    bar.render(path="echart_render.html")




.. parsed-literal::
    'C:\\xavierdupre\\__home_\\GitHub\\jupytalk\\_doc\\notebooks\\2016\\pydata\\echart_render.html'



.. code:: ipython3

    from pyecharts_snapshot.main import make_a_snapshot
    await make_a_snapshot("echart_render.html", "echart_render.png")


.. parsed-literal::
    Generating file ...


.. parsed-literal::

    [W:pyppeteer.chromium_downloader] start chromium download.
    Download may take a few minutes.
    100%|███████████████████████████████████████████████████████████████| 133194757/133194757 [01:30<00:00, 1473419.97it/s]
    [W:pyppeteer.chromium_downloader] 
    chromium download done.
    [W:pyppeteer.chromium_downloader] chromium extracted to: C:\Users\xavie\AppData\Local\pyppeteer\pyppeteer\local-chromium\575458


.. parsed-literal::
    File saved in C:\xavierdupre\__home_\GitHub\jupytalk\_doc\notebooks\2016\pydata\echart_render.png


.. code:: ipython3

    from IPython.display import Image
    Image("echart_render.png", width='600')




.. image:: js_pyecharts_9_0.png
   :width: 600px