diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 000000000..bd17dc9a3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,5 @@
+### 提 issue 注意事项
+0. 先仔细阅读文档中是否有关于您需要解决的问题的解决方法
+1. 提 issue 前请先搜搜看以往的 issue 有没有解决了您的问题
+2. 如若是不能正常使用的问题，请贴上详细的 pyecharts 版本，使用系统以及 Python 版本
+3. 最好详细描述问题，必要时加上**代码+贴图**
\ No newline at end of file
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 000000000..137bf0f50
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,6 @@
+### 提 PR 注意事项
+0. 同步到 dev 分支的最新版本
+1. 代码尽量保持与项目统一风格，尽量按照 PEP8 规范写代码，必要时附上注释
+2. 如需要时请添加单元测试，也请确保所有测试能够通过
+3. 将 PR 推送至远程的 dev 分支，master 分支只负责发布新版本。请在提交信息中描述关于该 PR 的详细信息，需要时加上截图。
+4. 若是对文档进行修改，请确保数字，字母与中文之间两边均有一空格，如你所看到的整篇文档一样
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 146f1d7fd..8f1560c12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,9 +8,7 @@ __pycache__/
.idea
# Distribution / packaging
.Python
-/json/
-/js/
-/images_/
+test/*.html
env/
build/
develop-eggs/
@@ -90,3 +88,7 @@ ENV/
# Rope project settings
.ropeproject
+*~
+
+# for mac
+.DS_store
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 000000000..589e70085
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,22 @@
+sudo: false
+language: python
+notifications:
+ email:
+ recipients:
+ - chenjiandongx@qq.com
+ on_success: always # default: change
+ on_failure: always # default: always
+python:
+ - 3.6
+ - 3.5
+ - 3.4
+ - 2.7
+before_install:
+ - pip install -r test/requirements.txt
+script:
+ - python setup.py install
+ - make tests
+after_success:
+ - cd test
+ - codecov
+
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000..ba8ee5fc4
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2018 chenjiandongx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/MANIFEST.in b/MANIFEST.in
new file mode 100644
index 000000000..61fec8554
--- /dev/null
+++ b/MANIFEST.in
@@ -0,0 +1,3 @@
+include README.md
+include changelog.md
+include pyecharts/templates/*.html
diff --git a/Makefile b/Makefile
new file mode 100644
index 000000000..f5df8ea52
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,4 @@
+all: tests
+
+tests:
+ bash test.sh
diff --git a/README.md b/README.md
index 0ffdd02fc..f4a4393bf 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,152 @@
-// TODO
\ No newline at end of file
+# [pyecharts](https://github.com/pyecharts/pyecharts) [](https://travis-ci.org/pyecharts/pyecharts) [](https://ci.appveyor.com/project/chenjiandongx/pyecharts) [](https://codecov.io/gh/pyecharts/pyecharts) [](https://badge.fury.io/py/pyecharts) [](https://opensource.org/licenses/MIT)
+
+> pyecharts is a library to generate charts using Echarts. It simply provides the interface of 28+ kinds of charts between Echarts and Python.
+
+
+## Introduction
+[Echarts](https://github.com/ecomfe/echarts) is an open source library from Baidu for data visualization in javascript. It has awesome demo pages so I started to look out for an interface library so that I could use it in Python. I ended up with [echarts-python](https://github.com/yufeiminds/echarts-python) on github but it lacks of documentation and was not updated for a while. Just like many other Python projects, I started my own project, pyecharts, referencing echarts-python and another library [pygal](https://github.com/Kozea/pygal).
+
+## Installation
+### Python Compatibility
+
+pyecharts works on Python2.7 and Python3.4+.
+
+pyecharts handles all strings and files with unicode encoding and you **MUST** use unicode string on Python 2.
+
+```python
+#coding=utf-8
+from __future__ import unicode_literals
+```
+
+### pyecharts
+
+You can install it via pip
+```
+$ pip install pyecharts
+```
+
+or clone it and install it
+```
+$ git clone https://github.com/pyecharts/pyecharts.git
+$ cd pyecharts
+$ pip install -r requirements.txt
+$ python setup.py install
+```
+
+Please note: since version 0.3.2, NO LONGER pyecharts comes with any map files. Please read next section for more informations.
+
+### map extensions
+
+Here is a list of map extensions from pyecharts dev team:
+
+1. [World countries include China map and World map](https://echarts-maps.github.io/echarts-countries-js/): [echarts-countries-pypkg](https://github.com/pyecharts/echarts-countries-pypkg) (1.9MB)
+2. [Chinese provinces and regions](https://echarts-maps.github.io/echarts-china-provinces-js/): [echarts-china-provinces-pypkg](https://github.com/pyecharts/echarts-china-provinces-pypkg) (730KB)
+3. [Chinese cities](https://echarts-maps.github.io/echarts-china-cities-js/): [echarts-china-cities-pypkg](https://github.com/pyecharts/echarts-china-cities-pypkg) (3.8MB)
+
+In order to install them, you can try one of them or all:
+
+```
+$ pip install echarts-countries-pypkg
+$ pip install echarts-china-provinces-pypkg
+$ pip install echarts-china-cities-pypkg
+```
+
+## Basic Usage
+
+### Render to Local Html File
+
+```python
+from pyecharts import Bar
+
+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("Bar chart", "precipitation and evaporation one year")
+bar.add("precipitation", attr, v1, mark_line=["average"], mark_point=["max", "min"])
+bar.add("evaporation", attr, v2, mark_line=["average"], mark_point=["max", "min"])
+bar.render()
+```
+
+It will create a file named *render.html* in the root directory, open file with your borwser.
+
+
+
+### Export as Images or Pdf
+
+[pyecharts-snapshot](https://github.com/pyecharts/pyecharts-snapshot) is a library which renders the output of pyecharts as a png, jpeg, gif image or a pdf file at command line or in your code.
+
+See more detail at the repositoty.
+
+## Platform Support
+
+pyecharts exposes chart API and template API so that it can work on some common platforms.
+
+### Work on Jupyter Notebook
+
+In the Notebook cell ,you can simply call the instance itself to diplay the chart.
+
+All chart classes in pyecharts implement the `_repr_html_` interface about [IPython Rich Display](http://ipython.readthedocs.io/en/stable/config/integrating.html#rich-display) .
+
+In the case of online jshost mode,you can also download as some file formats (ipynb/py/html/pdf) and run without jupyter notebook enviromnment.
+
+
+
+### Integrate With Web Framework
+
+With the help of pyecharts API,it is easy to integrate pyecharts to your web projects, such as Flask and Django.
+
+Demo
+
+
+
+## Advance Topics
+
+### Cusom Template FIles and Layout
+
+pyecharts exposes engine API so that you can use your own template file and integrate with CSS framework.
+
+In addition,pyecharts also ships a lot of jinja2 template functions used in template files.
+
+### Custom Map Library
+
+All map is hosted by the repository [echarts-china-cities-js](https://github.com/pyecharts/echarts-china-cities-js) and [echarts-countries-js](https://github.com/pyecharts/echarts-countries-js) .
+
+## Documentation
+
+* [中文文档](http://pyecharts.org/#/zh-cn/)
+* [English Documentation](http://pyecharts.org/#/en-us/)
+
+## Examples
+
+All examples is hosted on the repository [pyecharts-users-cases](https://github.com/pyecharts/pyecharts-users-cases) .
+
+## Test
+
+### Unit Test
+
+You should install the libraries in the requirements.txt files.
+
+```
+pip install -r test\requirements.txt
+```
+
+And run with the [nose](https://nose.readthedocs.io/en/latest/) commands.
+
+```shell
+$ make
+```
+
+### Quality Assurance
+
+ [flake8](http://flake8.pycqa.org/en/latest/index.html) and [pylint](https://www.pylint.org/) are used to improve the quality of code.
+
+### Continuous Integration
+
+The project is developed with [Travis CI](https://travis-ci.org/) and [AppVeyor](https://ci.appveyor.com/).
+
+## Author
+
+[](https://github.com/chenjiandongx) [](https://github.com/chfw) [](https://github.com/kinegratii)
+
+## License
+pyecharts is released under the MIT License. See LICENSE for more information.
diff --git a/appveyor.yml b/appveyor.yml
new file mode 100644
index 000000000..ae5ea944c
--- /dev/null
+++ b/appveyor.yml
@@ -0,0 +1,17 @@
+environment:
+
+ matrix:
+ - PYTHON: "C:\\Python27-x64"
+ - PYTHON: "C:\\Python35-x64"
+ - PYTHON: "C:\\Python36-x64"
+
+install:
+ - "%PYTHON%\\python.exe -m pip install -r requirements.txt"
+ - cd test
+ - "%PYTHON%\\python.exe -m pip install -r requirements.txt"
+ - "%PYTHON%\\python.exe -m pip install mock"
+
+build: off
+
+test_script:
+ "%PYTHON%/Scripts/nosetests --with-coverage --cover-package pyecharts --cover-package test && cd .. && %PYTHON%/Scripts/flake8 --exclude docs --builtins=unicode,xrange,long"
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/CNAME b/docs/CNAME
new file mode 100644
index 000000000..cd67d9422
--- /dev/null
+++ b/docs/CNAME
@@ -0,0 +1 @@
+pyecharts.org
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..3e7c415ac
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,26 @@
+# pyecharts 文档
+
+[](https://travis-ci.org/pyecharts/pyecharts) [](https://ci.appveyor.com/project/chenjiandongx/pyecharts) [](https://codecov.io/gh/pyecharts/pyecharts) [](https://badge.fury.io/py/pyecharts) [](https://opensource.org/licenses/MIT)
+
+
+pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，pyecharts 是为了与 Python 进行对接，方便在 Python 中直接使用数据生成图。
+
+**基本使用**
+
+[渲染图表](zh-cn/prepare) | [图表配置](zh-cn/charts)
+
+**高级话题**
+
+[图表 API](zh-cn/api) | [自定义地图](zh-cn/customize_map)
+
+**平台支持**
+
+[Jupyter Notebook](zh-cn/jupyter_notebook) | [Flask](zh-cn/flask) | [Django](zh-cn/django) | [web 框架整合](zh-cn/web_integration)
+
+**其他资源**
+
+[示例项目](https://github.com/pyecharts/pyecharts-users-cases) | [地图扩展项目](https://github.com/pyecharts/echarts-china-cities-js)
+
+**项目开发**
+
+[版本日志](zh-cn/changelog) | [发布日志](zh-cn/release-note/) | [开发团队](zh-cn/team) | [赞助者名单](zh-cn/donors) | [FAQ](zh-cn/faq)
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
new file mode 100644
index 000000000..e34201e6f
--- /dev/null
+++ b/docs/_coverpage.md
@@ -0,0 +1,13 @@
+
+
+# pyecharts
+
+> A Python Echarts Plotting Library.
+
+* Chart: 28+ kinds of charts
+* Map: 300+ Chinese cities / 200+ countries and regions
+* Platforms: Pure Python / Jupyter Notebook / Web Framework
+
+
+[GitHub](https://github.com/pyecharts/pyecharts/)
+[Get Started](zh-cn/prepare)
\ No newline at end of file
diff --git a/docs/class-relationship-diagram.uml b/docs/class-relationship-diagram.uml
new file mode 100644
index 000000000..90ceff81e
--- /dev/null
+++ b/docs/class-relationship-diagram.uml
@@ -0,0 +1,29 @@
+@startuml
+Base <|-- Chart
+Base <|-- Timeline
+Base <|-- Grid
+Base <|-- Overlap
+Chart <|-- Bar
+Chart <|-- Bar3D
+Chart <|-- Boxplot
+Chart <|-- EffectScatter
+Chart <|-- Funnel
+Chart <|-- Geo
+Chart <|-- Graph
+Chart <|-- HeapMap
+Chart <|-- KLine
+Chart <|-- Line
+Chart <|-- Line3D
+Chart <|-- Liquid
+Chart <|-- Map
+Chart <|-- Parallel
+Chart <|-- Pie
+Chart <|-- Polar
+Chart <|-- Radar
+Chart <|-- Sankey
+Chart <|-- Scatter
+Chart <|-- Scatter3D
+Chart <|-- ThemeRiver
+Chart <|-- TreeMap
+Chart <|-- WorldCould
+@enduml
\ No newline at end of file
diff --git a/docs/en-us/README.md b/docs/en-us/README.md
new file mode 100644
index 000000000..3d86ba6ce
--- /dev/null
+++ b/docs/en-us/README.md
@@ -0,0 +1,26 @@
+# pyecharts Document
+
+[](https://travis-ci.org/pyecharts/pyecharts) [](https://ci.appveyor.com/project/chenjiandongx/pyecharts) [](https://codecov.io/gh/pyecharts/pyecharts) [](https://badge.fury.io/py/pyecharts) [](https://opensource.org/licenses/MIT)
+
+
+[Echarts](https://github.com/ecomfe/echarts) is an open source library from Baidu for data visualization in javascript. It has awesome demo pages so I started to look out for an interface library so that I could use it in Python. I ended up with [echarts-python](https://github.com/yufeiminds/echarts-python) on github but it lacks of documentation and was not updated for a while. Just like many other Python projects, I started my own project, pyecharts, referencing echarts-python and another library [pygal](https://github.com/Kozea/pygal).
+
+**Basic Usage**
+
+[Chart Render](en-us/prepare) | [Chart Options](en-us/charts)
+
+**Advance Topics**
+
+[Chart API](en-us/api) | [Custom Map](en-us/customize_map)
+
+**Platform Support**
+
+[Jupyter Notebook](en-us/jupyter_notebook) | [Flask](en-us/flask) | [Django](en-us/django) | [Web Integration](en-us/web_integration)
+
+**Other Resources**
+
+[Demo Projects](https://github.com/pyecharts/pyecharts-users-cases) | [Map Extension](https://github.com/pyecharts/echarts-china-cities-js)
+
+**Development**
+
+[Changelog](zh-cn/changelog) | [Release Note](zh-cn/release-note) | [Team](en-us/team) | [FAQ](en-us/faq)
diff --git a/docs/en-us/_sidebar.md b/docs/en-us/_sidebar.md
new file mode 100644
index 000000000..988277a13
--- /dev/null
+++ b/docs/en-us/_sidebar.md
@@ -0,0 +1,10 @@
+- [Quick Start](en-us/prepare)
+- [Charts](en-us/charts)
+- [Map extensions](en-us/customize_map)
+- [pyecharts+Flask](en-us/flask)
+- [pyecharts+Django](en-us/django)
+- [Web integration](en-us/web_integration)
+- [Screenshots](zh-cn/gallery)
+- [API](en-us/api)
+- [FAQ](en-us/faq)
+
diff --git a/docs/en-us/api.md b/docs/en-us/api.md
new file mode 100644
index 000000000..fea6a79f4
--- /dev/null
+++ b/docs/en-us/api.md
@@ -0,0 +1,354 @@
+pyecharts API
+
+This document describes the public API for *pyecharts* library and it will be read by users and developers.
+
+## Total Proccess
+
+A common proccess can be listed as the following table:
+
+| Step | Code Demo | Remark |
+| ------------------------ | ---------------------------------------- | ------ |
+| 1 Create chart instance | `bar = Bar()` | |
+| 2 Add data | `bar.add(**kwargs)` | |
+| 3 Create config instance | `config = PyEchartsConfig(**kwargs)` | |
+| 4 Create template engine | `engine = EchartsEnvironment(pyecharts_config=config)` | |
+| 5 Get template file | `tpl = engine.get_template('demo_tpl.html')` | |
+| 6 Render | `html = tpl.render(bar=bar)` | |
+| 7 Write to target file | `write_utf8_html_file('my_demo_chart.html', html)` | |
+
+
+
+## pyecharts Config Items
+
+pyecharts follows the principle of "Config-Use" . The class `pyecharts.conf.PyEChartsConfig` contains all config items when using *pyecharts* library.Before building chart, you can use module function `configure` to set all config items.
+
+```python
+import pyecharts
+pyecharts.configure(P1=V1, P2=V2,...)
+```
+
+### Config Item List
+
+**echarts_template_dir**
+
+The diretory of template files. Default value: '.'(current diretory).
+
+**jshost**
+
+The repository of js dependency files.You can set it with a local host url or remote host url(starts with `http://` or `https://` ).
+
+You can also use `pyecharts.online()` to set this item.
+
+WIth the compatibility, this string value do not need `/` as its ending character.
+
+**force_js_embed**
+
+Whether to force to insert javascript file with internal embed mode. This item will affect the function`echarts_js_dependencies` .
+
+## Charts Classes
+
+Charts classes is the core component of this library.Each charts class represents the one kind of chart in [Echarts](http://echarts.baidu.com/) .
+
+This pictures the inherit tree for these charts classes.
+
+
+
+### Properties
+
+This table list properties for these chart classes.
+
+| Properites/Charts | Base | Chart/FOO_CHART | Grid | Overlap | Timeline | Page |
+| ----------------- | ---- | --------------- | ---- | ------- | -------- | ---- |
+| chart_id | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| width | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| heigth | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| options | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| js_dependencies | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+
+**chart_id**
+
+Data type:str.The identifier string for a chart. E.g.`'d2d9dcc4e28247518186c0882d356ba8'` 。
+
+**width**
+
+Data type:number/str.A valid string for css length.The width(px) of div container for a chart.
+
+**height**
+
+Data type:number/str.A valid string for css length.The height(px) of div container for a chart.
+
+**options**
+
+Data type:dict.The config options for a chart。Each chart has its own format and value.Please see more detail at ECharts document。
+
+**js_dependencies**
+
+*Changed in v0.4*
+
+Data type:list.The js filename collections for a chart's dependencies.Every element do not contain the filename extension(.js).E.g `{'echarts.min', 'fujian'}` .
+
+> In previous v0.4, the js_dependencies returns a unordered set.
+
+
+### Methods
+
+**add()**
+
+Add options and data to a chart.See the source code for more detail.
+
+| Chart Class | Function Sign |
+| ----------- | ---------------------------------------- |
+| Base | `add(**echarts_options)` |
+| Grid | `add(grid_width=None, grid_height=None, grid_top=None, grid_bottom=None, grid_left=None, grid_right=None)` |
+| Overlap | `add(chart, xaix_index=0, yaix_index=0, id_add_xaxis=False, is_add_yaxis=False)` |
+| Timeline | `add(chart, time_point)` |
+| Page | `add(achart_or_charts)` |
+
+**get_js_dependencies()**
+
+Gert the javascript dependencies of a chart.
+
+**render(path='render.html')**
+
+Render to a HTML page.
+
+**render_embed()**
+
+Render javascript code fragment including options.
+
+**print_echarts_options()**
+
+Print all options of charts.The new alias form `show_config`.
+
+**show_config()**
+
+Print all options of charts.From v0.3.3,this method has been deprecated and use `print_echarts_options` instead.
+
+## Multiple Chart
+
+`pyecharts.custom.page.Page` is used to show multiple chart in a html page,which includes properties and methods above.
+
+Also, `Page` inherits built-in `list` and len,iter,index,splice,append,extend are supported.
+
+Example,print the option for each chart in a page object.
+
+```python
+page = Page()
+line = Line('Demo Line')
+# ... Add data to line
+page.add(line)
+kline = KLine('Demo kline')
+# ... Add data to kline
+page.append(kline)
+
+for chart in page:
+ chart.show_config()
+```
+
+
+
+## Data Hanlder Methods
+
+These methods are tool methods for data handlers.
+
+**cast**
+
+`pyecharts.base.Base.cast(seq)`
+
+Class method for formatting and converting data.It can convert your origin data to the corresponding data for pyecharts library.
+
+Example:
+
+```python
+o_data = [('A', '34'), ('B', '45'), ('C', '12')]
+x, y = Base.cast(o_data)
+print(x) # ['A', 'B', 'C']
+print(y) # ['34', '45', '12']
+```
+
+**json_dumps**
+
+`pyecharts.utils.json_dumps(data, indent=0)`
+
+Convert *data* to json string, and add encoding for some specified data type:
+
+- Convert Datetime and Time objects to ISO8601 format string.
+- Cast numpy arrays. See the document of [astype](https://docs.scipy.org/doc/numpy/reference/generated/numpy.ndarray.astype.html) and [tolist](https://docs.scipy.org/doc/numpy/reference/generated/numpy.ndarray.tolist.html) .
+
+## Template Engine
+
+### Overview
+
+*pyecharts* use [Jinja2](http://jinja.pocoo.org/) as its template engine, with some extra template functions.
+
+> *Tempate function* and *template tag* is the same feature in the area of template engine.In Django it is called *template tag* and it is called *template function* in jinja2.
+
+### Engine Class
+
+`pyecharts.engine` module defines some engine class, which inherit from `jinja2.Environment`.Each class has different use case.
+
+**BaseEnvironment**
+
+`pyecharts.engine.BaseEnvironment`
+
+This class is the basic engine in pyecharts,and it inherits `jinja2.Environment` .It has the following extra features:
+
+- Add *pyecharts_config* attribute, it is a `PyEchartsConfig` object.
+- Add `echarts_*` template functions
+
+This class can be used for integration with web framework.
+
+**EChartsEnvironment**
+
+`pyecharts.engine.EChartsEnvironment`
+
+EChartsEnvironment class inherits `BaseEnvironment` .And it use `pyecharts_config.echarts_template_dir` as the default value of template folder.
+
+This class should not be used in web integration because of overwriting the default behavior of template file loader.
+
+**ECHAERTS_TEMPLATE_FUNCTIONS**
+
+`pyecharts.engine.ECHAERTS_TEMPLATE_FUNCTIONS`
+
+The dictionary containing template functions.It can be used in web integration.
+
+### 模板函数
+
+ pyecharts contains some template functions, which receives a or some `Chart` / `Page` objects as its parameter.See the following table.
+
+| Function Name/Function Sign | F(chart) | F(page) | F(chart1,chart2,...)/F(*page) |
+| ----------------------------- | -------- | ------- | ----------------------------- |
+| echarts_js_dependencies | ✓ | ✓ | ✓ |
+| echarts_js_dependencies_embed | ✓ | ✓ | ✓ |
+| echarts_container | ✓ | | |
+| echarts_js_content | ✓ | ✓ | ✓ |
+| echarts_js_content_wrap | ✓ | ✓ | ✓ |
+
+
+
+**echarts_js_dependencies**
+
+`pyecharts.template.echarts_js_dependencies(*args)`
+
+Render script html nodes with internal embed mode or enternal link.The mode will follow this table.
+
+Internal Embed(IE)
+
+```html
+
+```
+
+Enternal Link(EL)
+
+```html
+
+```
+
+Which mode is used is determined by the `PyEchartsConfig.jshost` and `PyEchartsConfig.force_js_embed` .See this table.
+
+| Value | local/remote | script mode | Use Case | Remark |
+| ---------------------------------------- | ------------ | ----------- | ------------------------- | --------------------- |
+| `/template/js/echarts` | local | IE | Generate one file locally | Default value |
+| `'https://chfw.github.io/jupyter-echarts/echarts'` | remote | IE | Generate on file | switch using `online` |
+| Other Local Host (E.g. `/static/js`) | local | EL | Integrate with Web | |
+| Other Remote Host(E.g. `hthttps://cdn.bootcss.com/echarts/3.7.2`) | remote | EL | Use remote JS | |
+
+Example
+
+```
+# Jinja2 Context function
+{{ echarts_js_dependencies('echarts') }}
+# Html Output
+
+
+# Python
+bar = Bar('Demo Bar')
+# Jinja2 Context function
+{{ echarts_js_dependencies(bar) }}
+# Html Output
+
+```
+
+
+
+**echarts_js_dependencies_embed**
+
+`pyecharts.template.echarts.js_dependencies_embed(*args)`
+
+Render script nodes in internal embed mode.Only support local host.
+
+**echarts_container**
+
+`pyecharts.template.echarts_container(chart)`
+
+Render the html node of container,output `` element.
+
+Example
+
+```
+# Python Code
+bar = Bar('Demo Bar')
+# Jinjia2 Context Function
+{{ echarts_container(bar) }}
+# Html Output
+
+```
+
+
+
+**echarts_js_content**
+
+`pyecharts.template.echarts_container(*chart)`
+
+Render the js initial code fragment without the `` .
+
+**echarts_js_content_wrap**
+
+`pyecharts.template.echarts_js_content_wrap(*args)`
+
+Render the js initial code fragment with the `` .
+
+### Example
+
+This is a full example.
+
+The pythonfile:demo.py
+
+```python
+from jinja2 import FileSystemLoader
+from pyecharts import Bar
+from pyecharts.engine import EchartsEnvironment
+from pyecharts.utils import write_utf8_html_file
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("柱状图数据堆叠示例", jshost=' https://cdn.bootcss.com/echarts/3.6.2')
+bar.add("商家A", attr, v1, is_stack=True)
+bar.add("商家B", attr, v2, is_stack=True)
+env = EchartsEnvironment(loader=FileSystemLoader('.'))
+tpl = env.get_template('demo.html')
+html = tpl.render(bar=bar)
+write_utf8_html_file('demo_gen.html', html)
+```
+
+The template file:demo.html
+
+```html
+
+
+
+
+ 自定义模板
+ {{ echarts_js_dependencies(bar) }}
+
+
+{{ echarts_container(bar) }}
+{{ echarts_js_content(bar) }}
+
+
+```
+
diff --git a/docs/en-us/charts.md b/docs/en-us/charts.md
new file mode 100644
index 000000000..4a5c24f9e
--- /dev/null
+++ b/docs/en-us/charts.md
@@ -0,0 +1,2259 @@
+> Charts: pyecharts configurations
+
+* Chart initialization
+* General options
+ * xyAxis：x, y axis in cartesian coordinate system(Line, Bar, Scatter, EffectScatter, Kline)
+ * dataZoom：dataZoom components for zoom-in and zoom-out. With them, it is possible to magnify a small area, to see the overall picture or to stay away from scattered points(Line, Bar, Scatter, EffectScatter, Kline)
+ * legend：legend component has different symbol, colour and name, and provide the interactive clicking functions to show or hide its associated data series.
+ * label：text string on the chart, for marking the charts with sensible details, such as value, name.
+ * lineStyle：line style for Line, Polar, Radar, Graph, Parallel.
+ * grid3D：gird3D components in cartesian coordinate system(Bar3D, Line3D, Scatter3D)
+ * visualMap：It is a type of component for visual encoding, which maps the data to visual channels
+* Charts
+ * Bar
+ * Bar3D
+ * EffectScatter
+ * Funnel
+ * Gauge
+ * Geo
+ * Graph
+ * HeatMap
+ * Kline
+ * Line
+ * Line3D
+ * Liquid
+ * Map
+ * Parallel
+ * Pie
+ * Polar
+ * Radar
+ * Scatter
+ * Scatter3D
+ * WordCloud
+* Customize
+ * Grid
+ * Overlap
+ * Page
+ * Timeline
+* Style
+* About
+
+
+# Chart initialization
+The parameter a chart type initialize accept（the same to all the chart type）.
+
+* title -> str
+ default -> ''
+ The main title text, supporting for \n for newlines.
+* subtitle -> str
+ defalut -> ''
+ Subtitle text, supporting for \n for newlines.
+* width -> int
+ defalut -> 800(px)
+ Canvas width
+* height -> int
+ defalut -> 400(px)
+ Canvas height
+* title_pos -> str/int
+ defalut => 'left'
+ Distance between grid component and the left side of the container.title_pos value can be instant pixel value like 20;
+ it can also be percentage value relative to container width like '20%';it can also be 'left', 'center', or 'right'.
+ If the title_pos value is set to be 'left', 'center', or 'right',then the component will be aligned automatically based on position.
+* title_top -> str/int
+ default -> 'top'
+ Distance between grid component and the top side of the container.top value can be instant pixel value like 20;
+ it can also be percentage value relative to container width like '20%';it can also be 'top', 'middle', or 'bottom'.
+ If the left value is set to be 'top', 'middle', or 'bottom',then the component will be aligned automatically based on position.
+* title_color -> str
+ defalut -> '#000'
+ main title text color.
+* subtitle_color -> str
+ defalut -> '#aaa'
+ subtitle text color.
+* title_text_size -> int
+ defalut -> 18
+ main title font size
+* subtitle_text_size -> int
+ defalut -> 12
+ subtitle text color.
+* background_color -> str
+ defalut -> '#fff'
+ Background color of title, which is transparent by default.
+ Color can be represented in RGB, for example 'rgb(128, 128, 128)'.RGBA can be used when you need alpha channel, for example 'rgba(128, 128, 128, 0.5)'.
+ You may also use hexadecimal format, for example '#ccc'.
+* page_title -> str
+ You can specify the title for render.html. Default is 'Echarts'
+
+
+# General options
+
+**Sitting general configuration in```add()```**
+
+xyAxis：x, y axis in cartesian coordinate system(Line, Bar, Scatter, EffectScatter, Kline)
+
+* is_convert -> bool
+ It specifies whether to convert xAxis and yAxis.
+* xy_text_size -> int
+ axis name font size
+* namegap -> int
+ Gap between axis name and axis line.
+* x_axis -> list
+ xAxis data
+* xaxis_name -> str
+ Name of xAxis
+* xaxis_name_pos -> str
+ Location of xAxis name.It can be 'start'，'middle'，'end'
+* xaxis_rotate -> int
+ Rotation degree of xaxis label, which is especially useful when there is no enough space for category axis.Rotation degree is from -90 to 90.
+* xaxis_min -> int/float
+ The minimun value of xaxis.
+* xaxis_max -> int/float
+ The maximun value of xaxis.
+* xaxis_type -> str
+ Type of xaxis
+ * 'value': Numerical axis, suitable for continuous data.
+ * 'category': Category axis, suitable for discrete category data. Data should only be set via data for this type.
+ * 'time': Time axis, suitable for continuous time series data. As compared to value axis,it has a better formatting for time and a different tick calculation method. For example,it decides to use month, week, day or hour for tick based on the range of span.
+ * 'log': Log axis, suitable for log data.
+* y_axis -> list
+ yAxis data
+* yaxis_formatter -> str
+ Formatter of axis label, which supports string template and callback function.example: '{value} kg'
+* yaxis_name -> str
+ Name of yAxis
+* yaxis_name_pos -> str
+ Location of yAxis name.It can be 'start'，'middle'，'end'
+* yaxis_rotate -> int
+ Rotation degree of xaxis label, which is especially useful when there is no enough space for category axis.Rotation degree is from -90 to 90.
+* yaxis_min -> int/float
+ The minimun value of yaxis.
+* yaxis_max -> int/float
+ The maximun value of yaxis.
+* yaxis_type -> str
+ Type of yaxis
+ * 'value': Numerical axis, suitable for continuous data.
+ * 'category': Category axis, suitable for discrete category data. Data should only be set via data for this type.
+ * 'time': Time axis, suitable for continuous time series data. As compared to value axis,it has a better formatting for time and a different tick calculation method. For example,it decides to use month, week, day or hour for tick based on the range of span.
+ * 'log': Log axis, suitable for log data.
+* interval -> int
+ The display interval of the axis scale label is valid in the category axis.By default, labels are displayed using labels that do not overlap the labels.
+ Set to 0 to force all labels to be displayed and label is one by one if setting as 1; If 2, it will be one label separates from each other, and so on.
+
+
+dataZoom：dataZoom components for zoom-in and zoom-out. With them, it is possible to magnify a small area, to see the overall picture or to stay away from scattered points(Line, Bar, Scatter, EffectScatter, Kline)
+
+* is_datazoom_show -> bool
+ defalut -> False
+ It specifies whether to use the datazoom component.
+* datazoom_type -> str
+ defalut -> 'slider'
+ datazoom type, 'slider', 'inside', or 'both'
+* datazoom_range -> list
+ defalut -> [50, 100]
+ The range percentage of the window out of the data extent, in the range of 0 ~ 100.
+* datazoom_orient -> str
+ Specify whether the layout of dataZoom component is horizontal or vertical.'horizontal' or 'vertical'
+ What's more,it indicates whether the horizontal axis or vertical axis is controlled,by default in catesian coordinate system.
+
+
+legend：legend component has different symbol, colour and name, and provide the interactive clicking functions to show or hide its associated data series.
+
+* is_legend_show -> bool
+ defalut -> True
+ It specifies whether to show the legend component.
+* legend_orient -> str
+ defalut -> 'horizontal'
+ The layout orientation of legend.It can be 'horizontal', 'vertical'
+* legend_pos -> str
+ defalut -> 'center'
+ Distance between legend component and the left side of the container.
+ legend_pos value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';
+ and it can also be 'left', 'center', or 'right'.
+* legend_top -> str
+ defalut -> 'top'
+ Distance between legend component and the top side of the container.
+ legend_top value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';
+ and it can also be 'top', 'middle', or 'bottom'.
+* legend_selectedmode -> str/bool
+ State table of selected legend. 'single' or 'multiple'.or use False to disable it.
+
+
+label：text string on the chart, for marking the charts with sensible details, such as value, name.
+
+* is_label_show -> bool
+ defalut -> False
+ It specifies whether to show laebl in normal status.
+* is_emphasis -> bool
+ defalut -> False
+ It specifies whether to show laebl in emphasis status.
+* label_pos -> str
+ defalut -> 'top'
+ Label position.It can be 'top', 'left', 'right', 'bottom', 'inside','outside'
+* label_text_color -> str
+ defalut -> '#000'
+ Label text color.
+* label_text_size -> int
+ defalut -> 12
+ Label font size.
+* is_random -> bool
+ defalut -> False
+ It specifies whether to random global color list.
+* label_color -> list
+ Customize the label color. It will modify Global color list, and all chart legend colors can be config here. Such as Bar's columnar color, Line's line color, and so on.
+* formatter -> list
+ Data label formatter,it can be 'series', 'name', 'value', 'precent'
+
+**Tip：** is_random random disorganize legend colour and list,it's kind of switch style? try it.
+
+
+lineStyle：line style for Line, Polar, Radar, Graph, Parallel.
+
+* line_width -> int
+ default -> 1
+ Line width.
+* line_opacity -> float
+ default -> 1
+ Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
+* line_curve -> float
+ default -> 0
+ Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature. -> Graph
+* line_type -> str
+ Line type,it can be 'solid', 'dashed', 'dotted'
+
+grid3D：gird3D components in cartesian coordinate system(Bar3D, Line3D, Scatter3D)
+
+* grid_width -> int
+ Width of grid component. Adaptive by default.
+* grid_height -> int
+ Height of grid component. Adaptive by default.
+* grid_top -> int/str
+ Distance between grid component and the top side of the container.
+ grid_top value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'top', 'middle', or 'bottom'.
+ If the grid_top value is set to be 'top', 'middle', or 'bottom',then the component will be aligned automatically based on position.
+* grid_bottom -> int/str
+ Distance between grid component and the bottom side of the container.
+ grid_bottom value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%'.
+* grid_left -> int/str
+ Distance between grid component and the left side of the container.
+ grid_left value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'left', 'center', or 'right'.
+ If the grid_left value is set to be 'left', 'center', or 'right',then the component will be aligned automatically based on position.
+* grid_right -> int/str
+ Distance between grid component and the right side of the container.
+ grid_right value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%'.
+
+visualMap：It is a type of component for visual encoding, which maps the data to visual channels.
+
+* visual_type -> str
+ visual map type, 'color' or 'size'
+ color: For visual channel color, array is used, like: ['#333', '#78ab23', 'blue'],which means a color ribbon is formed based on the three color stops,and dataValues will be mapped to the ribbon.
+ size: For visual channel size, array is used, like: [20, 50],which means a size ribbon is formed based on the two value stops, and dataValues will be mapped to the ribbon.
+* visual_range -> list
+ pecify the min and max dataValue for the visualMap component.
+* visual_text_color -> str
+ visualMap text color.
+* visual_range_text -> list
+ The label text on both ends, such as ['High', 'Low']
+* visual_range_size -> list
+ For visual channel size, array is used, like: [20, 50].
+* visual_range_color -> list
+ For visual channel color, array is used, like: ['#333', '#78ab23', 'blue'].
+* visual_orient -> str
+ How to layout the visualMap component, 'horizontal' or 'vertical'.
+* visual_pos -> str
+ Distance between visualMap component and the left side of the container.
+ visual_pos value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'left', 'center', or 'right'.
+* visual_top -> str
+ Distance between visualMap component and the top side of the container.
+ visual_top value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'top', 'middle', or 'bottom'.
+* is_calculable -> bool
+ Whether show handles, which can be dragged to adjust "selected range".
+
+
+# Chart-types
+
+## Bar
+> Bar chart shows different data through the height of a bar,which is used in rectangular coordinate with at least 1 category axis.
+
+Bar.add() signatures
+```python
+add(name, x_axis, y_axis, is_stack=False, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> list
+ data of xAixs
+* y_axis -> list
+ data of yAxis
+* is_stack -> bool
+ defalut -> False
+ It specifies whether to stack category axis.
+
+```python
+from pyecharts import Bar
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("柱状图数据堆叠示例")
+bar.add("商家A", attr, v1, is_stack=True)
+bar.add("商家B", attr, v2, is_stack=True)
+bar.render()
+```
+
+
+
+**Tip：** Global configuration item needs set in the last ```add()``` or the setting will lose efficacy.
+
+```python
+from pyecharts import Bar
+
+bar = Bar("标记线和标记点示例")
+bar.add("商家A", attr, v1, mark_point=["average"])
+bar.add("商家B", attr, v2, mark_line=["min", "max"])
+bar.render()
+```
+
+
+* mark_point -> list
+ mark point data, it can be 'min', 'max', 'average'
+* mark_line -> list
+ mark line data, it can be 'min', 'max', 'average'
+* mark_point_symbol -> str
+ default -> 'pin'
+ mark symbol, it cna be 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+* mark_point_symbolsize -> int
+ default -> 50
+ mark symbol size
+* mark_point_textcolor -> str
+ default -> '#fff'
+ mark point text color
+
+```python
+from pyecharts import Bar
+
+bar = Bar("x 轴和 y 轴交换")
+bar.add("商家A", attr, v1)
+bar.add("商家B", attr, v2, is_convert=True)
+bar.render()
+```
+
+
+dataZoom effect，'slider' type
+```python
+import random
+
+attr = ["{}天".format(i) for i in range(30)]
+v1 = [random.randint(1, 30) for _ in range(30)]
+bar = Bar("Bar - datazoom - slider 示例")
+bar.add("", attr, v1, is_label_show=True, is_datazoom_show=True)
+bar.show_config()
+bar.render()
+```
+
+
+'inside' type
+```python
+attr = ["{}天".format(i) for i in range(30)]
+v1 = [random.randint(1, 30) for _ in range(30)]
+bar = Bar("Bar - datazoom - inside 示例")
+bar.add("", attr, v1, is_datazoom_show=True, datazoom_type='inside', datazoom_range=[10, 25])
+bar.show_config()
+bar.render()
+```
+
+
+'both' type
+
+```python
+attr = ["{}天".format(i) for i in range(30)]
+v1 = [random.randint(1, 30) for _ in range(30)]
+bar = Bar("Bar - datazoom - inside 示例")
+bar.add("", attr, v1, is_datazoom_show=True, datazoom_type='both',
+ datazoom_range=[10, 25])
+bar.render()
+```
+
+
+
+**Note：** datazoom can be used for Line、Bar、Scatter、EffectScatter、Kline
+
+if axis labels are too long, rotation is a good solution.
+
+```python
+attr = ["{}天".format(i) for i in range(20)]
+v1 = [random.randint(1, 20) for _ in range(20)]
+bar = Bar("坐标轴标签旋转示例")
+bar.add("", attr, v1, xaxis_interval=0, xaxis_rotate=30, yaxis_rotate=30)
+bar.render()
+```
+
+
+**Tip：** Datazoom fits all plane rectangular coordinate system figure,that's(Line, Bar, Scatter, EffectScatter, Kline)
+**Tip：** Through label_color to set column's colour,like ['#eee', '#000']，any type of chart's legend colour can revise by label_color .
+
+
+waterfall example
+
+```python
+from pyecharts import Bar
+
+attr = ["{}月".format(i) for i in range(1, 8)]
+v1 = [0, 100, 200, 300, 400, 220, 250]
+v2 = [1000, 800, 600, 500, 450, 400, 300]
+bar = Bar("瀑布图示例")
+# 利用第一个 add() 图例的颜色为透明，即 'rgba(0,0,0,0)'，并且设置 is_stack 标志为 True
+bar.add("", attr, v1, label_color=['rgba(0,0,0,0)'], is_stack=True)
+bar.add("月份", attr, v2, is_label_show=True, is_stack=True, label_pos='inside')
+bar.render()
+```
+
+
+fat histogram example
+
+```python
+from pyecharts import Bar
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("直方图示例")
+bar.add("", attr * 2, v1 + v2, bar_category_gap=0)
+bar.render()
+```
+
+
+Double histograms
+```python
+from pyecharts import Bar
+
+attr = ["{}月".format(i) for i in range(1, 13)]
+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("柱状图示例")
+bar.add("蒸发量", attr, v1, mark_line=["average"], mark_point=["max", "min"])
+bar.add("降水量", attr, v2, mark_line=["average"], mark_point=["max", "min"])
+bar.render()
+```
+
+
+
+## Bar3D
+Bar3D.add() signatures
+```
+add(name, x_axis, y_axis, data, grid3D_opacity=1, grid3D_shading='color', **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> list
+ xAxis data
+* y_axis -> list
+ yAxis data
+* data -> [[], []]
+ zAxis data, it is represented by a two-dimension array.
+* grid3D_opacity -> float
+ default -> 1
+ opacity of gird3D item
+* grid3D_shading -> str
+ 3D graphics coloring effect
+ * 'color': Only show color, not affected by lighting and other factors.
+ * 'lambert': Through the classic lambert coloring to show the light and shade.
+ * 'realistic': Realistic rendering.
+
+```python
+from pyecharts import Bar3D
+
+bar3d = Bar3D("3D 柱状图示例", width=1200, height=600)
+x_axis = ["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a",
+ "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"]
+y_aixs = ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"]
+data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0],
+ [0, 8, 0],[0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3],
+ [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5],
+ [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0],
+ [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7],
+ [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1],
+ [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3],
+ [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5],
+ [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0],
+ [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7],
+ [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6],
+ [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1],
+ [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4],
+ [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3],
+ [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0],
+ [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11],
+ [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0],
+ [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1],
+ [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0],
+ [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
+range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+bar3d.add("", x_axis, y_aixs, [[d[1], d[0], d[2]] for d in data], is_visualmap=True,
+ visual_range=[0, 20], visual_range_color=range_color, grid3D_width=200, grid3D_depth=80)
+bar3d.show_config()
+bar3d.render()
+```
+
+
+``` grid3D_shading``` could make bar look more real
+```python
+bar3d = Bar3D("3D 柱状图示例", width=1200, height=600)
+bar3d.add("", x_axis, y_aixs, [[d[1], d[0], d[2]] for d in data], is_visualmap=True,
+ visual_range=[0, 20], visual_range_color=range_color, grid3D_width=200, grid3D_depth=80,
+ grid3D_shading='lambert')
+bar3d.show_config()
+bar3d.render()
+```
+
+
+
+```is_grid3D_rotate``` could let it rotate automatically
+```python
+bar3d = Bar3D("3D 柱状图示例", width=1200, height=600)
+bar3d.add("", x_axis, y_aixs, [[d[1], d[0], d[2]] for d in data], is_visualmap=True,
+ visual_range=[0, 20], visual_range_color=range_color, grid3D_width=200, grid3D_depth=80,
+ is_grid3D_rotate=True)
+bar3d.show_config()
+bar3d.render()
+```
+
+
+set ``` grid3D_rotate_speed``` to adjust the rotation speed
+```python
+bar3d = Bar3D("3D 柱状图示例", width=1200, height=600)
+bar3d.add("", x_axis, y_aixs, [[d[1], d[0], d[2]] for d in data], is_visualmap=True,
+ visual_range=[0, 20], visual_range_color=range_color, grid3D_width=200, grid3D_depth=80,
+ is_grid3D_rotate=True, grid3D_rotate_speed=180)
+bar3d.show_config()
+bar3d.render()
+```
+
+
+**Tip：** more details aboutt gird3D，please refer to [Global-options](https://github.com/chenjiandongx/pyecharts/blob/master/document/en-us/documentation.md#Global-options)
+
+
+## EffectScatter
+> The scatter graph with ripple animation. The special animation effect can visually highlights some data.
+
+EffectScatter.add() signatures
+```python
+add(name, x_value, y_value, symbol_size=10, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> list
+ data of xAxis
+* y_axis -> list
+ data of yAxis
+* symbol_size -> int
+ default -> 10
+ symbol size
+
+```python
+from pyecharts import EffectScatter
+
+v1 = [10, 20, 30, 40, 50, 60]
+v2 = [25, 20, 15, 10, 60, 33]
+es = EffectScatter("动态散点图示例")
+es.add("effectScatter", v1, v2)
+es.render()
+```
+
+
+```python
+es = EffectScatter("动态散点图各种图形示例")
+es.add("", [10], [10], symbol_size=20, effect_scale=3.5, effect_period=3, symbol="pin")
+es.add("", [20], [20], symbol_size=12, effect_scale=4.5, effect_period=4,symbol="rect")
+es.add("", [30], [30], symbol_size=30, effect_scale=5.5, effect_period=5,symbol="roundRect")
+es.add("", [40], [40], symbol_size=10, effect_scale=6.5, effect_brushtype='fill',symbol="diamond")
+es.add("", [50], [50], symbol_size=16, effect_scale=5.5, effect_period=3,symbol="arrow")
+es.add("", [60], [60], symbol_size=6, effect_scale=2.5, effect_period=3,symbol="triangle")
+es.render()
+```
+
+
+
+* symbol -> str
+ symbol shape, it can be 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+* effect_brushtype -> str
+ default -> 'stroke'
+ The brush type for ripples. options: 'stroke' and 'fill'.
+* effect_scale -> float
+ default -> 2.5
+ The maximum zooming scale of ripples in animation.
+* effect_period -> float
+ default -> 4(s)
+ The duration of animation.
+
+
+## Funnel
+Funnel.add() signatures
+```python
+add(name, attr, value, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* attr -> list
+ name of attribute
+* value -> list
+ value of attribute
+
+```python
+from pyecharts import Funnel
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+value = [20, 40, 60, 80, 100, 120]
+funnel = Funnel("漏斗图示例")
+funnel.add("商品", attr, value, is_label_show=True, label_pos="inside", label_text_color="#fff")
+funnel.render()
+```
+
+
+```python
+funnel = Funnel("漏斗图示例", width=600, height=400, title_pos='center')
+funnel.add("商品", attr, value, is_label_show=True, label_pos="outside", legend_orient='vertical',
+ legend_pos='left')
+funnel.show_config()
+funnel.render()
+```
+
+
+
+## Gauge
+Gauge.add() signatures
+```python
+add(name, attr, value, scale_range=None, angle_range=None, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* attr -> list
+ name of attribute
+* value -> list
+ value of attribute
+* scale_range -> list
+ default -> [0, 100]
+ data range of guage
+* angle_range -> list
+ default -> [225, -45]
+ angle range of guage.The direct right side of circle center is 0 degree,the right above it is 90 degree, the direct left side of it is 180 degree.
+
+```python
+from pyecharts import Gauge
+
+gauge = Gauge("仪表盘示例")
+gauge.add("业务指标", "完成率", 66.66)
+gauge.show_config()
+gauge.render()
+```
+
+
+```python
+gauge = Gauge("仪表盘示例")
+gauge.add("业务指标", "完成率", 166.66, angle_range=[180, 0], scale_range=[0, 200], is_legend_show=False)
+gauge.show_config()
+gauge.render()
+```
+
+
+
+## Geo
+> Geographic coorinate system component.Geographic coorinate system component is used to draw maps, which also supports scatter series, and line series.
+
+Geo.add() signatures
+```python
+add(name, attr, value, type="scatter", maptype='china', symbol_size=12, border_color="#111",
+ geo_normal_color="#323c48", geo_emphasis_color="#2a333d", **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* attr -> list
+ name of attribute
+* value -> list
+ value of attribute
+* type -> str
+ default -> 'scatter'
+ chart type, it can be 'scatter', 'effectscatter', 'heatmap'
+* maptype -> str
+ type of map, it only supports 'china' temporarily.
+* symbol_size -> int
+ default -> 12
+ symbol size
+* border_color -> str
+ default -> '#111'
+ color of map border
+* geo_normal_color -> str
+ default -> '#323c48'
+ The color of the map area in normal state
+* geo_emphasis_color -> str
+ default -> '#2a333d'
+ The color of the map area in emphasis state
+
+Scatter type
+```python
+from pyecharts import Geo
+
+data = [
+ ("海门", 9),("鄂尔多斯", 12),("招远", 12),("舟山", 12),("齐齐哈尔", 14),("盐城", 15),
+ ("赤峰", 16),("青岛", 18),("乳山", 18),("金昌", 19),("泉州", 21),("莱西", 21),
+ ("日照", 21),("胶南", 22),("南通", 23),("拉萨", 24),("云浮", 24),("梅州", 25),
+ ("文登", 25),("上海", 25),("攀枝花", 25),("威海", 25),("承德", 25),("厦门", 26),
+ ("汕尾", 26),("潮州", 26),("丹东", 27),("太仓", 27),("曲靖", 27),("烟台", 28),
+ ("福州", 29),("瓦房店", 30),("即墨", 30),("抚顺", 31),("玉溪", 31),("张家口", 31),
+ ("阳泉", 31),("莱州", 32),("湖州", 32),("汕头", 32),("昆山", 33),("宁波", 33),
+ ("湛江", 33),("揭阳", 34),("荣成", 34),("连云港", 35),("葫芦岛", 35),("常熟", 36),
+ ("东莞", 36),("河源", 36),("淮安", 36),("泰州", 36),("南宁", 37),("营口", 37),
+ ("惠州", 37),("江阴", 37),("蓬莱", 37),("韶关", 38),("嘉峪关", 38),("广州", 38),
+ ("延安", 38),("太原", 39),("清远", 39),("中山", 39),("昆明", 39),("寿光", 40),
+ ("盘锦", 40),("长治", 41),("深圳", 41),("珠海", 42),("宿迁", 43),("咸阳", 43),
+ ("铜川", 44),("平度", 44),("佛山", 44),("海口", 44),("江门", 45),("章丘", 45),
+ ("肇庆", 46),("大连", 47),("临汾", 47),("吴江", 47),("石嘴山", 49),("沈阳", 50),
+ ("苏州", 50),("茂名", 50),("嘉兴", 51),("长春", 51),("胶州", 52),("银川", 52),
+ ("张家港", 52),("三门峡", 53),("锦州", 54),("南昌", 54),("柳州", 54),("三亚", 54),
+ ("自贡", 56),("吉林", 56),("阳江", 57),("泸州", 57),("西宁", 57),("宜宾", 58),
+ ("呼和浩特", 58),("成都", 58),("大同", 58),("镇江", 59),("桂林", 59),("张家界", 59),
+ ("宜兴", 59),("北海", 60),("西安", 61),("金坛", 62),("东营", 62),("牡丹江", 63),
+ ("遵义", 63),("绍兴", 63),("扬州", 64),("常州", 64),("潍坊", 65),("重庆", 66),
+ ("台州", 67),("南京", 67),("滨州", 70),("贵阳", 71),("无锡", 71),("本溪", 71),
+ ("克拉玛依", 72),("渭南", 72),("马鞍山", 72),("宝鸡", 72),("焦作", 75),("句容", 75),
+ ("北京", 79),("徐州", 79),("衡水", 80),("包头", 80),("绵阳", 80),("乌鲁木齐", 84),
+ ("枣庄", 84),("杭州", 84),("淄博", 85),("鞍山", 86),("溧阳", 86),("库尔勒", 86),
+ ("安阳", 90),("开封", 90),("济南", 92),("德阳", 93),("温州", 95),("九江", 96),
+ ("邯郸", 98),("临安", 99),("兰州", 99),("沧州", 100),("临沂", 103),("南充", 104),
+ ("天津", 105),("富阳", 106),("泰安", 112),("诸暨", 112),("郑州", 113),("哈尔滨", 114),
+ ("聊城", 116),("芜湖", 117),("唐山", 119),("平顶山", 119),("邢台", 119),("德州", 120),
+ ("济宁", 120),("荆州", 127),("宜昌", 130),("义乌", 132),("丽水", 133),("洛阳", 134),
+ ("秦皇岛", 136),("株洲", 143),("石家庄", 147),("莱芜", 148),("常德", 152),("保定", 153),
+ ("湘潭", 154),("金华", 157),("岳阳", 169),("长沙", 175),("衢州", 177),("廊坊", 193),
+ ("菏泽", 194),("合肥", 229),("武汉", 273),("大庆", 279)]
+
+geo = Geo("全国主要城市空气质量", "data from pm2.5", title_color="#fff", title_pos="center",
+width=1200, height=600, background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, visual_range=[0, 200], visual_text_color="#fff", symbol_size=15, is_visualmap=True)
+geo.show_config()
+geo.render()
+```
+
+
+**Note：** Please use it with Visualmap
+
+With Scatter
+```python
+geo = Geo("全国主要城市空气质量", "data from pm2.5", title_color="#fff",
+ title_pos="center", width=1200,
+ height=600, background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, visual_range=[0, 200], visual_text_color="#fff",
+ symbol_size=15, is_visualmap=True, is_piecewise=True, visual_split_number=6)
+geo.render()
+```
+
+
+With HeatMap
+```python
+geo = Geo("全国主要城市空气质量", "data from pm2.5", title_color="#fff",
+ title_pos="center", width=1200,
+ height=600, background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, type="heatmap", is_visualmap=True, visual_range=[0, 300],
+ visual_text_color='#fff')
+geo.render()
+```
+
+
+
+With EffectScatter on China map
+```python
+from pyecharts import Geo
+
+data = [
+ ("海门", 9), ("鄂尔多斯", 12), ("招远", 12),
+ ("舟山", 12), ("齐齐哈尔", 14), ("盐城", 15)
+ ]
+geo = Geo("全国主要城市空气质量", "data from pm2.5", title_color="#fff",
+ title_pos="center", width=1200,
+ height=600, background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, type="effectScatter", is_random=True, effect_scale=5)
+geo.render()
+```
+
+
+With effectScatter on my home province, Canton
+```python
+from pyecharts import Geo
+
+data =[
+ ('汕头市', 50), ('汕尾市', 60), ('揭阳市', 35),
+ ('阳江市', 44), ('肇庆市', 72)
+ ]
+geo = Geo("广东城市空气质量", "data from pm2.5", title_color="#fff",
+ title_pos="center", width=1200,
+ height=600, background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, maptype='广东', type="effectScatter",
+ is_random=True, effect_scale=5, is_legend_show=False)
+geo.render()
+```
+
+
+
+visualMap：visualMap is a type of component for visual encoding, which maps the data to visual channels
+* is_visualmap -> bool
+ It specifies whether to use the datazoom component.
+* visual_range -> list
+ default -> [0, 100]
+ pecify the min and max dataValue for the visualMap component.
+* visual_text_color -> list
+ visualMap text color.
+* visual_range_text -> list
+ The label text on both ends, such as ['High', 'Low']
+* visual_range_color -> list
+ default -> ['#50a3ba', '#eac763', '#d94e5d']
+ For visual channel color, array is used, like: ['#333', '#78ab23', 'blue'],which means a color ribbon is formed based on the three color stops,and dataValues will be mapped to the ribbon.
+ Specifically,the dataValue that equals to visualMap.min will be mapped onto '#333',the dataValue that equals to visualMap.max will be mapped onto 'blue',and other dataValues will be piecewisely interpolated to get the final color.
+* visual_orient -> str
+ default -> 'vertical'
+ How to layout the visualMap component, 'horizontal' or 'vertical'.
+* visual_pos -> str/int
+ default -> 'left'
+ Distance between visualMap component and the left side of the container.
+ visual_pos value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'left', 'center', or 'right'.
+* visual_top -> str/int
+ default -> 'top'
+ Distance between visualMap component and the top side of the container.
+ visual_top value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'top', 'middle', or 'bottom'.
+* is_calculable -> bool
+ default -> True
+ Whether show handles, which can be dragged to adjust "selected range".
+
+HeatMap type
+```python
+geo = Geo("全国主要城市空气质量", "data from pm2.5", title_color="#fff", title_pos="center", width=1200, height=600,
+ background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, type="heatmap", is_visualmap=True, visual_range=[0, 300], visual_text_color='#fff')
+geo.show_config()
+geo.render()
+```
+
+
+EffectScatter type
+```python
+from pyecharts import Geo
+
+data = [("海门", 9), ("鄂尔多斯", 12), ("招远", 12), ("舟山", 12), ("齐齐哈尔", 14), ("盐城", 15)]
+geo = Geo("全国主要城市空气质量", "data from pm2.5", title_color="#fff", title_pos="center",
+ width=1200, height=600, background_color='#404a59')
+attr, value = geo.cast(data)
+geo.add("", attr, value, type="effectScatter", is_random=True, effect_scale=5)
+geo.show_config()
+geo.render()
+```
+
+
+
+## Graph
+> Graph is a diagram to represent nodes and the links connecting nodes.
+
+Graph.add() signatures
+```python
+add(name, nodes, links, categories=None, is_focusnode=True, is_roam=True, is_rotatelabel=False,
+ layout="force", edge_length=50, gravity=0.2, repulsion=50, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* nodes -> dict
+ Relational nodes data
+ * name：Name of data item. # required！！
+ * x：x value of node position.
+ * y：y value of node position.
+ * value：value of data item.
+ * category：Index of category which the data item belongs to.
+ * symbol：Symbol of node of this category.Includes 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+ * symbolSize：symbol size
+* links -> dict
+ Relational data between nodes
+ * source：name of source node on edge # required！！
+ * target：name of target node on edge # required！！
+ * vaule：value of edge,It can be used in the force layout to map to the length of the edge
+* categories -> list
+ Name of category, which is used to correspond with legend and the content of tooltip.
+* is_focusnode -> bool
+ defalut -> True
+ Whether to focus/highlight the hover node and it's adjacencies.
+* is_roam -> bool/str
+ default -> True
+ Whether to enable mouse zooming and translating.
+ If either zooming or translating is wanted,it can be set to 'scale' or 'move'. Otherwise, set it to be true to enable both.
+* is_rotatelabel -> bool
+ default -> False
+ Whether to rotate the label automatically.
+* layout -> str
+ Graph layout.
+ default -> 'force'
+ * none：No any layout, use x, y provided in node as the position of node.
+ * circular：Adopt circular layout, see the example Les Miserables.
+ * force：Adopt force-directed layout, see the example Force,the detail about configrations of layout are in graph.force
+* edge_length -> int
+ default -> 50
+ The distance between 2 nodes on edge. This distance is also affected by repulsion.
+ It can be an array to represent the range of edge length.In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.
+* gravity -> int/float
+ default -> 0.2
+ The gravity factor enforcing nodes approach to the center.The nodes will be closer to the center as the value becomes larger.
+* repulsion -> int
+ default -> 50
+ The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.
+ It can be an array to represent the range of repulsion.
+ In this case larger value have larger repulsion and smaller value will have smaller repulsion.
+
+```python
+from pyecharts import Graph
+
+nodes = [{"name": "结点1", "symbolSize": 10},
+ {"name": "结点2", "symbolSize": 20},
+ {"name": "结点3", "symbolSize": 30},
+ {"name": "结点4", "symbolSize": 40},
+ {"name": "结点5", "symbolSize": 50},
+ {"name": "结点6", "symbolSize": 40},
+ {"name": "结点7", "symbolSize": 30},
+ {"name": "结点8", "symbolSize": 20}]
+links = []
+for i in nodes:
+ for j in nodes:
+ links.append({"source": i.get('name'), "target": j.get('name')})
+graph = Graph("关系图-力引导布局示例")
+graph.add("", nodes, links, repulsion=8000)
+graph.show_config()
+graph.render()
+
+```
+
+
+
+```python
+graph = Graph("关系图-环形布局示例")
+graph.add("", nodes, links, is_label_show=True, repulsion=8000, layout='circular', label_text_color=None)
+graph.show_config()
+graph.render()
+```
+
+
+```python
+from pyecharts import Graph
+
+import json
+with open("data\weibo.json", "r", encoding="utf-8") as f:
+ j = json.load(f)
+ nodes, links, categories, cont, mid, userl = j
+graph = Graph("微博转发关系图", width=1200, height=600)
+graph.add("", nodes, links, categories, label_pos="right", repulsion=50, is_legend_show=False,
+ line_curve=0.2, label_text_color=None)
+graph.show_config()
+graph.render()
+```
+
+
+**Tip：** **lineStyle** parameter is configurable
+
+
+## HeatMap
+> Heat map mainly use colors to represent values, which must be used along with visualMap component.
+> It can be used in either rectangular coordinate or geographic coordinate.But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.
+
+HeatMap.add() signatures
+```python
+add(name, x_axis, y_axis, data, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> str
+ data of xAxis, it must be catagory axis.
+* y_axis -> str
+ data of yAxis, it must be catagory axis.
+* data -> [[],[]]
+ data array of series, it is represented by a two-dimension array
+* is_date_heatmap -> bool
+ default -> False
+ Whether it is a date heatmap
+* date_range -> str/list
+ date range of date heatmap, "2016" is year 2016, ["2016-5-5", "2017-5-5"] is 2016/5/5-2017/5/5
+
+```python
+import random
+from pyecharts import HeatMap
+
+x_axis = ["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a",
+ "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"]
+y_aixs = ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"]
+data = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
+heatmap = HeatMap()
+heatmap.add("热力图直角坐标系", x_axis, y_aixs, data, is_visualmap=True,
+ visual_text_color="#000", visual_orient='horizontal')
+heatmap.show_config()
+heatmap.render()
+```
+
+
+```python
+import datetime
+import random
+from pyecharts import HeatMap
+
+begin = datetime.date(2017, 1, 1)
+end = datetime.date(2017, 12, 31)
+data = [[str(begin + datetime.timedelta(days=i)),
+ random.randint(0, 100)] for i in range((end - begin).days+1)]
+heatmap = HeatMap("日历热力图示例")
+heatmap.add("日历热力图", data, date_range=["2017"], is_visualmap=True,
+ is_legend_show=False, is_date_heatmap=True, visual_orient="horizontal",
+ visual_pos="center", visual_top="top")
+heatmap.render()
+```
+
+
+**Tip：** Thermodynamic chart have to cooperate with VisualMap in use.
+
+
+## Kline
+> Kline chart use red to imply increasing with red and decreasing with blue
+
+Kline.add() signatures
+```python
+add(name, x_axis, y_axis, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> list
+ data of xAxis
+* y_axis -> [[], []]
+ data pf yAxis.Data should be the two-dimensional array shown as follow.
+ Every data item (each line in the example above) represents a box, which contains 4 values. They are: [open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])
+```python
+from pyecharts import Kline
+
+v1 = [[2320.26, 2320.26, 2287.3, 2362.94], [2300, 2291.3, 2288.26, 2308.38],
+ [2295.35, 2346.5, 2295.35, 2345.92], [2347.22, 2358.98, 2337.35, 2363.8],
+ [2360.75, 2382.48, 2347.89, 2383.76], [2383.43, 2385.42, 2371.23, 2391.82],
+ [2377.41, 2419.02, 2369.57, 2421.15], [2425.92, 2428.15, 2417.58, 2440.38],
+ [2411, 2433.13, 2403.3, 2437.42], [2432.68, 2334.48, 2427.7, 2441.73],
+ [2430.69, 2418.53, 2394.22, 2433.89], [2416.62, 2432.4, 2414.4, 2443.03],
+ [2441.91, 2421.56, 2418.43, 2444.8], [2420.26, 2382.91, 2373.53, 2427.07],
+ [2383.49, 2397.18, 2370.61, 2397.94], [2378.82, 2325.95, 2309.17, 2378.82],
+ [2322.94, 2314.16, 2308.76, 2330.88], [2320.62, 2325.82, 2315.01, 2338.78],
+ [2313.74, 2293.34, 2289.89, 2340.71], [2297.77, 2313.22, 2292.03, 2324.63],
+ [2322.32, 2365.59, 2308.92, 2366.16], [2364.54, 2359.51, 2330.86, 2369.65],
+ [2332.08, 2273.4, 2259.25, 2333.54], [2274.81, 2326.31, 2270.1, 2328.14],
+ [2333.61, 2347.18, 2321.6, 2351.44], [2340.44, 2324.29, 2304.27, 2352.02],
+ [2326.42, 2318.61, 2314.59, 2333.67], [2314.68, 2310.59, 2296.58, 2320.96],
+ [2309.16, 2286.6, 2264.83, 2333.29], [2282.17, 2263.97, 2253.25, 2286.33],
+ [2255.77, 2270.28, 2253.31, 2276.22]]
+kline = Kline("K 线图示例")
+kline.add("日K", ["2017/7/{}".format(i + 1) for i in range(31)], v1)
+kline.show_config()
+kline.render()
+```
+
+
+Kline + dataZoom
+```python
+kline = Kline("K 线图示例")
+kline.add("日K", ["2017/7/{}".format(i + 1) for i in range(31)], v1, mark_point=["max"], is_datazoom_show=True)
+kline.show_config()
+kline.render()
+```
+
+
+
+## Line
+> Broken line chart relates all the data points symbol by broken lines,
+> which is used to show the trend of data changing.It could be used in both rectangular coordinate and polar coordinate.
+
+Line.add() signatures
+```python
+add(name, x_axis, y_axis, is_symbol_show=True, is_smooth=False, is_stack=False,
+ is_step=False, is_fill=False, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> list
+ data of xAxis
+* y_axis -> list
+ data of yAxis
+* is_symbol_show -> bool
+ default -> True
+ It specifies whether to show the symbol.
+* is_smooth -> bool
+ default -> False
+ Whether to show as smooth curve.
+* is_stack -> bool
+ default -> Flase
+ It specifies whether to stack category axis.
+* is_step -> bool/str
+ default -> False
+ Whether to show as a step line.It can be true, false. Or 'start', 'middle', 'end'.Which will configure the turn point of step line.
+* is_fill -> bool
+ default -> False
+ Whether to fill area.
+
+```python
+from pyecharts import Line
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 10, 100]
+v2 = [55, 60, 16, 20, 15, 80]
+line = Line("折线图示例")
+line.add("商家A", attr, v1, mark_point=["average"])
+line.add("商家B", attr, v2, is_smooth=True, mark_line=["max", "average"])
+line.show_config()
+line.render()
+```
+
+
+* mark_point -> list
+ mark point data, it can be 'min', 'max', 'average'
+* mark_line -> list
+ mark line data, it can be 'min', 'max', 'average'
+* mark_point_symbol -> str
+ default -> 'pin'
+ mark symbol, it cna be 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+* mark_point_symbolsize -> int
+ default -> 50
+ mark symbol size
+* mark_point_textcolor -> str
+ default -> '#fff'
+ mark point text color
+
+Other Configurations Of Marker Point
+```python
+line = Line("折线图示例")
+line.add("商家A", attr, v1, mark_point=["average", "max", "min"],
+ mark_point_symbol='diamond', mark_point_textcolor='#40ff27')
+line.add("商家B", attr, v2, mark_point=["average", "max", "min"],
+ mark_point_symbol='arrow', mark_point_symbolsize=40)
+line.show_config()
+line.render()
+```
+
+
+```python
+line = Line("折线图-数据堆叠示例")
+line.add("商家A", attr, v1, is_stack=True, is_label_show=True)
+line.add("商家B", attr, v2, is_stack=True, is_label_show=True)
+line.show_config()
+line.render()
+```
+
+
+```python
+line = Line("折线图-阶梯图示例")
+line.add("商家A", attr, v1, is_step=True, is_label_show=True)
+line.show_config()
+line.render()
+```
+
+
+```python
+line = Line("折线图-面积图示例")
+line.add("商家A", attr, v1, is_fill=True, line_opacity=0.2, area_opacity=0.4, symbol=None)
+line.add("商家B", attr, v2, is_fill=True, area_color='#000', area_opacity=0.3, is_smooth=True)
+line.show_config()
+line.render()
+```
+
+
+* area_opacity -> float
+ Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
+* area_color -> str
+ Fill color.
+
+**Tip：** **lineStyle** Parameter is Configurable
+**Tip：** Setting line colour by label_color,like ['#eee', '#000'],all type of chart can revise label colour by label_color.
+
+
+## Line3D
+Line3D.add() signatures
+```python
+add(name, data, grid3D_opacity=1, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* data -> [[], []]
+ data of line3D
+* grid3D_opacity -> float
+ default -> 1
+ opacity of gird3D item
+
+draw a spring
+```python
+from pyecharts import Line3D
+
+import math
+_data = []
+for t in range(0, 25000):
+ _t = t / 1000
+ x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
+ y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
+ z = _t + 2.0 * math.sin(75 * _t)
+ _data.append([x, y, z])
+range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+line3d = Line3D("3D 折线图示例", width=1200, height=600)
+line3d.add("", _data, is_visualmap=True, visual_range_color=range_color, visual_range=[0, 30],
+ grid3D_rotate_sensitivity=5)
+line3d.render()
+```
+
+
+
+rotating spring
+```python
+from pyecharts import Line3D
+
+import math
+_data = []
+for t in range(0, 25000):
+ _t = t / 1000
+ x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
+ y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
+ z = _t + 2.0 * math.sin(75 * _t)
+ _data.append([x, y, z])
+range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+line3d = Line3D("3D 折线图示例", width=1200, height=600)
+line3d.add("", _data, is_visualmap=True, visual_range_color=range_color, visual_range=[0, 30],
+ is_grid3D_rotate=True, grid3D_rotate_speed=180)
+line3d.render()
+```
+
+
+**Tip：** more details aboutt gird3D，please refer to [Global-options](https://github.com/chenjiandongx/pyecharts/blob/master/document/en-us/documentation.md#Global-options)
+
+## Liquid
+> Liquid chart is usually used to represent data in percentage.
+
+Liquid.add() signatures
+```python
+add(name, data, shape='circle', liquid_color=None, is_liquid_animation=True,
+ is_liquid_outline_show=True, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* data -> list
+ data of liquid,[0.6, 0.5, 0.4, 0.3] -> This creates a chart wit waves at position of 60%, 50%, 40%, and 30%.
+* shape -> str
+ Shape of water fill chart.It can be one of the default symbols: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+* liquid_color -> list
+ default -> ['#294D99', '#156ACF', '#1598ED', '#45BDFF']
+ To set colors for liquid fill chart series, set color to be an array of colors.
+* is_liquid_animation -> bool
+ default -> True
+ Whether disable animation.
+* is_liquid_outline_show -> bool
+ default -> True
+ whether hide the outline
+
+```python
+from pyecharts import Liquid
+
+liquid = Liquid("水球图示例")
+liquid.add("Liquid", [0.6])
+liquid.show_config()
+liquid.render()
+```
+
+
+```python
+from pyecharts import Liquid
+
+liquid = Liquid("水球图示例")
+liquid.add("Liquid", [0.6, 0.5, 0.4, 0.3], is_liquid_outline_show=False)
+liquid.show_config()
+liquid.render()
+```
+
+
+```python
+from pyecharts import Liquid
+
+liquid = Liquid("水球图示例")
+liquid.add("Liquid", [0.6, 0.5, 0.4, 0.3], is_liquid_animation=False, shape='diamond')
+liquid.show_config()
+liquid.render()
+```
+
+
+## Map
+> Map is maily used in the visulization of geographic area data,which can be used with visualMap component to visualize the datas such as population distribution density in diffrent areas.
+
+Map.add() signatures
+```python
+add(name, attr, value, is_roam=True, maptype='china', **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* attr -> list
+ name of attribute
+* value -> list
+ value of attribute
+* is_roam -> bool/str
+ default -> True
+ Whether to enable mouse zooming and translating.If either zooming or translating is wanted,it can be set to 'scale' or 'move'. Otherwise, set it to be true to enable both.
+* maptype -> str
+ type of map, it supports chinese geographical names, such as "安徽, 澳门, 北京, 重庆, 福建, 福建, 甘肃, 广东，广西, 广州, 海南, 河北, 黑龙江, 河南, 湖北, 湖南, 江苏, 江西, 吉林, 辽宁, 内蒙古, 宁夏, 青海, 山东, 上海, 陕西, 四川, 台湾, 天津, 香港, 新疆, 西藏, 云南, 浙江" and [363 provincial cities](https://github.com/chfw/echarts-china-cities-js#featuring-citiesor-for-single-download).
+
+```python
+from pyecharts import Map
+
+value = [155, 10, 66, 78]
+attr = ["福建", "山东", "北京", "上海"]
+map = Map("全国地图示例", width=1200, height=600)
+map.add("", attr, value, maptype='china')
+map.show_config()
+map.render()
+```
+
+
+```python
+from pyecharts import Map
+
+value = [155, 10, 66, 78, 33, 80, 190, 53, 49.6]
+attr = ["福建", "山东", "北京", "上海", "甘肃", "新疆", "河南", "广西", "西藏"]
+map = Map("Map 结合 VisualMap 示例", width=1200, height=600)
+map.add("", attr, value, maptype='china', is_visualmap=True, visual_text_color='#000')
+map.show_config()
+map.render()
+```
+
+
+**Tip：** Settings can combine with visualMap component.
+
+```python
+from pyecharts import Map
+
+value = [20, 190, 253, 77, 65]
+attr = ['汕头市', '汕尾市', '揭阳市', '阳江市', '肇庆市']
+map = Map("广东地图示例", width=1200, height=600)
+map.add("", attr, value, maptype='广东', is_visualmap=True, visual_text_color='#000')
+map.show_config()
+map.render()
+```
+
+
+### About Customized Map
+Because map contain large area,this program can't cover all the map,but don't worry about it.Echarts officially provide your own custom map [echart-map](http://echarts.baidu.com/download-map.html),this function allow you make map that you need,just download in JS file form.
+
+open file pyecharts/temple.py under the installation directory,add the same line under the corresponding of _temple variable.
+ ``````
+correspond under Jupyter Notebook add the same lineunder _mapindex variable.
+```"北京": "beijing: '//oog4yfyu0.bkt.clouddn.com/beijing'"```
+Then use customized map in the program!The way import Js decide by yourself，only if it can be found by the program!
+
+
+## Parallel
+> Parallel Coordinates is a common way of visualizing high-dimensional geometry and analyzing multivariate data.
+
+Parallel.add() signatures
+```python
+add(name, data, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* data -> [[],[]]
+ data array of series, it is represented by a two-dimension array.
+
+Parallel.config() signatures
+```python
+config(schema=None, c_schema=None)
+```
+* schema
+ Dimension index of coordinate axis.
+ a axis name list, like ['apple', 'orange', 'watermelon']
+* c_schema
+ User customize coordinate axis for parallel coordinate.
+ * dim -> int
+ Dimension index of coordinate axis.
+ * name > str
+ Name of axis.
+ * type -> str
+ Type of axis
+ value：Numerical axis, suitable for continuous data.
+ category：Category axis, suitable for discrete category data.Data should only be set via data for this type.
+ * min -> int
+ The minimun value of axis.
+ * max -> int
+ The maximum value of axis.
+ * inverse - bool
+ default -> False
+ Whether axis is inversed.
+ * nameLocation -> str
+ Location of axis name. it can be 'start', 'middle', 'end'.
+
+```python
+from pyecharts import Parallel
+
+schema = ["data", "AQI", "PM2.5", "PM10", "CO", "NO2"]
+data = [
+ [1, 91, 45, 125, 0.82, 34],
+ [2, 65, 27, 78, 0.86, 45,],
+ [3, 83, 60, 84, 1.09, 73],
+ [4, 109, 81, 121, 1.28, 68],
+ [5, 106, 77, 114, 1.07, 55],
+ [6, 109, 81, 121, 1.28, 68],
+ [7, 106, 77, 114, 1.07, 55],
+ [8, 89, 65, 78, 0.86, 51, 26],
+ [9, 53, 33, 47, 0.64, 50, 17],
+ [10, 80, 55, 80, 1.01, 75, 24],
+ [11, 117, 81, 124, 1.03, 45]
+]
+parallel = Parallel("平行坐标系-默认指示器")
+parallel.config(schema)
+parallel.add("parallel", data, is_random=True)
+parallel.show_config()
+parallel.render()
+```
+
+
+```python
+from pyecharts import Parallel
+
+c_schema = [
+ {"dim": 0, "name": "data"},
+ {"dim": 1, "name": "AQI"},
+ {"dim": 2, "name": "PM2.5"},
+ {"dim": 3, "name": "PM10"},
+ {"dim": 4, "name": "CO"},
+ {"dim": 5, "name": "NO2"},
+ {"dim": 6, "name": "CO2"},
+ {"dim": 7, "name": "等级",
+ "type": "category", "data": ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}
+]
+data = [
+ [1, 91, 45, 125, 0.82, 34, 23, "良"],
+ [2, 65, 27, 78, 0.86, 45, 29, "良"],
+ [3, 83, 60, 84, 1.09, 73, 27, "良"],
+ [4, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
+ [5, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
+ [6, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
+ [7, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
+ [8, 89, 65, 78, 0.86, 51, 26, "良"],
+ [9, 53, 33, 47, 0.64, 50, 17, "良"],
+ [10, 80, 55, 80, 1.01, 75, 24, "良"],
+ [11, 117, 81, 124, 1.03, 45, 24, "轻度污染"],
+ [12, 99, 71, 142, 1.1, 62, 42, "良"],
+ [13, 95, 69, 130, 1.28, 74, 50, "良"],
+ [14, 116, 87, 131, 1.47, 84, 40, "轻度污染"]
+]
+parallel = Parallel("平行坐标系-用户自定义指示器")
+parallel.config(c_schema=c_schema)
+parallel.add("parallel", data)
+parallel.show_config()
+parallel.render()
+```
+
+
+**Tip：** **lineStyle** Parameter is Configurable
+
+
+## Pie
+> The pie chart is mainly used for showing proportion of different categories.Each arc length represents the proportion of data quantity.
+
+Pie.add() signatures
+```python
+add(name, attr, value, radius=None, center=None, rosetype=None, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* attr -> list
+ name of attribute
+* value -> list
+ value of attribute
+* radius -> list
+ default -> [0, 75]
+ Radius of Pie chart, the first of which is inner radius, and the second is outer radius.
+ Percentage is supported. When set in percentage,it's relative to the smaller size between height and width of the container.
+* center -> list
+ default -> [50, 50]
+ Center position of Pie chart, the first of which is the horizontal position,and the second is the vertical position.
+ Percentage is supported. When set in percentage, the item is relative to the container width,and the second item to the height.
+* rosetype -> str
+ default -> 'radius'
+ Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:
+ * radius：Use central angle to show the percentage of data, radius to show data size.
+ * area：All the sectors will share the same central angle, the data size is shown only through radiuses.
+
+```python
+from pyecharts import Pie
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [11, 12, 13, 10, 10, 10]
+pie = Pie("饼图示例")
+pie.add("", attr, v1, is_label_show=True)
+pie.show_config()
+pie.render()
+```
+
+
+```python
+from pyecharts import Pie
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [11, 12, 13, 10, 10, 10]
+pie = Pie("饼图-圆环图示例", title_pos='center')
+pie.add("", attr, v1, radius=[40, 75], label_text_color=None, is_label_show=True,
+ legend_orient='vertical', legend_pos='left')
+pie.show_config()
+pie.render()
+```
+
+
+```python
+from pyecharts import Pie
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [11, 12, 13, 10, 10, 10]
+v2 = [19, 21, 32, 20, 20, 33]
+pie = Pie("饼图-玫瑰图示例", title_pos='center', width=900)
+pie.add("商品A", attr, v1, center=[25, 50], is_random=True, radius=[30, 75], rosetype='radius')
+pie.add("商品B", attr, v2, center=[75, 50], is_random=True, radius=[30, 75], rosetype='area',
+ is_legend_show=False, is_label_show=True)
+pie.show_config()
+pie.render()
+```
+
+
+
+## Polar
+> Polar coordinate can be used in scatter and line chart. Every polar coordinate has an angleAxis and a radiusAxis.
+
+Polar.add() signatures
+```python
+add(name, data, angle_data=None, radius_data=None, type='line', symbol_size=4, start_angle=90,
+ rotate_step=0, boundary_gap=True, clockwise=True, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* data -> [[],[]]
+ data of polar, [Polar radius, Polar angle,it is represented by a two-dimension array.
+* angle_data -> list
+ Category data for angle, available in type: 'category' axis.
+* radius_data -> list
+ Category data for radius, available in type: 'category' axis.
+* type -> str
+ default -> 'line'
+ chart type，it can be 'scatter', 'effectScatter', 'barAngle', 'barRadius'
+* symbol_size -> int
+ default -> 4
+ symbol size
+* start_angle -> int
+ default -> 90
+ Starting angle of axis.standing for top position of center.0 degree stands for right position of center.
+* rotate_step -> int
+ default -> 0
+ Rotation degree of axis label, which is especially useful when there is no enough space for category axis.
+ Rotation degree is from -90 to 90.
+* boundary_gap -> bool
+ default -> True
+ The boundary gap on both sides of a coordinate axis.
+ The setting and behavior of category axes and non-category axes are different.
+ The boundaryGap of category axis can be set to either true or false.
+ Default value is set to be true, in which case axisTick is served only as a separation line,and labels and data appear only in the center part of two axis ticks, which is called band.
+* clockwise -> bool
+ default -> True
+ Whether the positive position of axis is in clockwise. True for clockwise by default.
+* is_stack -> bool
+ It specifies whether to stack category axis.
+* axis_range -> list
+ default -> [None, None]
+ axis scale range
+* is_angleaxis_show -> bool
+ default -> True
+ whether show angle axis.
+* is_radiusaxis_show -> bool
+ default -> True
+ whether show radius axis.
+
+```python
+from pyecharts import Polar
+
+import random
+data = [(i, random.randint(1, 100)) for i in range(101)]
+polar = Polar("极坐标系-散点图示例")
+polar.add("", data, boundary_gap=False, type='scatter', is_splitline_show=False,
+ area_color=None, is_axisline_show=True)
+polar.show_config()
+polar.render()
+```
+
+
+* is_splitline_show -> bool
+ default -> True
+ It specifies whether to show split line.
+* is_axisline_show -> bool
+ default -> True
+ It specifies whether to show axis line.
+* area_opacity -> float
+ Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
+* area_color -> str
+ Fill color.
+
+**Tip：** **lineStyle** Parameter is Configurable
+
+```python
+from pyecharts import Polar
+
+import random
+data_1 = [(10, random.randint(1, 100)) for i in range(300)]
+data_2 = [(11, random.randint(1, 100)) for i in range(300)]
+polar = Polar("极坐标系-散点图示例", width=1200, height=600)
+polar.add("", data_1, type='scatter')
+polar.add("", data_2, type='scatter')
+polar.show_config()
+polar.render()
+```
+
+
+```python
+from pyecharts import Polar
+
+import random
+data = [(i, random.randint(1, 100)) for i in range(10)]
+polar = Polar("极坐标系-动态散点图示例", width=1200, height=600)
+polar.add("", data, type='effectScatter', effect_scale=10, effect_period=5)
+polar.show_config()
+polar.render()
+```
+
+
+```python
+from pyecharts import Polar
+
+radius = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+polar = Polar("极坐标系-堆叠柱状图示例", width=1200, height=600)
+polar.add("A", [1, 2, 3, 4, 3, 5, 1], radius_data=radius, type='barRadius', is_stack=True)
+polar.add("B", [2, 4, 6, 1, 2, 3, 1], radius_data=radius, type='barRadius', is_stack=True)
+polar.add("C", [1, 2, 3, 4, 1, 2, 5], radius_data=radius, type='barRadius', is_stack=True)
+polar.show_config()
+polar.render()
+```
+
+
+```python
+from pyecharts import Polar
+
+radius = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+polar = Polar("极坐标系-堆叠柱状图示例", width=1200, height=600)
+polar.add("", [1, 2, 3, 4, 3, 5, 1], radius_data=radius, type='barAngle', is_stack=True)
+polar.add("", [2, 4, 6, 1, 2, 3, 1], radius_data=radius, type='barAngle', is_stack=True)
+polar.add("", [1, 2, 3, 4, 1, 2, 5], radius_data=radius, type='barAngle', is_stack=True)
+polar.show_config()
+polar.render()
+```
+
+
+## Radar
+> Radar chart is mainly used to show multi-variable data,such as the analysis of a football player's varied attributes. It relies radar component.
+
+Radar.add() signatures
+```python
+add(name, value, item_color=None, **kwargs)
+```
+* name -> list
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* value -> [[],[]]
+ data array of series, it is represented by a two-dimension array.
+* item_color -> str
+ Specify a single legend color
+
+Radar.config() signatures
+```python
+config(schema=None, c_schema=None, shape="", rader_text_color="#000", **kwargs):
+```
+* schema -> list
+ The default radar map indicator, used to specify multiple dimensions in the radar map,will process the data into a dictionary of {name: xx, value: xx}
+* c_schema -> dict
+ Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart.
+ * name: Indicator's name.
+ * min: The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.
+ * max: The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.
+* shape -> str
+ Radar render type, in which 'polygon' and 'circle' are supported.
+* rader_text_color -> str
+ default -> '#000'
+ Radar chart data item font color
+
+```python
+from pyecharts import Radar
+
+schema = [
+ ("销售", 6500), ("管理", 16000), ("信息技术", 30000), ("客服", 38000), ("研发", 52000), ("市场", 25000)]
+v1 = [[4300, 10000, 28000, 35000, 50000, 19000]]
+v2 = [[5000, 14000, 28000, 31000, 42000, 21000]]
+radar = Radar()
+radar.config(schema)
+radar.add("预算分配", v1, is_splitline=True, is_axisline_show=True)
+radar.add("实际开销", v2, label_color=["#4e79a7"], is_area_show=False)
+radar.show_config()
+radar.render()
+```
+
+
+* is_area_show -> bool
+ It specifies whether to show split area.
+* area_opacity -> float
+ Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.
+* area_color -> str
+ Fill color.
+* is_splitline_show -> bool
+ default -> True
+ It specifies whether to show split line.
+* is_axisline_show -> bool
+ default -> True
+ It specifies whether to show axis line.
+
+**Tip：** **lineStyle** Parameter is Configurable
+
+```python
+value_bj = [
+ [55, 9, 56, 0.46, 18, 6, 1], [25, 11, 21, 0.65, 34, 9, 2],
+ [56, 7, 63, 0.3, 14, 5, 3], [33, 7, 29, 0.33, 16, 6, 4],
+ [42, 24, 44, 0.76, 40, 16, 5], [82, 58, 90, 1.77, 68, 33, 6],
+ [74, 49, 77, 1.46, 48, 27, 7], [78, 55, 80, 1.29, 59, 29, 8],
+ [267, 216, 280, 4.8, 108, 64, 9], [185, 127, 216, 2.52, 61, 27, 10],
+ [39, 19, 38, 0.57, 31, 15, 11], [41, 11, 40, 0.43, 21, 7, 12],
+ [64, 38, 74, 1.04, 46, 22, 13], [108, 79, 120, 1.7, 75, 41, 14],
+ [108, 63, 116, 1.48, 44, 26, 15], [33, 6, 29, 0.34, 13, 5, 16],
+ [94, 66, 110, 1.54, 62, 31, 17], [186, 142, 192, 3.88, 93, 79, 18],
+ [57, 31, 54, 0.96, 32, 14, 19], [22, 8, 17, 0.48, 23, 10, 20],
+ [39, 15, 36, 0.61, 29, 13, 21], [94, 69, 114, 2.08, 73, 39, 22],
+ [99, 73, 110, 2.43, 76, 48, 23], [31, 12, 30, 0.5, 32, 16, 24],
+ [42, 27, 43, 1, 53, 22, 25], [154, 117, 157, 3.05, 92, 58, 26],
+ [234, 185, 230, 4.09, 123, 69, 27],[160, 120, 186, 2.77, 91, 50, 28],
+ [134, 96, 165, 2.76, 83, 41, 29], [52, 24, 60, 1.03, 50, 21, 30],
+]
+value_sh = [
+ [91, 45, 125, 0.82, 34, 23, 1], [65, 27, 78, 0.86, 45, 29, 2],
+ [83, 60, 84, 1.09, 73, 27, 3], [109, 81, 121, 1.28, 68, 51, 4],
+ [106, 77, 114, 1.07, 55, 51, 5], [109, 81, 121, 1.28, 68, 51, 6],
+ [106, 77, 114, 1.07, 55, 51, 7], [89, 65, 78, 0.86, 51, 26, 8],
+ [53, 33, 47, 0.64, 50, 17, 9], [80, 55, 80, 1.01, 75, 24, 10],
+ [117, 81, 124, 1.03, 45, 24, 11], [99, 71, 142, 1.1, 62, 42, 12],
+ [95, 69, 130, 1.28, 74, 50, 13], [116, 87, 131, 1.47, 84, 40, 14],
+ [108, 80, 121, 1.3, 85, 37, 15], [134, 83, 167, 1.16, 57, 43, 16],
+ [79, 43, 107, 1.05, 59, 37, 17], [71, 46, 89, 0.86, 64, 25, 18],
+ [97, 71, 113, 1.17, 88, 31, 19], [84, 57, 91, 0.85, 55, 31, 20],
+ [87, 63, 101, 0.9, 56, 41, 21], [104, 77, 119, 1.09, 73, 48, 22],
+ [87, 62, 100, 1, 72, 28, 23], [168, 128, 172, 1.49, 97, 56, 24],
+ [65, 45, 51, 0.74, 39, 17, 25], [39, 24, 38, 0.61, 47, 17, 26],
+ [39, 24, 39, 0.59, 50, 19, 27], [93, 68, 96, 1.05, 79, 29, 28],
+ [188, 143, 197, 1.66, 99, 51, 29], [174, 131, 174, 1.55, 108, 50, 30],
+]
+c_schema= [{"name": "AQI", "max": 300, "min": 5},
+ {"name": "PM2.5", "max": 250, "min": 20},
+ {"name": "PM10", "max": 300, "min": 5},
+ {"name": "CO", "max": 5},
+ {"name": "NO2", "max": 200},
+ {"name": "SO2", "max": 100}]
+radar = Radar()
+radar.config(c_schema=c_schema, shape='circle')
+radar.add("北京", value_bj, item_color="#f9713c", symbol=None)
+radar.add("上海", value_sh, item_color="#b3e4a1", symbol=None)
+radar.show_config()
+radar.render()
+```
+
+
+**Tip：** symblo=None make marked graphic hiden(small circle)
+
+
+## Scatter
+> The scatter chart in rectangular coordinate could be used to present the relation between x and y.
+> If data have multiple dimensions, the values of the other dimensions can be visualized through symbol with various sizes and colors, which becomes a bubble chart. These can be done by using with visualMap component.
+
+Scatter.add() signatures
+```python
+add(name, x_axis, y_axis, symbol_size=10, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* x_axis -> list
+ data of xAxis
+* y_axis -> list
+ data of yAxis
+* symbol_size -> int
+ default -> 10
+ symbol size
+
+```python
+from pyecharts import Scatter
+
+v1 = [10, 20, 30, 40, 50, 60]
+v2 = [10, 20, 30, 40, 50, 60]
+scatter = Scatter("散点图示例")
+scatter.add("A", v1, v2)
+scatter.add("B", v1[::-1], v2)
+scatter.show_config()
+scatter.render()
+```
+
+
+Scatter also built-in draw method.
+```python
+draw(path, color=None)
+```
+convert pixels on the image into array ,when colour is （255,255,255）only retain non white pixels' coordinate information. output two k_lst, v_lst list can just as the data item of scatter plot.
+
+```
+* path -> str
+ path of Image that want to draw
+* color -> str
+ select a color to exclude, (225, 225, 225) means Keep only white pixel information.
+
+First of all ,you need to prepare a picture,like
+
+
+
+```python
+from pyecharts import Scatter
+
+scatter = Scatter("散点图示例")
+v1, v2 = scatter.draw("../images/pyecharts-0.png")
+scatter.add("pyecharts", v1, v2, is_random=True)
+scatter.show_config()
+scatter.render()
+```
+
+
+
+## Scatter3D
+Scatter3D.add() signatures
+```python
+add(name, data, grid3D_opacity=1, **kwargs)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* data -> [[], []]
+ data of line3D
+* grid3D_opacity -> float
+ default -> 1
+ opacity of gird3D item
+
+```python
+from pyecharts import Scatter3D
+
+import random
+data = [[random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)] for _ in range(80)]
+range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+scatter3D = Scatter3D("3D 散点图示例", width=1200, height=600)
+scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)
+scatter3D.render()
+```
+
+
+**Tip：** more details aboutt gird3D，please refer to [Global-options](https://github.com/chenjiandongx/pyecharts/blob/master/document/en-us/documentation.md#Global-options)
+
+## WordCloud
+WordCloud.add() signatures
+```python
+add(name, attr, value, shape="circle", word_gap=20, word_size_range=None, rotate_step=45)
+```
+* name -> str
+ Series name used for displaying in tooltip and filtering with legend,or updaing data and configuration with setOption.
+* attr -> list
+ name of attribute
+* value -> list
+ value of attribute
+* shape -> list
+ shape of wordcloud.It can be 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
+* word_gap -> int
+ default -> 20
+ Gap of word.size of the grid in pixels for marking the availability of the canvas,the larger the grid size, the bigger the gap between words.
+* word_size_range -> list
+ default -> [12, 60]
+ Text size range which the value in data will be mapped to.
+* rotate_step -> int
+ default -> 45
+ Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90].
+
+```python
+from pyecharts import WordCloud
+
+name = ['Sam S Club', 'Macys', 'Amy Schumer', 'Jurassic World', 'Charter Communications',
+ 'Chick Fil A', 'Planet Fitness', 'Pitch Perfect', 'Express', 'Home', 'Johnny Depp',
+ 'Lena Dunham', 'Lewis Hamilton', 'KXAN', 'Mary Ellen Mark', 'Farrah Abraham',
+ 'Rita Ora', 'Serena Williams', 'NCAA baseball tournament', 'Point Break']
+value = [10000, 6181, 4386, 4055, 2467, 2244, 1898, 1484, 1112, 965, 847, 582, 555,
+ 550, 462, 366, 360, 282, 273, 265]
+wordcloud = WordCloud(width=1300, height=620)
+wordcloud.add("", name, value, word_size_range=[20, 100])
+wordcloud.show_config()
+wordcloud.render()
+```
+
+
+```python
+wordcloud = WordCloud(width=1300, height=620)
+wordcloud.add("", name, value, word_size_range=[30, 100], shape='diamond')
+wordcloud.show_config()
+wordcloud.render()
+```
+
+
+**Tip：** if and only if shape is default'circle' the rotate_step parameter will take effect.
+
+
+# User Custom
+
+## Combination different types of chart and draw they on same picture.
+User Can Combination Custom Line/Bar/Kline, Scatter/EffectScatter chart,draw different types of chart on one image.Using the first chart as basement,data after that will draw on the first chart.
+Need use the method ```get_series()``` and ```custom()```.
+
+```python
+get_series()
+""" Get chart's series data """
+```
+```python
+custom(series)
+''' Add to custom chart type '''
+```
+* series -> dict
+ add to chart type series data
+
+irst use ```get_series()``` to get the data,then use ```custom()``` combine the charts together
+
+Line + Bar
+```python
+from pyecharts import Bar, Line
+
+attr = ['A', 'B', 'C', 'D', 'E', 'F']
+v1 = [10, 20, 30, 40, 50, 60]
+v2 = [15, 25, 35, 45, 55, 65]
+v3 = [38, 28, 58, 48, 78, 68]
+bar = Bar("Line - Bar 示例")
+bar.add("bar", attr, v1)
+line = Line()
+line.add("line", v2, v3)
+bar.custom(line.get_series())
+bar.show_config()
+bar.render()
+```
+
+
+Specific procedure are as follows:
+1. initialize the chart,add normal configuration item.
+2. call the first chart's custom(type.get_series()) method and one by one.
+3. call the first chart's render() method.
+
+**Tip：** ```bar.custom(line.get_series())``` this one have to be careful,use the first one chart as basement.remember do not write ```bar.custom(bar.get_series())``` or the program will get into endless self call state,infinite recursion,finally may cause your computer to crash.
+
+Scatter + EffectScatter
+```python
+from pyecharts import Scatter, EffectScatter
+
+v1 = [10, 20, 30, 40, 50, 60]
+v2 = [30, 30, 30, 30, 30, 30]
+v3 = [50, 50, 50, 50, 50, 50]
+v4 = [10, 10, 10, 10, 10, 10]
+es = EffectScatter("Scatter - EffectScatter 示例")
+es.add("es", v1, v2)
+scatter = Scatter()
+scatter.add("scatter", v1, v3)
+es.custom(scatter.get_series())
+es_1 = EffectScatter()
+es_1.add("es_1", v1, v4, symbol='pin', effect_scale=5)
+es.custom(es_1.get_series())
+es.show_config()
+es.render()
+```
+
+
+Kline + Line
+```python
+import random
+from pyecharts import Line, Kline
+
+v1 = [[2320.26, 2320.26, 2287.3, 2362.94], [2300, 2291.3, 2288.26, 2308.38],
+ [2295.35, 2346.5, 2295.35, 2345.92], [2347.22, 2358.98, 2337.35, 2363.8],
+ [2360.75, 2382.48, 2347.89, 2383.76], [2383.43, 2385.42, 2371.23, 2391.82],
+ [2377.41, 2419.02, 2369.57, 2421.15], [2425.92, 2428.15, 2417.58, 2440.38],
+ [2411, 2433.13, 2403.3, 2437.42], [2432.68, 2334.48, 2427.7, 2441.73],
+ [2430.69, 2418.53, 2394.22, 2433.89], [2416.62, 2432.4, 2414.4, 2443.03],
+ [2441.91, 2421.56, 2418.43, 2444.8], [2420.26, 2382.91, 2373.53, 2427.07],
+ [2383.49, 2397.18, 2370.61, 2397.94], [2378.82, 2325.95, 2309.17, 2378.82],
+ [2322.94, 2314.16, 2308.76, 2330.88], [2320.62, 2325.82, 2315.01, 2338.78],
+ [2313.74, 2293.34, 2289.89, 2340.71], [2297.77, 2313.22, 2292.03, 2324.63],
+ [2322.32, 2365.59, 2308.92, 2366.16], [2364.54, 2359.51, 2330.86, 2369.65],
+ [2332.08, 2273.4, 2259.25, 2333.54], [2274.81, 2326.31, 2270.1, 2328.14],
+ [2333.61, 2347.18, 2321.6, 2351.44], [2340.44, 2324.29, 2304.27, 2352.02],
+ [2326.42, 2318.61, 2314.59, 2333.67], [2314.68, 2310.59, 2296.58, 2320.96],
+ [2309.16, 2286.6, 2264.83, 2333.29], [2282.17, 2263.97, 2253.25, 2286.33],
+ [2255.77, 2270.28, 2253.31, 2276.22]]
+attr = ["2017/7/{}".format(i + 1) for i in range(31)]
+kline = Kline("Kline - Line 示例")
+kline.add("日K", attr, v1)
+line_1 = Line()
+line_1.add("line-1", attr, [random.randint(2400, 2500) for _ in range(31)])
+line_2 = Line()
+line_2.add("line-2", attr, [random.randint(2400, 2500) for _ in range(31)])
+kline.custom(line_1.get_series())
+kline.custom(line_2.get_series())
+kline.show_config()
+kline.render()
+```
+
+
+## Combination different types of chart and draw on multiple picture,the chart parallel disply.
+User Can Combination Custom Line/Bar/Kline/Scatter/EffectScatter/Pie/HeatMap chart,draw different types of chart on multiple image.Using the first chart as basement
+Need use the method ```get_series()``` and ```grid()```.
+
+```python
+get_series()
+""" get chart's series data """
+```
+```python
+grid(series，grid_width, grid_height, grid_top, grid_bottom, grid_left, grid_right)
+''' Concurrently show charts '''
+```
+* series -> dict
+ other chart series data
+* grid_width -> str/int
+ Width of grid component. Adaptive by default.
+* grid_height -> str/int
+ Height of grid component. Adaptive by default.
+* grid_top -> str/int
+ Distance between grid component and the top side of the container.
+ grid_top value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'top', 'middle', or 'bottom'.
+ If the grid_top value is set to be 'top', 'middle', or 'bottom',then the component will be aligned automatically based on position.
+* grid_bottom -> str/int
+ Distance between grid component and the bottom side of the container.
+ grid_bottom value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%'.
+* grid_left -> str/int
+ Distance between grid component and the left side of the container.
+ grid_left value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%';and it can also be 'left', 'center', or 'right'.
+ If the grid_left value is set to be 'left', 'center', or 'right',then the component will be aligned automatically based on position.
+* grid_right -> str/int
+ Distance between grid component and the right side of the container.
+ grid_right value can be instant pixel value like 20;it can also be percentage value relative to container width like '20%'.
+
+irst use ```get_series()``` get data，then use ```grid()``` combine the charts
+
+up and down type,Bar + Line
+```python
+from pyecharts import Bar, Line
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("柱状图示例", height=720, is_grid=True)
+bar.add("商家A", attr, v1, is_stack=True, grid_bottom="60%")
+bar.add("商家B", attr, v2, is_stack=True, grid_bottom="60%")
+line = Line("折线图示例", title_top="50%")
+attr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+line.add("最高气温", attr, [11, 11, 15, 13, 12, 13, 10], mark_point=["max", "min"], mark_line=["average"])
+line.add("最低气温", attr, [1, -2, 2, 5, 3, 2, 0], mark_point=["max", "min"],
+ mark_line=["average"], legend_top="50%")
+bar.grid(line.get_series(), grid_top="60%")
+bar.show_config()
+bar.render()
+```
+
+
+**once more Tip：** ```bar.grid(line.get_series(), grid_top="60%")``` do not write ```bar.grid(bar.get_series())``` or get into edless recursion
+
+The specific process is as follows：
+1. Make is_grid=True when the first chart initialize,declare using grid assembly.
+2. The first form's add() method have to make grid_* parameter，it has to be done,because grid_* default value is None,and won't add to configuration item.Appoint one at least.
+3. Initialize other type（so do the same type）,not need appoint grid_* parameter.
+4. Call the first chart's grid() method and add one by one,and set grid_* parameter，it has to be done，at least one.
+5. Call the first chart's render() method.
+
+left and right type，Scatter + EffectScatter
+```python
+from pyecharts import Scatter, EffectScatter
+
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+scatter = Scatter(width=1200, is_grid=True)
+scatter.add("散点图示例", v1, v2, grid_left="60%", legend_pos="70%")
+es = EffectScatter()
+es.add("动态散点图示例", [11, 11, 15, 13, 12, 13, 10], [1, -2, 2, 5, 3, 2, 0],
+ effect_scale=6, legend_pos="20%")
+scatter.grid(es.get_series(), grid_right="60%")
+scatter.show_config()
+scatter.render()
+```
+
+
+up,down,left and right type,Bar + Line + Scatter + EffectScatter
+```python
+from pyecharts import Bar, Line, Scatter, EffectScatter
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("柱状图示例", height=720, width=1200, title_pos="65%", is_grid=True)
+bar.add("商家A", attr, v1, is_stack=True, grid_bottom="60%", grid_left="60%")
+bar.add("商家B", attr, v2, is_stack=True, grid_bottom="60%", grid_left="60%", legend_pos="80%")
+line = Line("折线图示例")
+attr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+line.add("最高气温", attr, [11, 11, 15, 13, 12, 13, 10], mark_point=["max", "min"], mark_line=["average"])
+line.add("最低气温", attr, [1, -2, 2, 5, 3, 2, 0], mark_point=["max", "min"],
+ mark_line=["average"], legend_pos="20%")
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+scatter = Scatter("散点图示例", title_top="50%", title_pos="65%")
+scatter.add("scatter", v1, v2, legend_top="50%", legend_pos="80%")
+es = EffectScatter("动态散点图示例", title_top="50%")
+es.add("es", [11, 11, 15, 13, 12, 13, 10], [1, -2, 2, 5, 3, 2, 0], effect_scale=6,
+ legend_top="50%", legend_pos="20%")
+bar.grid(line.get_series(), grid_bottom="60%", grid_right="60%")
+bar.grid(scatter.get_series(), grid_top="60%", grid_left="60%")
+bar.grid(es.get_series(), grid_top="60%", grid_right="60%")
+bar.show_config()
+bar.render()
+```
+
+
+Line + Pie
+```python
+from pyecharts import Line, Pie
+
+line = Line("折线图示例", width=1200, is_grid=True)
+attr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+line.add("最高气温", attr, [11, 11, 15, 13, 12, 13, 10], mark_point=["max", "min"],
+ mark_line=["average"], grid_right="65%")
+line.add("最低气温", attr, [1, -2, 2, 5, 3, 2, 0], mark_point=["max", "min"],
+ mark_line=["average"], legend_pos="20%")
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [11, 12, 13, 10, 10, 10]
+pie = Pie("饼图示例", title_pos="45%")
+pie.add("", attr, v1, radius=[30, 55], legend_pos="65%", legend_orient='vertical')
+line.grid(pie.get_series(), grid_left="60%")
+line.show_config()
+line.render()
+```
+
+
+Line + Kline
+```python
+from pyecharts import Line, Kline
+
+line = Line("折线图示例", width=1200, is_grid=True)
+attr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+line.add("最高气温", attr, [11, 11, 15, 13, 12, 13, 10], mark_point=["max", "min"],
+ mark_line=["average"], grid_right="60%")
+line.add("最低气温", attr, [1, -2, 2, 5, 3, 2, 0], mark_point=["max", "min"],
+ mark_line=["average"], legend_pos="20%", grid_right="60%")
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+value = [20, 40, 60, 80, 100, 120]
+v1 = [[2320.26, 2320.26, 2287.3, 2362.94], [2300, 2291.3, 2288.26, 2308.38],
+ [2295.35, 2346.5, 2295.35, 2345.92], [2347.22, 2358.98, 2337.35, 2363.8],
+ [2360.75, 2382.48, 2347.89, 2383.76], [2383.43, 2385.42, 2371.23, 2391.82],
+ [2377.41, 2419.02, 2369.57, 2421.15], [2425.92, 2428.15, 2417.58, 2440.38],
+ [2411, 2433.13, 2403.3, 2437.42], [2432.68, 2334.48, 2427.7, 2441.73],
+ [2430.69, 2418.53, 2394.22, 2433.89], [2416.62, 2432.4, 2414.4, 2443.03],
+ [2441.91, 2421.56, 2418.43, 2444.8], [2420.26, 2382.91, 2373.53, 2427.07],
+ [2383.49, 2397.18, 2370.61, 2397.94], [2378.82, 2325.95, 2309.17, 2378.82],
+ [2322.94, 2314.16, 2308.76, 2330.88], [2320.62, 2325.82, 2315.01, 2338.78],
+ [2313.74, 2293.34, 2289.89, 2340.71], [2297.77, 2313.22, 2292.03, 2324.63],
+ [2322.32, 2365.59, 2308.92, 2366.16], [2364.54, 2359.51, 2330.86, 2369.65],
+ [2332.08, 2273.4, 2259.25, 2333.54], [2274.81, 2326.31, 2270.1, 2328.14],
+ [2333.61, 2347.18, 2321.6, 2351.44], [2340.44, 2324.29, 2304.27, 2352.02],
+ [2326.42, 2318.61, 2314.59, 2333.67], [2314.68, 2310.59, 2296.58, 2320.96],
+ [2309.16, 2286.6, 2264.83, 2333.29], [2282.17, 2263.97, 2253.25, 2286.33],
+ [2255.77, 2270.28, 2253.31, 2276.22]]
+kline = Kline("K 线图示例", title_pos="60%")
+kline.add("日K", ["2017/7/{}".format(i + 1) for i in range(31)], v1, legend_pos="80%")
+line.grid(kline.get_series(), grid_left="55%")
+line.show_config()
+line.render()
+```
+
+
+HeatMap + Bar
+```python
+import random
+
+from pyecharts import HeatMap, Bar
+
+x_axis = ["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a",
+ "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"]
+y_aixs = ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"]
+data = [[i, j, random.randint(0, 50)] for i in range(24) for j in range(7)]
+heatmap = HeatMap("热力图示例", height=700, is_grid=True)
+heatmap.add("热力图直角坐标系", x_axis, y_aixs, data, is_visualmap=True, visual_top="45%",
+ visual_text_color="#000", visual_orient='horizontal', grid_bottom="60%")
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("柱状图示例", title_top="52%")
+bar.add("商家A", attr, v1, is_stack=True)
+bar.add("商家B", attr, v2, is_stack=True, legend_top="50%")
+heatmap.grid(bar.get_series(), grid_top="60%")
+heatmap.show_config()
+heatmap.render()
+```
+
+Bar will influenced by HeatMap,it's funy.
+
+# Multiple charts in one html page
+
+You will need use `Page` class and its api is simple, call `add()` charts to and then call `render()` in
+the end. However, wordcloud and liquid charts cannot be mixed in.
+
+
+Here is an example code::
+
+```python
+#coding=utf-8
+from __future__ import unicode_literals
+
+from pyecharts import Bar, Scatter3D
+from pyecharts import Page
+
+
+page = Page() # step 1
+
+attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+v1 = [5, 20, 36, 10, 75, 90]
+v2 = [10, 25, 8, 60, 20, 80]
+bar = Bar("柱状图数据堆叠示例")
+bar.add("商家A", attr, v1, is_stack=True)
+bar.add("商家B", attr, v2, is_stack=True)
+page.add(bar) # step 2
+
+# scatter3D_0
+import random
+data = [[random.randint(0, 100), random.randint(0, 100), random.randint(0, 100)] for _ in range(80)]
+range_color = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+scatter3D = Scatter3D("3D 散点图示例", width=1200, height=600)
+scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)
+page.add(scatter3D) # step 2
+
+page.render() # step 3
+```
+
+After executing above code, you will find two charts in render.html:
+
+
+
+# Flask and Django Integration Documentation
+
+* [pyecharts + Flask](https://github.com/chenjiandongx/pyecharts/blob/master/document/en-us/doc_flask.md)
+* [pyecharts + Django](https://github.com/chenjiandongx/pyecharts/blob/master/document/en-us/doc_django.md)
+
+
+# More Examples
+
+* More examples refer to [example.md](https://github.com/chenjiandongx/pyecharts/blob/master/example.md)
+* Welcome to provide more examples.
+
+# About The Project
+
+* Enjoy pyecharts!
+* If you have any question or want to improve this repository, welcome to create an issue or pull requests .
+* If you want to discuss with me alone, use the emali -> chenjiandongx@qq.com
+* Show solicitude for [changelog.md](https://github.com/chenjiandongx/pyecharts/blob/master/changelog.md)
diff --git a/docs/en-us/customize_map.md b/docs/en-us/customize_map.md
new file mode 100644
index 000000000..183587aa3
--- /dev/null
+++ b/docs/en-us/customize_map.md
@@ -0,0 +1,168 @@
+> Map extensions
+
+## How to get map extensions
+
+Since 0.3.2, the map extensions become independent and optional python packages. No longer pyecharts carries any javascript libraries. Developer should cherry-pick the map extension of their need.
+
+1. [Maps of All countries](https://echarts-maps.github.io/echarts-countries-js/): [echarts-countries-pypkg](https://github.com/pyecharts/echarts-countries-pypkg) (1.9MB): Map of world, 213 countries including China.
+2. [Maps of Chinese provinces](https://echarts-maps.github.io/echarts-china-provinces-js/): [echarts-china-provinces-pypkg](https://github.com/pyecharts/echarts-china-provinces-pypkg) (730KB)：23 provinces, 5 autonomous regions
+3. [Maps of Chinese cities](https://echarts-maps.github.io/echarts-china-cities-js/): [echarts-china-cities-pypkg](https://github.com/pyecharts/echarts-china-cities-pypkg) (3.8MB)：370 Chinese cities
+
+The following pip commands will install the maps for you:
+
+```
+pip install echarts-countries-pypkg
+pip install echarts-china-provinces-pypkg
+pip install echarts-china-cities-pypkg
+```
+
+Please note China map exists in echarts-countries-pypkg.
+
+## How to make a map extension
+
+You will need to create two github projects: one is a npm project，providing javascript libraries；the other is a python project，package previous project as a python package.
+
+### npm project
+
+It must be a npm project on github, and has gh-pages enabled to host all javascript librraries.
+With gh-pages, your jupyter user cannot see the maps when they export ipynb as html.
+
+Now, first, you need to get the following utilities:
+
+```
+pip install yehua
+git clone https://github.com/echarts-maps/echarts-js-mobans.git
+export YEHUA_FILE=/ABSOLUTE/PATH/TO/echarts-js-mobans/yehua.yml
+```
+
+Then you can create your own work folder and change into it. Take echarts-united-kingdom-js as an example:
+
+```
+$ yh
+Yehua will walk you through creating a echarts-maps js package.
+Press ^C to quit at any time.
+
+project name: echarts-united-kingdom-js
+description: UK maps for echarts
+license: MIT
+author: C.W.
+All done!! project echarts-united-kingdom-js is created
+```
+
+All is done. Let's see what was the output:
+
+```
+pyecharts-host:tmp chfw$ cd echarts-united-kingdom-js/
+pyecharts-host:echarts-united-kingdom-js chfw$ ls
+echarts-united-kingdom-js package.json registry.json
+```
+
+Now, let's talk about the folder structure of an echarts js project:
+
+
+```
++ echarts-united-kingdom-js
+ + registry.json
+ + package.json
+ + echarts-united-kingdom-js
+ + london.js
+ + manchester.js
+ + index.js
+ + other files
+```
+
+In registry.json ，the following dictionary should be filled by yourself, in order to work with pyecharts in all situations:
+```
+{
+ "JUPYTER_URL": "/nbextensions/echarts-united-kingdom-js",
+ "GITHUB_URL": "https://your.github.io/echarts-united-kingdom-js/echarts-united-kingdoms-js",
+ "JUPYTER_ENTRY": "echarts-united-kingdom-js/index",
+ "JS_FOLDER": "echarts-united-kingdoms-js",
+ "PINYIN_MAP": {
+ "伦敦": "lundun",
+ "曼彻斯特": "manqiesite"
+ },
+ "FILE_MAP": {
+ "lundun": "london",
+ "manqiesite": "manchester"
+ }
+}
+```
+
+index.js is made for jupyter notebook only:
+```
+define(["require", "exports"], function (require, exports) {
+ "use strict";
+ Object.defineProperty(exports, "__esModule", { value: true });
+ var version = '1.0.0';
+ function load_ipython_extension() {
+ console.log("echarts-united-kingdom-js " + version + " has been loaded");
+ }
+ exports.load_ipython_extension = load_ipython_extension;
+});
+
+Now, you need to put javascript libraries under the sub-folder `echarts-united-kingdom-js` and please remember to update `PINYI_MAP` and `FILE_MAP`.
+
+```
+
+### python repository
+
+Again, you will need the following utilities:
+
+```
+pip install yehua
+git clone https://github.com/pyecharts/pypkg-mobans.git
+export YEHUA_FILE=/ABSOLUTE/PATH/TO/pypkg-mobans/yehua.yml
+```
+
+Then create your work folder and change to it please. Take echarts-united-kingdom-pykg as an example:
+
+```
+$ yh
+Yehua will walk you through creating a pyecharts pypkg package.
+Press ^C to quit at any time.
+
+project name: echarts-united-kingdom-pypkg
+npm project name: echarts-united-kingdom-js
+description: pyecharts map extension - united kingdom maps - python package
+license: MIT
+author: C.W.
+contact email: wangc_2011@hotmail.com
+github profile/organisation: chfw
+copyright owner: C.W.
+Cloning into 'mobans'...
+remote: Counting objects: 214, done.
+remote: Compressing objects: 100% (11/11), done.
+remote: Total 214 (delta 8), reused 12 (delta 5), pack-reused 198
+Receiving objects: 100% (214/214), 30.31 KiB | 17.00 KiB/s, done.
+Resolving deltas: 100% (126/126), done.
+Templating CUSTOM_README.rst.jj2 to README.rst
+Templating custom_setup.py.jj2 to setup.py
+Templating requirements.txt.jj2 to requirements.txt
+Templating tests/custom_requirements.txt.jj2 to tests/requirements.txt
+Templating docs/source/conf.py.jj2 to docs/source/conf.py
+Templating test.script.jj2 to test.sh
+Templating _version.py.jj2 to echarts_united_kingdom_pypkg/_version.py
+Templating gitignore.jj2 to .gitignore
+Templating travis.yml.jj2 to .travis.yml
+Templated 9 files.
+Initialized empty Git repository in /private/tmp/echarts-united-kingdom-pypkg/.git/
+Please review changes before commit!
+```
+
+Now all files have been generated. Let's add previous project as a submodule:
+
+
+```
+pyecharts-host:tmp chfw$ cd echarts-united-kingdom-pypkg/
+git submodule add https://github.com/your/npm/project your_project_name_pypkg/resources
+git submodule init
+```
+
+Please add all files and then do:
+
+```
+git commit
+```
+
+Now it is ready for github.
diff --git a/docs/en-us/django.md b/docs/en-us/django.md
new file mode 100644
index 000000000..f3e661f1e
--- /dev/null
+++ b/docs/en-us/django.md
@@ -0,0 +1,192 @@
+# pyecharts integration with django
+
+We are following the official django [tutorials](https://docs.djangoproject.com/en/1.11/intro/tutorial01/) here. We expect you are familar with django and have
+gone through the tutorial at least.
+
+
+## Step 0: Let's create a virtual environment and install pyecharts
+
+```shell
+$ virtualenv --no-site-packages pyecharts-env
+$ source pyecharts-env/bin/activate
+$ pip install django==1.11.4
+$ pip install pyecharts
+```
+
+Although current dependencies of pyecharts include django, the tutorial is written on top django version **1.11.4**.
+
+
+## Step 1: create a mini django site and the actual visualization app
+
+```shell
+$ django-admin startproject myechartsite
+```
+
+And start an app
+
+```shell
+$ python manage.py startapp myfirstvis
+$ ls
+db.sqlite3 manage.py myechartsite myfirstvis
+```
+
+Then register the app in `myechartsite/settings.py`:
+
+```
+# myechartsite/settings.py
+...
+INSTALLED_APPS = [
+ 'django.contrib.admin',
+ 'django.contrib.auth',
+ 'django.contrib.contenttypes',
+ 'django.contrib.sessions',
+ 'django.contrib.messages',
+ 'django.contrib.staticfiles',
+ 'myfirstvis' # <---
+]
+...
+```
+
+And then let's create the urls.py which provides the url route to the request handler.
+And we will create the request handler views.py in step 3.
+
+```python
+myfirstvis/urls.py
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+ url(r'^$', views.index, name='index'),
+]
+```
+
+And insert the 'myfirstvis.urls' into `myechartsite/urls.py`
+
+```python
+myechartsite/urls.py
+from django.conf.urls import include, url
+from django.contrib import admin
+
+urlpatterns = [
+ url(r'^admin/', admin.site.urls),
+ url(r'^myfirstvis/', include('myfirstvis.urls')) # <---
+]
+```
+
+## Step 2: Now let's write up the view function
+
+Then copy the following code and save as `myfirstvis/views.py`
+
+
+```python
+from __future__ import unicode_literals
+import math
+
+from django.http import HttpResponse
+from django.template import loader
+from pyecharts import Line3D
+
+from pyecharts.constants import DEFAULT_HOST
+
+
+def index(request):
+ template = loader.get_template('myfirstvis/pyecharts.html')
+ l3d = line3d()
+ context = dict(
+ myechart=l3d.render_embed(),
+ host=DEFAULT_HOST,
+ script_list=l3d.get_js_dependencies()
+ )
+ return HttpResponse(template.render(context, request))
+
+
+def line3d():
+ _data = []
+ for t in range(0, 25000):
+ _t = t / 1000
+ x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
+ y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
+ z = _t + 2.0 * math.sin(75 * _t)
+ _data.append([x, y, z])
+ range_color = [
+ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+ line3d = Line3D("3D line plot demo", width=1200, height=600)
+ line3d.add("", _data, is_visualmap=True,
+ visual_range_color=range_color, visual_range=[0, 30],
+ is_grid3D_rotate=True, grid3D_rotate_speed=180)
+ return line3d
+```
+
+`script_list` is a list of echarts libraries that are required for the chart rendering on the page.
+The number of libraries varies according to the dependency requirements of the charts
+to be rendered.
+
+`host` refers to the host for echarts libraries. The default host is
+http://chfw.github.io/jupyter-echarts/echarts. You can change them if you wish. And if you do so,
+please clone https://github.com/chfw/jupyter-echarts. Then, place `echarts` folder onto your own server.
+
+
+## Step 3: Now let's create a template
+
+Previous steps follow the [tutorial part 1](https://docs.djangoproject.com/en/1.11/intro/tutorial01/). Now let's jump to [tutorial part 3](https://docs.djangoproject.com/en/1.11/intro/tutorial03/).
+
+Please create a templates directory and save the following file into it.
+
+```shell
+$ mkdir templates/myfirstvis -p
+```
+
+Please note the absolute path is: `/myfirstvis/templates/myfirstvis`. Here
+is the template file.
+
+
+```html
+
+
+
+
+
+
+ Proudly presented by PycCharts
+ {% for jsfile_name in script_list %}
+
+ {% endfor %}
+
+
+
+ {{myechart|safe}}
+
+
+
+```
+
+## Step 4: Run it
+
+Then let's bring up the django site:
+
+```shell
+$ cd myechartsite
+$ python manage.py runserver
+
+You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+August 08, 2017 - 05:48:38
+Django version 1.11.4, using settings 'myechartsite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+```
+
+Please visit http://localhost:8000/myfirstvis/ for your first visualization via pyecharts. Here is your first 3D visualization:
+
+
+
+
+## Conclusion
+
+As you can see, it is just a few steps to create a visual charts using pyecharts. Django tutorials has 7 parts and we only need 1st and 3rd parts to
+make the visualisation.
+
+For your reference, please find the example code in `pyecharts/document` folder.
\ No newline at end of file
diff --git a/docs/en-us/faq.md b/docs/en-us/faq.md
new file mode 100644
index 000000000..d1103ab5f
--- /dev/null
+++ b/docs/en-us/faq.md
@@ -0,0 +1,45 @@
+> Frequently asked questions and its solutions
+
+**jupyter-notebook export problem**
+
+Since 0.1.9.7, pyecharts has gone into offline mode, drawing without internet connection. Now, the charts in exported note book cannot be display as they have been put outside
+jupyter environment.
+
+So the solution is to add the following statement:
+
+```python
+...
+from pyecharts import online
+
+online()
+...
+```
+Above code will take javascripts from github.
+you cannot connect to github, you could clone https://github.com/pyecharts/assets. Then, you put `js` folder onto your own server. Here is a simple command to achieve it:
+
+```
+$ git clone https://github.com/pyecharts/assets
+$ cd js
+$ python -m http.server # for python 2, use python -m SimpleHTTPServer
+Serving HTTP on 0.0.0.0 port 8000 ...
+```
+
+Then, add localhost into previous python code:
+
+```python
+...
+from pyecharts import online
+
+online(host="http://localhost:8000)
+...
+```
+
+**Python2 Coding Problem**
+
+default code type is UTF-8, there's no problem in Python3, because Python3 have a good support in chinese. But in Python2, please use the following sentence to ensure avoiding wrong coding problem:
+```
+#!/usr/bin/python
+#coding=utf-8
+from __future__ import unicode_literals
+```
+The first two sentences are telling your editor that it should use UTF-8 ([PEP-0263](https://www.python.org/dev/peps/pep-0263/)). And the last sentence is telling Python all the characters are UTF-8 ([unicode literals](http://python-future.org/unicode_literals.html))
diff --git a/docs/en-us/flask.md b/docs/en-us/flask.md
new file mode 100644
index 000000000..9024ec96e
--- /dev/null
+++ b/docs/en-us/flask.md
@@ -0,0 +1,112 @@
+# pyecharts integration with Flask
+
+## Step 0: let's create a mini flask project
+
+Please create new directory for the new project
+
+```shell
+$ mkdir flask-echarts
+$ cd flask-echarts
+$ mkdir templates
+```
+
+## Step 1: render your chart using chart_instance.render_embed()
+
+Please save the following python file as server.py under your project root directory.
+
+```python
+import random
+from pyecharts import Scatter3D
+from pyecharts.constants import DEFAULT_HOST
+from flask import Flask, render_template
+
+
+app = Flask(__name__)
+
+
+@app.route("/")
+def hello():
+ s3d = scatter3d()
+ return render_template('pyecharts.html',
+ myechart=s3d.render_embed(),
+ host=DEFAULT_HOST,
+ script_list=s3d.get_js_dependencies())
+
+
+def scatter3d():
+ data = [generate_3d_random_point() for _ in range(80)]
+ range_color = [
+ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
+ '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+ scatter3D = Scatter3D("3D scattering plot demo", width=1200, height=600)
+ scatter3D.add("", data, is_visualmap=True, visual_range_color=range_color)
+ return scatter3D
+
+
+def generate_3d_random_point():
+ return [random.randint(0, 100),
+ random.randint(0, 100),
+ random.randint(0, 100)]
+```
+
+`script_list` is a list of echarts libraries that are required for the chart rendering on the page.
+The number of libraries varies according to the dependency requirements of the charts
+to be rendered.
+
+`host` refers to the host for echarts libraries. The default host is
+http://chfw.github.io/jupyter-echarts/echarts. You can change them if you wish. And if you do so,
+please clone https://github.com/chfw/jupyter-echarts. Then, place `echarts` folder onto your own server.
+
+## Step 2: provide your own template
+
+Please save the following template as pyecharts.html in `templates` folder
+
+```html
+
+
+
+
+
+ Proudly presented by ECharts
+ {% for jsfile_name in script_list %}
+
+ {% endfor %}
+
+
+
+ {{myechart|safe}}
+
+
+
+```
+
+## Step 3: run it
+
+Now you shall have these:
+
+```shell
+$ ls
+server.py templates
+$ ls templates
+pyecharts.html
+
+
+```shell
+$ pip install flask
+$ export FLASK_APP=server.py
+$ flask run
+* Serving Flask app "server"
+* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
+```
+
+Here's what you will get:
+
+
+
+
+## Conclusion
+
+It is extremely simple to include a pyexcharts instance in a Flask app. Please go
+ahead and put your own charts in flask.
+
+For your reference, please find the example code in `pyecharts/document` folder.
diff --git a/docs/en-us/for_pyechart_developer.md b/docs/en-us/for_pyechart_developer.md
new file mode 100644
index 000000000..5208d5f9a
--- /dev/null
+++ b/docs/en-us/for_pyechart_developer.md
@@ -0,0 +1,124 @@
+# Developer's Guide
+
+## Pull request instructions
+
+`dev` branch is for the development of each new releases. `master` branch is reserved for released code only. What it means for contributors is:
+please checkout `dev` branch right after you have a clone of pyecharts. Then start your engineering effort. When you are ready, please submit a PR
+against `dev` branch too.
+
+If your PR has code changes, please include unit tests. If possible, please attach a screenshot on your contribution. It helps everyone to see your contribution.
+
+## Generate uml diagram
+
+It uses plantuml and please get it from [its website](http://plantuml.com).
+
+```
+jar -jar plantuml.jar class-relationship-diagram.uml.
+```
+
+## How to add more javascript libraries to pyecharts
+
+All javascript libraries are now managed in a [submodule](https://git-scm.com/docs/git-submodule) [jupyter-echarts](https://github.com/chfw/jupyter-echarts). It means
+new javascript library shall go through `jupyter-echarts`.
+
+jupyter-echarts is a front-end project. If you are new to front-end engineering, please find the crash course for you in the end.
+
+### Step 1: add the library to jupyter-echarts
+
+Checkout the repository:
+
+```
+git clone https://github.com/chfw/jupyter-echarts.git
+```
+
+And then do
+
+```
+npm install --save your_javascript_library
+```
+
+Edit gulp.js
+
+```
+...
+FILES = [
+ './node_modules/echarts/dist/echarts.min.js',
+ './node_modules/echarts/map/js/china.js',
+ './node_modules/your_library/dist/min_version.js' <---
+...
+FILE_MAP = [
+...
+ 'nick_name': 'min_version' // note, please do not put .js suffix
+...
+]
+PROVINCE_PINYIN_MAP = [
+...
+ 'chinese location name': 'nick_name', // note nick_name is the same as previous one
+...
+]
+```
+
+Then run
+
+```
+$ gulp
+```
+
+The most important thing is to do git commit. You will need to commit it
+to jupyter-echarts. If you do not have write access, please submit a PR.
+
+If your contribution become large, please reference: echarts-countries-js or
+echarts-china-cities-js.
+
+### Step 2: update pyecharts
+
+Once your previous commit is accepted in jupyter-notebooks, you could then
+checkout pyecharts::
+
+```
+$ git clone --recursive https://github.com/chenjiandongx/pyecharts.git
+$ cd pyecharts/pyecharts/templates/js
+$ git pull
+remote: Counting objects: 7, done.
+remote: Compressing objects: 100% (2/2), done.
+remote: Total 7 (delta 4), reused 7 (delta 4), pack-reused 0
+Unpacking objects: 100% (7/7), done.
+From https://github.com/chfw/jupyter-echarts
+ af7184b..bb87949 master -> origin/master
+Updating af7184b..bb87949
+Fast-forward
+ echarts/main.js | 2 +-
+ gulpfile.js | 2 +-
+ src/main.ts | 2 +-
+ 3 files changed, 3 insertions(+), 3 deletions(-)
+$ cd ../../../
+$ git commit -am "pull latest changes from jupyter-echarts
+```
+
+And then push your changes to pyecharts.
+
+
+## Front end engineering for Pythonistas
+
+In front end engineering field, no one manually downloads a javascript/css file
+and type the script tag into html file. To an extreme, no one writes html, css
+nor javascript though they are writing web pages. All of those work are either
+automated and transcompiled.
+
+[npm](https://docs.npmjs.com/getting-started/what-is-npm) is a node.js package manager and helps front end engineers to automate
+the delivery of all javascript and css modules. In this category, there are
+other similiar tools: [bower](https://bower.io), [jspm](https://jspm.io) etc. [gulp](https://gulpjs.com) is the `make` command in node.js
+world and gulpfile.js is the `Makefile` for gulp. You will write all commands
+in javascript. These tools helps the developer automate the delivery of
+javascript and css files as you would use pip for python packages.
+
+So what do they write if no html, css nor javascript are written? They write
+[pug file](https://pugjs.org/api/getting-started.html)/[HAML file](http://haml.info), [sass file](http://sass-lang.com) and [coffeescript](http://coffeescript.org)/[typescript](http://www.typescriptlang.org) files. Those files
+are then trans-compiled into what you see as html, css and javascript. Nowadays,
+writing a few webpage has become a software engineering acitvity. Object
+oriented programming, code reuse, css attribute inheritance are the things
+in front end engineer's head on daily basis.
+
+Above is a quick introduction to front end engineering. There are many excellent
+projects, tools and developers in node.js universe, waiting for you to find and
+meet.
diff --git a/docs/en-us/jupyter_notebook.md b/docs/en-us/jupyter_notebook.md
new file mode 100644
index 000000000..1b4ef4a5a
--- /dev/null
+++ b/docs/en-us/jupyter_notebook.md
@@ -0,0 +1,61 @@
+# pyecharts Document - Jupyter Notebook
+
+## Overview
+
+You can show charts and export to some file formats in the Jupyter Notebook.
+
+## Installation
+
+When install the *pyecharts* package using the following command, a jupyter nbextension named *echarts/main* will be installed if jupyter exists.Or the nbextension installation will be skipped.
+
+```shell
+pip install pyecharts
+```
+
+In the development, you can also use the command to install manually jupyter nbextension.
+
+```shell
+$ pip install jupyter-echarts-pypkg
+```
+
+You can check the jupyter nbextension using the *list* command.
+
+```shell
+$ jupyter nbextension list
+Known nbextensions:
+ config dir: /Users/jaska/.jupyter/nbconfig
+ notebook section
+ echarts/main enabled
+ - Validating: OK
+```
+
+
+
+## Show Charts
+
+In the Notebook cell ,you can simply call the instance itself to diplay the chart.
+
+All chart classes in pyecharts implement the `_repr_html_` interface about [IPython Rich Display](http://ipython.readthedocs.io/en/stable/config/integrating.html#rich-display) .
+
+
+
+## Export Images and Pdf
+
+You can also download as some file formats (ipynb/py/html/pdf) and run without jupyter notebook enviromnment.
+
+**Important** ：You must be use remote jshost mode to enable this feature.
+
+```python
+from pyecharts import online
+
+online(host='https://my-site.com')
+```
+
+## Demo
+
+see more detail for [pyecharts-users-cases](https://github.com/pyecharts/pyecharts-users-cases) 。
+
+## jupyterlab
+
+[jupyterlab](https://github.com/jupyterlab/jupyterlab) is the next generation for Jupyter Notebook,and this is a very early preview, and is not suitable for general usage yet. We will pay Continuous attention to the development and make adapter with pyecharts.
+
diff --git a/docs/en-us/prepare.md b/docs/en-us/prepare.md
new file mode 100644
index 000000000..06c4ef77f
--- /dev/null
+++ b/docs/en-us/prepare.md
@@ -0,0 +1,192 @@
+# First-steps
+### Make sure you have installed the latest version pyecharts
+Now, you are ready to make your first chart!
+```python
+from pyecharts import Bar
+
+bar = Bar("我的第一个图表", "这里是副标题")
+bar.add("服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90])
+bar.show_config()
+bar.render()
+```
+
+
+
+**Tip：** You can click the download button on the right side to download the picture to your local disk.
+
+* ```add()```
+ main method，add the data and set up various options of the chart
+* ```show_config()```
+ print and output all options of the chart
+* ```render()```
+ creat a file named render.html in the root directory defaultly,which supports path parameter and set the location the file save in,for instance render(r"e:\my_first_chart.html")，open file with your browser.
+
+**Note：** Click the image download button on the right hand side of the chart. If you need more buttons, please insert `is_more_utils=True` when calling add()
+
+```python
+from pyecharts import Bar
+
+bar = Bar("我的第一个图表", "这里是副标题")
+bar.add("服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90],
+ is_more_utils=True)
+bar.render()
+```
+
+
+
+### Rendering as image using pyecharts-snapshot
+
+If you would to get png, pdf, gif files instead of `render.html`, you can use [pyecharts-snapshot](https://github.com/chfw/pyecharts-snapshot)。However, node.js is required and can be downloaded from [https://nodejs.org/en/download/](https://nodejs.org/en/download/)
+
+1. Install phantomjs
+ `npm install -g phantomjs-prebuilt`
+2. install pyecharts-snapshot
+ `pip install pyecharts-snapshot`
+3. In your program, import pyecharts-snapshot
+ `from pyecharts_snapshot.main import make_a_snapshot`
+4. Programmatical usage
+ `make_a_snapshot('render.html', 'snapshot.png')`
+ where the frist parameter is the output file(by default, render.html), and the second one is output file with file extension as png or pdf.
+
+For more details, please refer to [pyecharts-snapshot](https://github.com/chfw/pyecharts-snapshot)
+
+```
+
+### Chart rendering process
+
+almost all the chart type drawed like this:
+1. ```chart_name = Type()``` Initialise the concrete chart type.
+2. ```add()``` Add data and options.
+3. ```render()``` Creat .html file.
+
+```add()``` Data is two lists commonly(the same length),if your data is dictionary or dictionary with tuple,use ```cast()``` to convert.
+
+```python
+@staticmethod
+cast(seq)
+``` Convert the sequence with the dictionary and tuple type into k_lst, v_lst. ```
+```
+1. Tuple Lists
+ [(A1, B1), (A2, B2), (A3, B3), (A4, B4)] --> k_lst[ A[i1, i2...] ], v_lst[ B[i1, i2...] ]
+2. Dictionary Lists
+ [{A1: B1}, {A2: B2}, {A3: B3}, {A4: B4}] --> k_lst[ A[i1, i2...] ], v_lst[ B[i1, i2...] ]
+3. Dictionaries
+ {A1: B1, A2: B2, A3: B3, A4: B4} -- > k_lst[ A[i1, i2...] ], v_lst[ B[i1, i2...] ]
+
+### Render Charts Many Times
+
+> Update on v0.4.0
+
+You can call `chart.render` many times to show some charts in a script.
+
+```python
+from pyecharts import Bar, Line
+
+bar = Bar("我的第一个图表", "这里是副标题")
+bar.add("服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90])
+bar.render(path='bar.html')
+
+line = Line("我的第一个图表", "这里是副标题")
+line.add("服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90])
+line.render(path='line.html')
+```
+
+In v0.4.0+, pyecharts refactors the internal logic and make render faster.The following code is recommended.
+
+```python
+from pyecharts import Bar, Line
+from pyecharts.engine import create_default_environment
+
+bar = Bar("我的第一个图表", "这里是副标题")
+bar.add("服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90])
+
+line = Line("我的第一个图表", "这里是副标题")
+line.add("服装", ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], [5, 20, 36, 10, 75, 90])
+
+env = create_default_environment()
+
+env.render_chart_to_file(bar, path='bar.html')
+env.render_chart_to_file(line, path='line.html')
+```
+
+This example use the only one engine object to render multiple charts.
+
+### Pandas & Numpy examples
+
+In the context of Numpy and/or Pandas, ```pdcast(pddata)``` and ``` npcast(npdata)``` methods, provided in 0.19.2 are no log required. Please see the advanced example in README.
+
+
+
+If your DataFrame returns a transposed list(such as, [ [1], [2], [3] ]), you have to tranpose it by yourself (make it like [ 1, 2, 3 ] ). This transpose operation applies to Radar, Parallel, HeatMap.
+
+Series type
+```python
+from pyecharts import Bar
+import pandas as pd
+
+pddata = pd.Series([1, 2, 3, 4], index=[1, 'b', 'c', 'd'])
+vlst, ilst = Bar.pdcast(pddata)
+
+print(vlst)
+>>> [1.0, 2.0, 3.0, 4.0]
+print(ilst)
+>>> ['1', 'b', 'c', 'd']
+```
+
+DataFrame type
+```python
+from pyecharts import Bar
+import pandas as pd
+
+pddt = pd.DataFrame([[1, 2, 3, 4], [2, 3, 4, 5], [4.1, 5.2, 6.3, 7.4]], index=["A", "B", "C"])
+vlst, ilst = Bar.pdcast(pddata)
+
+print(vlst)
+>>> [[1.0, 2.0, 3.0, 4.0], [2.0, 3.0, 4.0, 5.0], [4.1, 5.2, 6.3, 7.4]]
+print(ilst)
+>>> ['A', 'B', 'C']
+```
+
+npcast()，It accepts numpy.array type.
+```python
+@staticmethod
+npcast(npdata)
+``` handle the ndarray type in Numpy, return a list that ensures the correct type. Returns the nested list if there are multiple dimensions.```
+```
+
+Numpy.array type
+```python
+from pyecharts import Bar
+import numpy ad np
+
+npdata = np.array([[1, 2, 3, 4], [2, 4, 5.0, 6.3]])
+print(npdata)
+>>> [[1.0, 2.0, 3.0, 4.0], [2.0, 4.0, 5.0, 6.3]]
+```
+
+**Of course you can use the cooler way,use Jupyter Notebook to show the chart.But what matplotlib have，so do pyecharts**
+
+like this
+
+
+
+and this
+
+
+
+more Jupyter notebook examples, please refer to [notebook-use-cases](https://github.com/chenjiandongx/pyecharts/blob/master/document/notebook-use-cases.ipynb)。you could download and run it on your notebook.
+
+**Tip：** The function was official added in 0.1.9.2 version,please update the newest version to use it.
+
+
+### Offline installation instructions for pyecharts 0.3.2 +
+
+Please download these three packages from pypi: pyecharts, pyecharts-jupyter-installer, 和 jupyter-echarts-pypkg.
+
+Then install them sequentially as:
+
+```
+pip install pyecharts-jupyter-installer.tar.gz
+pip install jupyter-echarts-pypkg.tar.gz
+pip install pyecharts.tar.gz
+```
diff --git a/docs/en-us/team.md b/docs/en-us/team.md
new file mode 100644
index 000000000..44623fc61
--- /dev/null
+++ b/docs/en-us/team.md
@@ -0,0 +1,27 @@
+# Author
+
+## Development Team
+
+Home Url: https://github.com/pyecharts
+
+| Avatar | Username | Role |
+| ------ | ------ | ------ |
+|  | [chenjiandongx](https://github.com/chenjiandongx) | Owner |
+| |[chfw](https://github.com/chfw) | Member |
+|  | [kinegratii](https://github.com/kinegratii) | Member |
+
+## Contributors
+
+> Thank you for contributions ！
+
+| Avatar | Username |
+| ------ | ------ |
+| | [landpack](https://github.com/landpack) |
+| | [muxuezi](https://github.com/muxuezi) |
+| | [647-coder](https://github.com/647-coder) |
+| | [sd8089730](https://github.com/sd8089730) |
+| | [MiracleXYZ](https://github.com/MiracleXYZ) |
+| | [mowujilun](https://github.com/mowujilun) |
+| | [xbanke](https://github.com/xbanke) |
+| | [shkey](https://github.com/shkey) |
+| | [crispgm](https://github.com/crispgm) |
\ No newline at end of file
diff --git a/docs/en-us/web_integration.md b/docs/en-us/web_integration.md
new file mode 100644
index 000000000..8854dead7
--- /dev/null
+++ b/docs/en-us/web_integration.md
@@ -0,0 +1,114 @@
+# pyecharts document - Web Integration
+
+> Before You Read
+>
+> 1. This web integration requires pyecharts V0.3.0+.
+> 2. This article is principle-described instead of a tutorial.So you should learn a lot about the relevant web framework.
+
+Now, it is more easy to integrate pyecharts with your web framework ,whatever you start a project or integrate a exist one.The integration will not break down origin features because of the flexibility and OOP in Python language.
+
+pyecharts exposes the API of builtin jinja2 template engine.In theory, it is easy to integrate the web framework which use jinja2 template engine.
+
+In different use case,different specific methods and procedures will be used. This arctile will use the common framework,Django and Flask to describe the procedures ,which other framework can be inspired from.
+
+## Flask
+
+### Custom Template Engine
+
+pyecharts use jinja2 as its template engine.According to Flask document.It is easy to integrate pyechart and Flask.This is a example.
+
+You can follow these steps to create custom template engine.
+
+- In the constructor `__init__` , addd attribute `pyecharts_config` and add template functions.
+- Assign this class to your Flask app class.
+
+```python
+from flask import Flask, render_template
+from flask.templating import Environment
+
+from pyecharts import HeatMap
+from pyecharts.engine import ECHAERTS_TEMPLATE_FUNCTIONS
+from pyecharts.conf import PyEchartsConfig
+
+class FlaskEchartsEnvironment(Environment):
+ def __init__(self, *args, **kwargs):
+ super(FlaskEchartsEnvironment, self).__init__(*args, **kwargs)
+ self.pyecharts_config = PyEchartsConfig(jshost='https://cdn.bootcss.com/echarts/3.7.2')
+ self.globals.update(ECHAERTS_TEMPLATE_FUNCTIONS)
+
+class MyFlask(Flask):
+ jinja_environment = FlaskEchartsEnvironment
+
+app = MyFlask(__name__)
+```
+
+### Template Function
+
+You can use `echarts_*` template function in the template file.
+
+```html
+
+
+
+
+ 自定义模板
+ {{ echarts_js_dependencies(hm) }}
+
+
+
+ {{ echarts_container(hm) }}
+ {{ echarts_js_content(hm) }}
+
+
+```
+
+In the demo, boo CDN js is used, so the output `
+```
+
+### Example Project
+
+The github repositoriy [Flask_demo](https://github.com/kinegratii/flask_demo) is a more complete example, which use local echarts library javascript files.You can continue development based on this project.
+
+## Django
+
+### Custom Template Engine
+
+From v1.8, you can directly use jinja2 as template engine in Django.
+
+In the integration,you should define a callable function which returns a `jinja2.Environment` object.This is a example following [Django Document](https://docs.djangoproject.com/en/1.11/topics/templates/#django.template.backends.jinja2.Jinja2) :
+
+```python
+from django.contrib.staticfiles.storage import staticfiles_storage
+from django.urls import reverse
+
+from pyecharts.conf import PyEchartsConfig
+from pyecharts.engine import BaseEnvironment
+
+
+def environment(**options):
+ env = BaseEnvironment(pyecharts_config=PyEchartsConfig(jshost='/static/'), **options)
+ # Add template functions to the environment object
+ env.globals.update({
+ 'static': staticfiles_storage.url,
+ 'url': reverse,
+ })
+ return env
+
+```
+
+See more detail at Django document.
+
+## Summary
+
+You can has two way to create your own engine class.
+
+- Inherit `pyecharts.engine.BaseEnvironment` :e.g Django. Used for用于可以直接使用的场景。
+- Add template function:e.g Flask, The class `flask.templating.Environment` overwrites some features from `jinja2.Environment` .So you should inherit this class,and add template function handly.
+
+## More
+
+- If you use Django's default template engine, see the project [django-echarts](https://github.com/kinegratii/django-echarts) for more detail.
+
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 000000000..5b56c9bac
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 000000000..2477c08f8
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ pyecharts
+
+
+
+
+
+
+
+
+
+
|[chfw](https://github.com/chfw) | Member |
+|  | [kinegratii](https://github.com/kinegratii) | Member |
+
+## Contributors
+
+> Thank you for contributions ！
+
+| Avatar | Username |
+| ------ | ------ |
+| 
| [landpack](https://github.com/landpack) |
+| 
| [muxuezi](https://github.com/muxuezi) |
+| 
| [647-coder](https://github.com/647-coder) |
+| 
| [sd8089730](https://github.com/sd8089730) |
+| 
| [MiracleXYZ](https://github.com/MiracleXYZ) |
+| 
| [mowujilun](https://github.com/mowujilun) |
+| 
| [xbanke](https://github.com/xbanke) |
+| 
| [shkey](https://github.com/shkey) |
+| 
| [crispgm](https://github.com/crispgm) |
\ No newline at end of file
diff --git a/docs/en-us/web_integration.md b/docs/en-us/web_integration.md
new file mode 100644
index 000000000..8854dead7
--- /dev/null
+++ b/docs/en-us/web_integration.md
@@ -0,0 +1,114 @@
+# pyecharts document - Web Integration
+
+> Before You Read
+>
+> 1. This web integration requires pyecharts V0.3.0+.
+> 2. This article is principle-described instead of a tutorial.So you should learn a lot about the relevant web framework.
+
+Now, it is more easy to integrate pyecharts with your web framework ,whatever you start a project or integrate a exist one.The integration will not break down origin features because of the flexibility and OOP in Python language.
+
+pyecharts exposes the API of builtin jinja2 template engine.In theory, it is easy to integrate the web framework which use jinja2 template engine.
+
+In different use case,different specific methods and procedures will be used. This arctile will use the common framework,Django and Flask to describe the procedures ,which other framework can be inspired from.
+
+## Flask
+
+### Custom Template Engine
+
+pyecharts use jinja2 as its template engine.According to Flask document.It is easy to integrate pyechart and Flask.This is a example.
+
+You can follow these steps to create custom template engine.
+
+- In the constructor `__init__` , addd attribute `pyecharts_config` and add template functions.
+- Assign this class to your Flask app class.
+
+```python
+from flask import Flask, render_template
+from flask.templating import Environment
+
+from pyecharts import HeatMap
+from pyecharts.engine import ECHAERTS_TEMPLATE_FUNCTIONS
+from pyecharts.conf import PyEchartsConfig
+
+class FlaskEchartsEnvironment(Environment):
+ def __init__(self, *args, **kwargs):
+ super(FlaskEchartsEnvironment, self).__init__(*args, **kwargs)
+ self.pyecharts_config = PyEchartsConfig(jshost='https://cdn.bootcss.com/echarts/3.7.2')
+ self.globals.update(ECHAERTS_TEMPLATE_FUNCTIONS)
+
+class MyFlask(Flask):
+ jinja_environment = FlaskEchartsEnvironment
+
+app = MyFlask(__name__)
+```
+
+### Template Function
+
+You can use `echarts_*` template function in the template file.
+
+```html
+
+
+
+
+