30分钟学会pyechart数据可视化.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Pyecharts 可视化教程"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Echarts 是一个由百度开源的数据可视化javascript库，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**注意，我们安装的是pyecharts的0.5.11的版本，不是最新版本！**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Collecting pyecharts==0.5.11\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/52/b8/e46a41c44176cd247cb1fd437e38e179ea604de28c91755c30be1046772c/pyecharts-0.5.11-py2.py3-none-any.whl (122kB)\n",
      "\u001b[K    100% |████████████████████████████████| 122kB 366kB/s ta 0:00:01\n",
      "\u001b[?25hCollecting lml==0.0.2 (from pyecharts==0.5.11)\n",
      "  Downloading https://files.pythonhosted.org/packages/8a/6f/0eb22694df07072ea467effdbb8e313222a21788ea7914773f59fd2bb857/lml-0.0.2-py2.py3-none-any.whl\n",
      "Requirement already satisfied: pillow in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from pyecharts==0.5.11) (5.4.1)\n",
      "Requirement already satisfied: future in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from pyecharts==0.5.11) (0.17.1)\n",
      "Requirement already satisfied: jinja2 in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from pyecharts==0.5.11) (2.10)\n",
      "Collecting jupyter-echarts-pypkg==0.1.2 (from pyecharts==0.5.11)\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/46/71/839e9397d924d577aa44e78ac06a813c761b39a6eab8cd3ba3821b4c894b/jupyter-echarts-pypkg-0.1.2.tar.gz (520kB)\n",
      "\u001b[K    100% |████████████████████████████████| 522kB 714kB/s ta 0:00:011\n",
      "\u001b[?25hCollecting pyecharts-javascripthon==0.0.6 (from pyecharts==0.5.11)\n",
      "  Downloading https://files.pythonhosted.org/packages/6f/68/23644a394341fef4cbcb48a3fa4b2816408a13a1fa3281cf9030b2ac2d67/pyecharts_javascripthon-0.0.6-py2.py3-none-any.whl\n",
      "Requirement already satisfied: MarkupSafe>=0.23 in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from jinja2->pyecharts==0.5.11) (1.1.1)\n",
      "Requirement already satisfied: pyecharts-jupyter-installer==0.0.3 in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from jupyter-echarts-pypkg==0.1.2->pyecharts==0.5.11) (0.0.3)\n",
      "Collecting javascripthon>=0.10; python_version > \"3.4\" (from pyecharts-javascripthon==0.0.6->pyecharts==0.5.11)\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/ea/ef/b46401e181768b3738660f5dc1f7ea0b334ed17fff685a61503d2989e77e/javascripthon-0.10.tar.gz (538kB)\n",
      "\u001b[K    100% |████████████████████████████████| 542kB 614kB/s ta 0:00:01\n",
      "\u001b[?25hRequirement already satisfied: setuptools in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from javascripthon>=0.10; python_version > \"3.4\"->pyecharts-javascripthon==0.0.6->pyecharts==0.5.11) (40.8.0)\n",
      "Collecting dukpy (from javascripthon>=0.10; python_version > \"3.4\"->pyecharts-javascripthon==0.0.6->pyecharts==0.5.11)\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/0e/d4/7ebef46a9fe8c5fb0227531b08867b7ab4447259fbb1c29efd41e2c1b184/dukpy-0.2.2.tar.gz (2.0MB)\n",
      "\u001b[K    100% |████████████████████████████████| 2.0MB 320kB/s ta 0:00:01\n",
      "\u001b[?25hCollecting macropy3==1.1.0b2 (from javascripthon>=0.10; python_version > \"3.4\"->pyecharts-javascripthon==0.0.6->pyecharts==0.5.11)\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/8c/b7/a61f9d9bd7de80ca51ef362db5bb6434ea21484c907d2a5f396d97b0274c/macropy3-1.1.0b2.tar.gz (44kB)\n",
      "\u001b[K    100% |████████████████████████████████| 51kB 377kB/s ta 0:00:011\n",
      "\u001b[?25hBuilding wheels for collected packages: jupyter-echarts-pypkg, javascripthon, dukpy, macropy3\n",
      "  Building wheel for jupyter-echarts-pypkg (setup.py) ... \u001b[?25ldone\n",
      "\u001b[?25h  Stored in directory: /Users/liangyun/Library/Caches/pip/wheels/62/5c/66/e79276e15e377da9854521c19718ac5a23d827a1b554cf0091\n",
      "  Building wheel for javascripthon (setup.py) ... \u001b[?25ldone\n",
      "\u001b[?25h  Stored in directory: /Users/liangyun/Library/Caches/pip/wheels/f0/a0/6e/5cac90791fefe9c2961f9d5b2fc9b71da8b9b2f927f4012918\n",
      "  Building wheel for dukpy (setup.py) ... \u001b[?25ldone\n",
      "\u001b[?25h  Stored in directory: /Users/liangyun/Library/Caches/pip/wheels/75/36/c3/6b6172234b2926013669c9bfead9e2147113a3134ff0719d52\n",
      "  Building wheel for macropy3 (setup.py) ... \u001b[?25ldone\n",
      "\u001b[?25h  Stored in directory: /Users/liangyun/Library/Caches/pip/wheels/ef/ea/95/65744a6a720d5b0b57779da564c68a3e1b221ea998542a78b3\n",
      "Successfully built jupyter-echarts-pypkg javascripthon dukpy macropy3\n",
      "Installing collected packages: lml, jupyter-echarts-pypkg, dukpy, macropy3, javascripthon, pyecharts-javascripthon, pyecharts\n",
      "Successfully installed dukpy-0.2.2 javascripthon-0.10 jupyter-echarts-pypkg-0.1.2 lml-0.0.2 macropy3-1.1.0b2 pyecharts-0.5.11 pyecharts-javascripthon-0.0.6\n",
      "Collecting pyecharts_snapshot\n",
      "  Downloading https://files.pythonhosted.org/packages/85/e8/f0a14cc92d89d43e52efb48bca5053c24b53e06e93b43579071476ed0cc6/pyecharts_snapshot-0.2.0-py2.py3-none-any.whl\n",
      "Collecting pyppeteer>=0.0.25 (from pyecharts_snapshot)\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/b0/16/a5e8d617994cac605f972523bb25f12e3ff9c30baee29b4a9c50467229d9/pyppeteer-0.0.25.tar.gz (1.2MB)\n",
      "\u001b[K    100% |████████████████████████████████| 1.2MB 673kB/s ta 0:00:01\n",
      "\u001b[?25hRequirement already satisfied: pillow in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from pyecharts_snapshot) (5.4.1)\n",
      "Collecting pyee (from pyppeteer>=0.0.25->pyecharts_snapshot)\n",
      "  Downloading https://files.pythonhosted.org/packages/ad/d8/5608d571ffad3d7de0192b0b3099fe3f38d87c0817ebff3cee19264f0bc2/pyee-6.0.0-py2.py3-none-any.whl\n",
      "Collecting websockets (from pyppeteer>=0.0.25->pyecharts_snapshot)\n",
      "\u001b[?25l  Downloading https://files.pythonhosted.org/packages/8b/6b/dcbafe10a1b889f3d31bef7048dbfb23973d4b56e8fb47c9158c47fa5643/websockets-8.0.2-cp37-cp37m-macosx_10_6_intel.whl (65kB)\n",
      "\u001b[K    100% |████████████████████████████████| 71kB 72kB/s ta 0:00:011\n",
      "\u001b[?25hCollecting appdirs (from pyppeteer>=0.0.25->pyecharts_snapshot)\n",
      "  Downloading https://files.pythonhosted.org/packages/56/eb/810e700ed1349edde4cbdc1b2a21e28cdf115f9faf263f6bbf8447c1abf3/appdirs-1.4.3-py2.py3-none-any.whl\n",
      "Requirement already satisfied: urllib3 in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from pyppeteer>=0.0.25->pyecharts_snapshot) (1.24.1)\n",
      "Requirement already satisfied: tqdm in /Users/liangyun/anaconda3/lib/python3.7/site-packages (from pyppeteer>=0.0.25->pyecharts_snapshot) (4.31.1)\n",
      "Building wheels for collected packages: pyppeteer\n",
      "  Building wheel for pyppeteer (setup.py) ... \u001b[?25ldone\n",
      "\u001b[?25h  Stored in directory: /Users/liangyun/Library/Caches/pip/wheels/34/e0/5d/070e22eceecf7ecd5fa4b86bbc18c1c7d0b90e02e9b57f35eb\n",
      "Successfully built pyppeteer\n",
      "Installing collected packages: pyee, websockets, appdirs, pyppeteer, pyecharts-snapshot\n",
      "Successfully installed appdirs-1.4.3 pyecharts-snapshot-0.2.0 pyee-6.0.0 pyppeteer-0.0.25 websockets-8.0.2\n"
     ]
    }
   ],
   "source": [
    "# 安装pyecharts\n",
    "!pip install pyecharts==0.5.11\n",
    "\n",
    "# pyecharts_snapshot 提供图片导出功能\n",
    "!pip install pyecharts_snapshot "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 一，基本图表"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "pyecharts支持30多种不同的图表。我们只对其中最常用的几种类型进行基本范例的介绍。\n",
    "\n",
    "下面是pyecharts主要类的继承关系。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![](data/class-relationship-diagram.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**1，柱形图示范**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "柱形图适合表现几组数据之间的对比关系，柱形图的数据的数量一般不宜太多。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"e4a00d4193fc4b2bb83f0bfb4fe97ce8\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_e4a00d4193fc4b2bb83f0bfb4fe97ce8 = echarts.init(document.getElementById('e4a00d4193fc4b2bb83f0bfb4fe97ce8'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_e4a00d4193fc4b2bb83f0bfb4fe97ce8 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u4ea7\\u54c1\\u6708\\u9500\\u91cf\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 1895210,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"data\": [\n",
       "                5,\n",
       "                20,\n",
       "                36,\n",
       "                10,\n",
       "                75\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1895210\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"data\": [\n",
       "                10,\n",
       "                25,\n",
       "                8,\n",
       "                60,\n",
       "                20\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1895210\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_e4a00d4193fc4b2bb83f0bfb4fe97ce8.setOption(option_e4a00d4193fc4b2bb83f0bfb4fe97ce8);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.bar.Bar at 0x10ec4f2e8>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from  pyecharts import Bar\n",
    "\n",
    "x = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\"]\n",
    "y1 = [5, 20, 36, 10, 75]\n",
    "y2 = [10, 25, 8, 60, 20]\n",
    "\n",
    "bar = Bar(title = \"产品月销量\",width = 600,height = 420)\n",
    "bar.add(name = \"商家A\", x_axis = x, y_axis = y1)\n",
    "bar.add(name = \"商家B\", x_axis = x, y_axis = y2,is_xaxis_boundarygap =True)\n",
    "\n",
    "bar.render('data/柱形图示范.html')\n",
    "bar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**2，折线图示范**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "折线图适合描述两个变量之间的函数关系，例如常用它来描述一个变量随时间的变化趋势。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"85efe1ffe2b84e2c8429871030575ec7\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_85efe1ffe2b84e2c8429871030575ec7 = echarts.init(document.getElementById('85efe1ffe2b84e2c8429871030575ec7'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_85efe1ffe2b84e2c8429871030575ec7 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u6708\\u9500\\u552e\\u603b\\u989d\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 3740351,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    10\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    50\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 3,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"red\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 3740351\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    8\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    50\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    53\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    48\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    58\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 2,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"cyan\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 3740351\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": false,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2018-01\",\n",
       "                \"2018-02\",\n",
       "                \"2018-03\",\n",
       "                \"2018-04\",\n",
       "                \"2018-05\",\n",
       "                \"2018-06\",\n",
       "                \"2018-07\",\n",
       "                \"2018-08\",\n",
       "                \"2018-09\",\n",
       "                \"2018-10\",\n",
       "                \"2018-11\",\n",
       "                \"2018-12\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"min\": 0,\n",
       "            \"max\": 100,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"start\": 50,\n",
       "            \"end\": 100,\n",
       "            \"orient\": \"horizontal\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_85efe1ffe2b84e2c8429871030575ec7.setOption(option_85efe1ffe2b84e2c8429871030575ec7);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.line.Line at 0x11e2f97b8>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from  pyecharts import Line\n",
    "\n",
    "x = ['2018-{:0>2d}'.format(s) for s in range(1,13)]\n",
    "y1 = [5,10,26,30,35,30,20,26,40,46,40,50]\n",
    "y2 = [8,20,24,36,40,36,40,45,50,53,48,58]\n",
    "\n",
    "line = Line(title = \"月销售总额\",width = 600,height = 420)\n",
    "\n",
    "line.add(name = \"商家A\", x_axis = x, y_axis = y1,\n",
    "         line_width = 3,line_color = 'red')\n",
    "line.add(name = \"商家B\", x_axis = x, y_axis = y2,\n",
    "         yaxis_min = 0,yaxis_max = 100,is_xaxis_boundarygap = False,\n",
    "         is_datazoom_show =True,line_width = 2,line_color = 'cyan')\n",
    "\n",
    "line.render('data/折线图示范.html')\n",
    "line"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**3，散点图示范**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "散点图适合表现大量样本的多个属性的分布规律。散点图的每个点表示一个样本，每个坐标维度表示一个属性。\n",
    "\n",
    "当样本属性维度多于2个时，可以使用点的颜色或大小等方式来表达更多属性维度。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"6a3ba55a51884be1b9939b6c19427462\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_6a3ba55a51884be1b9939b6c19427462 = echarts.init(document.getElementById('6a3ba55a51884be1b9939b6c19427462'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_6a3ba55a51884be1b9939b6c19427462 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u4f53\\u683c\\u6570\\u636e\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 2041888,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"scatter\",\n",
       "            \"name\": \"boy\",\n",
       "            \"symbol\": \"circle\",\n",
       "            \"symbolSize\": 10,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    56,\n",
       "                    162\n",
       "                ],\n",
       "                [\n",
       "                    67,\n",
       "                    170\n",
       "                ],\n",
       "                [\n",
       "                    65,\n",
       "                    168\n",
       "                ],\n",
       "                [\n",
       "                    70,\n",
       "                    172\n",
       "                ],\n",
       "                [\n",
       "                    57,\n",
       "                    168\n",
       "                ],\n",
       "                [\n",
       "                    60,\n",
       "                    172\n",
       "                ],\n",
       "                [\n",
       "                    80,\n",
       "                    180\n",
       "                ],\n",
       "                [\n",
       "                    85,\n",
       "                    176\n",
       "                ],\n",
       "                [\n",
       "                    76,\n",
       "                    178\n",
       "                ],\n",
       "                [\n",
       "                    64,\n",
       "                    170\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 2041888\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"scatter\",\n",
       "            \"name\": \"girl\",\n",
       "            \"symbol\": \"circle\",\n",
       "            \"symbolSize\": 10,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    50,\n",
       "                    155\n",
       "                ],\n",
       "                [\n",
       "                    62,\n",
       "                    162\n",
       "                ],\n",
       "                [\n",
       "                    60,\n",
       "                    165\n",
       "                ],\n",
       "                [\n",
       "                    70,\n",
       "                    170\n",
       "                ],\n",
       "                [\n",
       "                    57,\n",
       "                    166\n",
       "                ],\n",
       "                [\n",
       "                    45,\n",
       "                    158\n",
       "                ],\n",
       "                [\n",
       "                    62,\n",
       "                    160\n",
       "                ],\n",
       "                [\n",
       "                    65,\n",
       "                    170\n",
       "                ],\n",
       "                [\n",
       "                    70,\n",
       "                    172\n",
       "                ],\n",
       "                [\n",
       "                    56,\n",
       "                    165\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 2041888\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"boy\",\n",
       "                \"girl\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"min\": 30,\n",
       "            \"max\": 100,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                50.0,\n",
       "                62.0,\n",
       "                60.0,\n",
       "                70.0,\n",
       "                57.0,\n",
       "                45.0,\n",
       "                62.0,\n",
       "                65.0,\n",
       "                70.0,\n",
       "                56.0\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"min\": 130,\n",
       "            \"max\": 200,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_6a3ba55a51884be1b9939b6c19427462.setOption(option_6a3ba55a51884be1b9939b6c19427462);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.scatter.Scatter at 0x11e2f92b0>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Scatter\n",
    "import pandas as pd \n",
    "\n",
    "dfboy = pd.DataFrame()\n",
    "dfboy['weight'] = [56,67,65,70,57,60,80,85,76,64]\n",
    "dfboy['height'] = [162,170,168,172,168,172,180,176,178,170]\n",
    "\n",
    "dfgirl = pd.DataFrame()\n",
    "dfgirl['weight'] = [50,62,60,70,57,45,62,65,70,56]\n",
    "dfgirl['height'] = [155,162,165,170,166,158,160,170,172,165]\n",
    "\n",
    "scatter = Scatter(title = \"体格数据\",width = 600,height = 420)\n",
    "scatter.add(name = \"boy\", x_axis = dfboy['weight'], y_axis = dfboy['height'])\n",
    "scatter.add(name = \"girl\", x_axis = dfgirl['weight'], y_axis = dfgirl['height'],\n",
    "           yaxis_min = 130,yaxis_max = 200,xaxis_min = 30,xaxis_max = 100)\n",
    "\n",
    "scatter.render(\"data/散点图示范.html\")\n",
    "\n",
    "scatter"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "以下示范3个维度数据的散点图展示"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"5dd7b8c9c1ad4ede8f878bc73ba0c095\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_5dd7b8c9c1ad4ede8f878bc73ba0c095 = echarts.init(document.getElementById('5dd7b8c9c1ad4ede8f878bc73ba0c095'), 'light', {renderer: 'canvas'});\n",
       "function custom_formatter(params) {\n",
       "    return ((((((params.value[3] + \":\") + params.value[0].toString()) + \",\") + params.value[1].toString()) + \",\") + params.value[2].toString());\n",
       "}\n",
       "\n",
       "var option_5dd7b8c9c1ad4ede8f878bc73ba0c095 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u5404\\u56fd\\u53d1\\u5c55\\u6c34\\u5e73\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 44534,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"formatter\": custom_formatter,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"scatter\",\n",
       "            \"symbol\": \"circle\",\n",
       "            \"symbolSize\": 10,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    13334,\n",
       "                    76.9,\n",
       "                    1376048943,\n",
       "                    \"\\u4e2d\\u56fd\"\n",
       "                ],\n",
       "                [\n",
       "                    53354,\n",
       "                    79.1,\n",
       "                    321773631,\n",
       "                    \"\\u7f8e\\u56fd\"\n",
       "                ],\n",
       "                [\n",
       "                    44053,\n",
       "                    81.1,\n",
       "                    80688545,\n",
       "                    \"\\u5fb7\\u56fd\"\n",
       "                ],\n",
       "                [\n",
       "                    37599,\n",
       "                    81.9,\n",
       "                    64395345,\n",
       "                    \"\\u6cd5\\u56fd\"\n",
       "                ],\n",
       "                [\n",
       "                    38225,\n",
       "                    81.4,\n",
       "                    64715810,\n",
       "                    \"\\u82f1\\u56fd\"\n",
       "                ],\n",
       "                [\n",
       "                    36162,\n",
       "                    83.5,\n",
       "                    126573481,\n",
       "                    \"\\u65e5\\u672c\"\n",
       "                ],\n",
       "                [\n",
       "                    23038,\n",
       "                    73.13,\n",
       "                    143456918,\n",
       "                    \"\\u4fc4\\u7f57\\u65af\"\n",
       "                ],\n",
       "                [\n",
       "                    5903,\n",
       "                    66.8,\n",
       "                    1311050527,\n",
       "                    \"\\u5370\\u5ea6\"\n",
       "                ],\n",
       "                [\n",
       "                    44056,\n",
       "                    81.8,\n",
       "                    23968973,\n",
       "                    \"\\u6fb3\\u5927\\u5229\\u4e9a\"\n",
       "                ],\n",
       "                [\n",
       "                    43294,\n",
       "                    81.7,\n",
       "                    35939927,\n",
       "                    \"\\u52a0\\u62ff\\u5927\"\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 44534\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                13334.0,\n",
       "                53354.0,\n",
       "                44053.0,\n",
       "                37599.0,\n",
       "                38225.0,\n",
       "                36162.0,\n",
       "                23038.0,\n",
       "                5903.0,\n",
       "                44056.0,\n",
       "                43294.0\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"visualMap\": {\n",
       "        \"type\": \"continuous\",\n",
       "        \"min\": 20000000,\n",
       "        \"max\": 1500000000,\n",
       "        \"text\": [\n",
       "            \"high\",\n",
       "            \"low\"\n",
       "        ],\n",
       "        \"textStyle\": {},\n",
       "        \"inRange\": {\n",
       "            \"symbolSize\": [\n",
       "                20,\n",
       "                50\n",
       "            ]\n",
       "        },\n",
       "        \"calculable\": true,\n",
       "        \"splitNumber\": 5,\n",
       "        \"dimension\": 2,\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"left\": \"left\",\n",
       "        \"top\": \"bottom\",\n",
       "        \"showLabel\": true\n",
       "    }\n",
       "};\n",
       "myChart_5dd7b8c9c1ad4ede8f878bc73ba0c095.setOption(option_5dd7b8c9c1ad4ede8f878bc73ba0c095);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.scatter.Scatter at 0x10ec4fa58>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Scatter\n",
    "import pandas as pd \n",
    "\n",
    "def custom_formatter(params):\n",
    "    return (params.value[3] + ':' +\n",
    "             str(params.value[0]) +','\n",
    "             +str(params.value[1]) + ','\n",
    "             +str(params.value[2]))\n",
    "\n",
    "df = pd.DataFrame()\n",
    "df['country'] = [\"中国\",'美国','德国','法国','英国','日本','俄罗斯','印度','澳大利亚','加拿大']\n",
    "df['life-expectancy'] = [76.9,79.1,81.1,81.9,81.4,83.5,73.13,66.8,81.8,81.7]\n",
    "df['capita-gdp'] = [13334,53354,44053,37599,38225,36162,23038,5903,44056,43294]\n",
    "df['population'] = [1376048943,321773631,80688545,64395345,64715810,126573481,143456918,\n",
    "                    1311050527,23968973,35939927]\n",
    "\n",
    "scatter = Scatter(title = \"各国发展水平\",width = 600,height = 420)\n",
    "scatter.add(name = '',\n",
    "            x_axis = df['capita-gdp'],  # params.values[0]\n",
    "            y_axis = df['life-expectancy'], # params.values[1]\n",
    "            extra_data = df['population'].values.tolist(), # params.values[2]\n",
    "            extra_name = df['country'].values.tolist(), # params.values[3]\n",
    "            tooltip_formatter=custom_formatter,  #自定义提示框格式内容\n",
    "            is_visualmap=True, # 显示\n",
    "            visual_orient=\"horizontal\",\n",
    "            visual_type = 'size',  #可以是size或者color\n",
    "            visual_dimension=2,\n",
    "            visual_range=[20000000, 1500000000],\n",
    "           )\n",
    "scatter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**4，箱型图示范**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "箱型图适合表现一组数据的统计分布规律，它能显示出一组数据的最大值、最小值、中位数、及上下四分位数。\n",
    "\n",
    "箱型图的进阶版本是小提琴图，可以展示数据的密度估计曲线，可以用seaborn画出。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"b0c8538863e44925b7978be2352f8ac4\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_b0c8538863e44925b7978be2352f8ac4 = echarts.init(document.getElementById('b0c8538863e44925b7978be2352f8ac4'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_b0c8538863e44925b7978be2352f8ac4 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u8003\\u8bd5\\u6210\\u7ee9\\u7bb1\\u578b\\u56fe\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 173531,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"boxplot\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    20,\n",
       "                    65.0,\n",
       "                    78,\n",
       "                    89.5,\n",
       "                    98\n",
       "                ],\n",
       "                [\n",
       "                    45,\n",
       "                    67.5,\n",
       "                    78,\n",
       "                    81.5,\n",
       "                    98\n",
       "                ],\n",
       "                [\n",
       "                    60,\n",
       "                    69.0,\n",
       "                    76,\n",
       "                    89.0,\n",
       "                    92\n",
       "                ],\n",
       "                [\n",
       "                    55,\n",
       "                    68.0,\n",
       "                    78,\n",
       "                    84.5,\n",
       "                    100\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 173531\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"1\\u73ed\",\n",
       "                \"2\\u73ed\",\n",
       "                \"3\\u73ed\",\n",
       "                \"4\\u73ed\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_b0c8538863e44925b7978be2352f8ac4.setOption(option_b0c8538863e44925b7978be2352f8ac4);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.boxplot.Boxplot at 0x1a21154c50>"
      ]
     },
     "execution_count": 20,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Boxplot\n",
    "\n",
    "x =['1班','2班','3班','4班']\n",
    "y1=[78, 98, 56, 78, 90.0, 45, 78, 20, 87, 86, 74, 89, 94]\n",
    "y2=[89, 82, 45, 67, 68, 78.0, 79, 98, 71, 56, 78, 81, 80]\n",
    "y3=[90, 80, 60, 89, 76, 73.0, 72, 92, 89, 87, 65, 66, 76]\n",
    "y4=[82, 72, 55, 100, 90.0, 78, 69, 67, 87, 66, 78, 71, 82]\n",
    "\n",
    "box = Boxplot(title = '考试成绩箱型图',width = 600,height = 420)\n",
    "\n",
    "# 预处理数据计算最大值，最小值，中位数以及上下四分位数\n",
    "y_prepared = box.prepare_data([y1,y2,y3,y4]) \n",
    "box.add(name = '',x_axis = x,y_axis = y_prepared)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "附：用seaborn 进行小提琴图的绘制"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [],
   "source": [
    "import seaborn as sns\n",
    "%matplotlib inline\n",
    "%config InlineBackend.figure_format = 'svg'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [],
   "source": [
    "#设置风格\n",
    "sns.set(style=\"white\", context=\"notebook\")\n",
    "#处理中文问题\n",
    "sns.set_style({'font.sans-serif':['simhei', 'Arial']}) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [],
   "source": [
    "dfdata = pd.DataFrame()\n",
    "dfdata['score'] = y1 + y2 + y3 + y4\n",
    "dfdata['class'] = ['class1']*len(y1)+['class2']*len(y2)+['class3']*len(y3)+['class4']*len(y4)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"no\"?>\n",
       "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n",
       "  \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n",
       "<!-- Created with matplotlib (https://matplotlib.org/) -->\n",
       "<svg height=\"272.374219pt\" version=\"1.1\" viewBox=\"0 0 398.025469 272.374219\" width=\"398.025469pt\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
       " <defs>\n",
       "  <style type=\"text/css\">\n",
       "*{stroke-linecap:butt;stroke-linejoin:round;}\n",
       "  </style>\n",
       " </defs>\n",
       " <g id=\"figure_1\">\n",
       "  <g id=\"patch_1\">\n",
       "   <path d=\"M 0 272.374219 \n",
       "L 398.025469 272.374219 \n",
       "L 398.025469 0 \n",
       "L 0 0 \n",
       "z\n",
       "\" style=\"fill:#ffffff;\"/>\n",
       "  </g>\n",
       "  <g id=\"axes_1\">\n",
       "   <g id=\"patch_2\">\n",
       "    <path d=\"M 50.025469 230.64 \n",
       "L 384.825469 230.64 \n",
       "L 384.825469 13.2 \n",
       "L 50.025469 13.2 \n",
       "z\n",
       "\" style=\"fill:#ffffff;\"/>\n",
       "   </g>\n",
       "   <g id=\"matplotlib.axis_1\">\n",
       "    <g id=\"xtick_1\">\n",
       "     <g id=\"text_1\">\n",
       "      <!-- class1 -->\n",
       "      <defs>\n",
       "       <path d=\"M 40.4375 19 \n",
       "L 49.078125 17.875 \n",
       "Q 47.65625 8.9375 41.8125 3.875 \n",
       "Q 35.984375 -1.171875 27.484375 -1.171875 \n",
       "Q 16.84375 -1.171875 10.375 5.78125 \n",
       "Q 3.90625 12.75 3.90625 25.734375 \n",
       "Q 3.90625 34.125 6.6875 40.421875 \n",
       "Q 9.46875 46.734375 15.15625 49.875 \n",
       "Q 20.84375 53.03125 27.546875 53.03125 \n",
       "Q 35.984375 53.03125 41.359375 48.75 \n",
       "Q 46.734375 44.484375 48.25 36.625 \n",
       "L 39.703125 35.296875 \n",
       "Q 38.484375 40.53125 35.375 43.15625 \n",
       "Q 32.28125 45.796875 27.875 45.796875 \n",
       "Q 21.234375 45.796875 17.078125 41.03125 \n",
       "Q 12.9375 36.28125 12.9375 25.984375 \n",
       "Q 12.9375 15.53125 16.9375 10.796875 \n",
       "Q 20.953125 6.0625 27.390625 6.0625 \n",
       "Q 32.5625 6.0625 36.03125 9.234375 \n",
       "Q 39.5 12.40625 40.4375 19 \n",
       "z\n",
       "\" id=\"ArialMT-99\"/>\n",
       "       <path d=\"M 6.390625 0 \n",
       "L 6.390625 71.578125 \n",
       "L 15.1875 71.578125 \n",
       "L 15.1875 0 \n",
       "z\n",
       "\" id=\"ArialMT-108\"/>\n",
       "       <path d=\"M 40.4375 6.390625 \n",
       "Q 35.546875 2.25 31.03125 0.53125 \n",
       "Q 26.515625 -1.171875 21.34375 -1.171875 \n",
       "Q 12.796875 -1.171875 8.203125 3 \n",
       "Q 3.609375 7.171875 3.609375 13.671875 \n",
       "Q 3.609375 17.484375 5.34375 20.625 \n",
       "Q 7.078125 23.78125 9.890625 25.6875 \n",
       "Q 12.703125 27.59375 16.21875 28.5625 \n",
       "Q 18.796875 29.25 24.03125 29.890625 \n",
       "Q 34.671875 31.15625 39.703125 32.90625 \n",
       "Q 39.75 34.71875 39.75 35.203125 \n",
       "Q 39.75 40.578125 37.25 42.78125 \n",
       "Q 33.890625 45.75 27.25 45.75 \n",
       "Q 21.046875 45.75 18.09375 43.578125 \n",
       "Q 15.140625 41.40625 13.71875 35.890625 \n",
       "L 5.125 37.0625 \n",
       "Q 6.296875 42.578125 8.984375 45.96875 \n",
       "Q 11.671875 49.359375 16.75 51.1875 \n",
       "Q 21.828125 53.03125 28.515625 53.03125 \n",
       "Q 35.15625 53.03125 39.296875 51.46875 \n",
       "Q 43.453125 49.90625 45.40625 47.53125 \n",
       "Q 47.359375 45.171875 48.140625 41.546875 \n",
       "Q 48.578125 39.3125 48.578125 33.453125 \n",
       "L 48.578125 21.734375 \n",
       "Q 48.578125 9.46875 49.140625 6.21875 \n",
       "Q 49.703125 2.984375 51.375 0 \n",
       "L 42.1875 0 \n",
       "Q 40.828125 2.734375 40.4375 6.390625 \n",
       "z\n",
       "M 39.703125 26.03125 \n",
       "Q 34.90625 24.078125 25.34375 22.703125 \n",
       "Q 19.921875 21.921875 17.671875 20.9375 \n",
       "Q 15.4375 19.96875 14.203125 18.09375 \n",
       "Q 12.984375 16.21875 12.984375 13.921875 \n",
       "Q 12.984375 10.40625 15.640625 8.0625 \n",
       "Q 18.3125 5.71875 23.4375 5.71875 \n",
       "Q 28.515625 5.71875 32.46875 7.9375 \n",
       "Q 36.421875 10.15625 38.28125 14.015625 \n",
       "Q 39.703125 17 39.703125 22.796875 \n",
       "z\n",
       "\" id=\"ArialMT-97\"/>\n",
       "       <path d=\"M 3.078125 15.484375 \n",
       "L 11.765625 16.84375 \n",
       "Q 12.5 11.625 15.84375 8.84375 \n",
       "Q 19.1875 6.0625 25.203125 6.0625 \n",
       "Q 31.25 6.0625 34.171875 8.515625 \n",
       "Q 37.109375 10.984375 37.109375 14.3125 \n",
       "Q 37.109375 17.28125 34.515625 19 \n",
       "Q 32.71875 20.171875 25.53125 21.96875 \n",
       "Q 15.875 24.421875 12.140625 26.203125 \n",
       "Q 8.40625 27.984375 6.46875 31.125 \n",
       "Q 4.546875 34.28125 4.546875 38.09375 \n",
       "Q 4.546875 41.546875 6.125 44.5 \n",
       "Q 7.71875 47.46875 10.453125 49.421875 \n",
       "Q 12.5 50.921875 16.03125 51.96875 \n",
       "Q 19.578125 53.03125 23.640625 53.03125 \n",
       "Q 29.734375 53.03125 34.34375 51.265625 \n",
       "Q 38.96875 49.515625 41.15625 46.5 \n",
       "Q 43.359375 43.5 44.1875 38.484375 \n",
       "L 35.59375 37.3125 \n",
       "Q 35.015625 41.3125 32.203125 43.546875 \n",
       "Q 29.390625 45.796875 24.265625 45.796875 \n",
       "Q 18.21875 45.796875 15.625 43.796875 \n",
       "Q 13.03125 41.796875 13.03125 39.109375 \n",
       "Q 13.03125 37.40625 14.109375 36.03125 \n",
       "Q 15.1875 34.625 17.484375 33.6875 \n",
       "Q 18.796875 33.203125 25.25 31.453125 \n",
       "Q 34.578125 28.953125 38.25 27.359375 \n",
       "Q 41.9375 25.78125 44.03125 22.75 \n",
       "Q 46.140625 19.734375 46.140625 15.234375 \n",
       "Q 46.140625 10.84375 43.578125 6.953125 \n",
       "Q 41.015625 3.078125 36.171875 0.953125 \n",
       "Q 31.34375 -1.171875 25.25 -1.171875 \n",
       "Q 15.140625 -1.171875 9.84375 3.03125 \n",
       "Q 4.546875 7.234375 3.078125 15.484375 \n",
       "z\n",
       "\" id=\"ArialMT-115\"/>\n",
       "       <path d=\"M 37.25 0 \n",
       "L 28.46875 0 \n",
       "L 28.46875 56 \n",
       "Q 25.296875 52.984375 20.140625 49.953125 \n",
       "Q 14.984375 46.921875 10.890625 45.40625 \n",
       "L 10.890625 53.90625 \n",
       "Q 18.265625 57.375 23.78125 62.296875 \n",
       "Q 29.296875 67.234375 31.59375 71.875 \n",
       "L 37.25 71.875 \n",
       "z\n",
       "\" id=\"ArialMT-49\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(76.286406 248.013594)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-99\"/>\n",
       "       <use x=\"50\" xlink:href=\"#ArialMT-108\"/>\n",
       "       <use x=\"72.216797\" xlink:href=\"#ArialMT-97\"/>\n",
       "       <use x=\"127.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"177.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"227.832031\" xlink:href=\"#ArialMT-49\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"xtick_2\">\n",
       "     <g id=\"text_2\">\n",
       "      <!-- class2 -->\n",
       "      <defs>\n",
       "       <path d=\"M 50.34375 8.453125 \n",
       "L 50.34375 0 \n",
       "L 3.03125 0 \n",
       "Q 2.9375 3.171875 4.046875 6.109375 \n",
       "Q 5.859375 10.9375 9.828125 15.625 \n",
       "Q 13.8125 20.3125 21.34375 26.46875 \n",
       "Q 33.015625 36.03125 37.109375 41.625 \n",
       "Q 41.21875 47.21875 41.21875 52.203125 \n",
       "Q 41.21875 57.421875 37.46875 61 \n",
       "Q 33.734375 64.59375 27.734375 64.59375 \n",
       "Q 21.390625 64.59375 17.578125 60.78125 \n",
       "Q 13.765625 56.984375 13.71875 50.25 \n",
       "L 4.6875 51.171875 \n",
       "Q 5.609375 61.28125 11.65625 66.578125 \n",
       "Q 17.71875 71.875 27.9375 71.875 \n",
       "Q 38.234375 71.875 44.234375 66.15625 \n",
       "Q 50.25 60.453125 50.25 52 \n",
       "Q 50.25 47.703125 48.484375 43.546875 \n",
       "Q 46.734375 39.40625 42.65625 34.8125 \n",
       "Q 38.578125 30.21875 29.109375 22.21875 \n",
       "Q 21.1875 15.578125 18.9375 13.203125 \n",
       "Q 16.703125 10.84375 15.234375 8.453125 \n",
       "z\n",
       "\" id=\"ArialMT-50\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(159.986406 248.013594)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-99\"/>\n",
       "       <use x=\"50\" xlink:href=\"#ArialMT-108\"/>\n",
       "       <use x=\"72.216797\" xlink:href=\"#ArialMT-97\"/>\n",
       "       <use x=\"127.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"177.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"227.832031\" xlink:href=\"#ArialMT-50\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"xtick_3\">\n",
       "     <g id=\"text_3\">\n",
       "      <!-- class3 -->\n",
       "      <defs>\n",
       "       <path d=\"M 4.203125 18.890625 \n",
       "L 12.984375 20.0625 \n",
       "Q 14.5 12.59375 18.140625 9.296875 \n",
       "Q 21.78125 6 27 6 \n",
       "Q 33.203125 6 37.46875 10.296875 \n",
       "Q 41.75 14.59375 41.75 20.953125 \n",
       "Q 41.75 27 37.796875 30.921875 \n",
       "Q 33.84375 34.859375 27.734375 34.859375 \n",
       "Q 25.25 34.859375 21.53125 33.890625 \n",
       "L 22.515625 41.609375 \n",
       "Q 23.390625 41.5 23.921875 41.5 \n",
       "Q 29.546875 41.5 34.03125 44.421875 \n",
       "Q 38.53125 47.359375 38.53125 53.46875 \n",
       "Q 38.53125 58.296875 35.25 61.46875 \n",
       "Q 31.984375 64.65625 26.8125 64.65625 \n",
       "Q 21.6875 64.65625 18.265625 61.421875 \n",
       "Q 14.84375 58.203125 13.875 51.765625 \n",
       "L 5.078125 53.328125 \n",
       "Q 6.6875 62.15625 12.390625 67.015625 \n",
       "Q 18.109375 71.875 26.609375 71.875 \n",
       "Q 32.46875 71.875 37.390625 69.359375 \n",
       "Q 42.328125 66.84375 44.9375 62.5 \n",
       "Q 47.5625 58.15625 47.5625 53.265625 \n",
       "Q 47.5625 48.640625 45.0625 44.828125 \n",
       "Q 42.578125 41.015625 37.703125 38.765625 \n",
       "Q 44.046875 37.3125 47.5625 32.6875 \n",
       "Q 51.078125 28.078125 51.078125 21.140625 \n",
       "Q 51.078125 11.765625 44.234375 5.25 \n",
       "Q 37.40625 -1.265625 26.953125 -1.265625 \n",
       "Q 17.53125 -1.265625 11.296875 4.34375 \n",
       "Q 5.078125 9.96875 4.203125 18.890625 \n",
       "z\n",
       "\" id=\"ArialMT-51\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(243.686406 248.013594)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-99\"/>\n",
       "       <use x=\"50\" xlink:href=\"#ArialMT-108\"/>\n",
       "       <use x=\"72.216797\" xlink:href=\"#ArialMT-97\"/>\n",
       "       <use x=\"127.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"177.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"227.832031\" xlink:href=\"#ArialMT-51\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"xtick_4\">\n",
       "     <g id=\"text_4\">\n",
       "      <!-- class4 -->\n",
       "      <defs>\n",
       "       <path d=\"M 32.328125 0 \n",
       "L 32.328125 17.140625 \n",
       "L 1.265625 17.140625 \n",
       "L 1.265625 25.203125 \n",
       "L 33.9375 71.578125 \n",
       "L 41.109375 71.578125 \n",
       "L 41.109375 25.203125 \n",
       "L 50.78125 25.203125 \n",
       "L 50.78125 17.140625 \n",
       "L 41.109375 17.140625 \n",
       "L 41.109375 0 \n",
       "z\n",
       "M 32.328125 25.203125 \n",
       "L 32.328125 57.46875 \n",
       "L 9.90625 25.203125 \n",
       "z\n",
       "\" id=\"ArialMT-52\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(327.386406 248.013594)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-99\"/>\n",
       "       <use x=\"50\" xlink:href=\"#ArialMT-108\"/>\n",
       "       <use x=\"72.216797\" xlink:href=\"#ArialMT-97\"/>\n",
       "       <use x=\"127.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"177.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "       <use x=\"227.832031\" xlink:href=\"#ArialMT-52\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"text_5\">\n",
       "     <!-- class -->\n",
       "     <g style=\"fill:#262626;\" transform=\"translate(203.755781 262.789219)scale(0.12 -0.12)\">\n",
       "      <use xlink:href=\"#ArialMT-99\"/>\n",
       "      <use x=\"50\" xlink:href=\"#ArialMT-108\"/>\n",
       "      <use x=\"72.216797\" xlink:href=\"#ArialMT-97\"/>\n",
       "      <use x=\"127.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "      <use x=\"177.832031\" xlink:href=\"#ArialMT-115\"/>\n",
       "     </g>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"matplotlib.axis_2\">\n",
       "    <g id=\"ytick_1\">\n",
       "     <g id=\"text_6\">\n",
       "      <!-- 0 -->\n",
       "      <defs>\n",
       "       <path d=\"M 4.15625 35.296875 \n",
       "Q 4.15625 48 6.765625 55.734375 \n",
       "Q 9.375 63.484375 14.515625 67.671875 \n",
       "Q 19.671875 71.875 27.484375 71.875 \n",
       "Q 33.25 71.875 37.59375 69.546875 \n",
       "Q 41.9375 67.234375 44.765625 62.859375 \n",
       "Q 47.609375 58.5 49.21875 52.21875 \n",
       "Q 50.828125 45.953125 50.828125 35.296875 \n",
       "Q 50.828125 22.703125 48.234375 14.96875 \n",
       "Q 45.65625 7.234375 40.5 3 \n",
       "Q 35.359375 -1.21875 27.484375 -1.21875 \n",
       "Q 17.140625 -1.21875 11.234375 6.203125 \n",
       "Q 4.15625 15.140625 4.15625 35.296875 \n",
       "z\n",
       "M 13.1875 35.296875 \n",
       "Q 13.1875 17.671875 17.3125 11.828125 \n",
       "Q 21.4375 6 27.484375 6 \n",
       "Q 33.546875 6 37.671875 11.859375 \n",
       "Q 41.796875 17.71875 41.796875 35.296875 \n",
       "Q 41.796875 52.984375 37.671875 58.78125 \n",
       "Q 33.546875 64.59375 27.390625 64.59375 \n",
       "Q 21.34375 64.59375 17.71875 59.46875 \n",
       "Q 13.1875 52.9375 13.1875 35.296875 \n",
       "z\n",
       "\" id=\"ArialMT-48\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(34.408438 214.847553)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"ytick_2\">\n",
       "     <g id=\"text_7\">\n",
       "      <!-- 20 -->\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(28.291406 184.681195)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-50\"/>\n",
       "       <use x=\"55.615234\" xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"ytick_3\">\n",
       "     <g id=\"text_8\">\n",
       "      <!-- 40 -->\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(28.291406 154.514837)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-52\"/>\n",
       "       <use x=\"55.615234\" xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"ytick_4\">\n",
       "     <g id=\"text_9\">\n",
       "      <!-- 60 -->\n",
       "      <defs>\n",
       "       <path d=\"M 49.75 54.046875 \n",
       "L 41.015625 53.375 \n",
       "Q 39.84375 58.546875 37.703125 60.890625 \n",
       "Q 34.125 64.65625 28.90625 64.65625 \n",
       "Q 24.703125 64.65625 21.53125 62.3125 \n",
       "Q 17.390625 59.28125 14.984375 53.46875 \n",
       "Q 12.59375 47.65625 12.5 36.921875 \n",
       "Q 15.671875 41.75 20.265625 44.09375 \n",
       "Q 24.859375 46.4375 29.890625 46.4375 \n",
       "Q 38.671875 46.4375 44.84375 39.96875 \n",
       "Q 51.03125 33.5 51.03125 23.25 \n",
       "Q 51.03125 16.5 48.125 10.71875 \n",
       "Q 45.21875 4.9375 40.140625 1.859375 \n",
       "Q 35.0625 -1.21875 28.609375 -1.21875 \n",
       "Q 17.625 -1.21875 10.6875 6.859375 \n",
       "Q 3.765625 14.9375 3.765625 33.5 \n",
       "Q 3.765625 54.25 11.421875 63.671875 \n",
       "Q 18.109375 71.875 29.4375 71.875 \n",
       "Q 37.890625 71.875 43.28125 67.140625 \n",
       "Q 48.6875 62.40625 49.75 54.046875 \n",
       "z\n",
       "M 13.875 23.1875 \n",
       "Q 13.875 18.65625 15.796875 14.5 \n",
       "Q 17.71875 10.359375 21.1875 8.171875 \n",
       "Q 24.65625 6 28.46875 6 \n",
       "Q 34.03125 6 38.03125 10.484375 \n",
       "Q 42.046875 14.984375 42.046875 22.703125 \n",
       "Q 42.046875 30.125 38.078125 34.390625 \n",
       "Q 34.125 38.671875 28.125 38.671875 \n",
       "Q 22.171875 38.671875 18.015625 34.390625 \n",
       "Q 13.875 30.125 13.875 23.1875 \n",
       "z\n",
       "\" id=\"ArialMT-54\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(28.291406 124.348479)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-54\"/>\n",
       "       <use x=\"55.615234\" xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"ytick_5\">\n",
       "     <g id=\"text_10\">\n",
       "      <!-- 80 -->\n",
       "      <defs>\n",
       "       <path d=\"M 17.671875 38.8125 \n",
       "Q 12.203125 40.828125 9.5625 44.53125 \n",
       "Q 6.9375 48.25 6.9375 53.421875 \n",
       "Q 6.9375 61.234375 12.546875 66.546875 \n",
       "Q 18.171875 71.875 27.484375 71.875 \n",
       "Q 36.859375 71.875 42.578125 66.421875 \n",
       "Q 48.296875 60.984375 48.296875 53.171875 \n",
       "Q 48.296875 48.1875 45.671875 44.5 \n",
       "Q 43.0625 40.828125 37.75 38.8125 \n",
       "Q 44.34375 36.671875 47.78125 31.875 \n",
       "Q 51.21875 27.09375 51.21875 20.453125 \n",
       "Q 51.21875 11.28125 44.71875 5.03125 \n",
       "Q 38.234375 -1.21875 27.640625 -1.21875 \n",
       "Q 17.046875 -1.21875 10.546875 5.046875 \n",
       "Q 4.046875 11.328125 4.046875 20.703125 \n",
       "Q 4.046875 27.6875 7.59375 32.390625 \n",
       "Q 11.140625 37.109375 17.671875 38.8125 \n",
       "z\n",
       "M 15.921875 53.71875 \n",
       "Q 15.921875 48.640625 19.1875 45.40625 \n",
       "Q 22.46875 42.1875 27.6875 42.1875 \n",
       "Q 32.765625 42.1875 36.015625 45.375 \n",
       "Q 39.265625 48.578125 39.265625 53.21875 \n",
       "Q 39.265625 58.0625 35.90625 61.359375 \n",
       "Q 32.5625 64.65625 27.59375 64.65625 \n",
       "Q 22.5625 64.65625 19.234375 61.421875 \n",
       "Q 15.921875 58.203125 15.921875 53.71875 \n",
       "z\n",
       "M 13.09375 20.65625 \n",
       "Q 13.09375 16.890625 14.875 13.375 \n",
       "Q 16.65625 9.859375 20.171875 7.921875 \n",
       "Q 23.6875 6 27.734375 6 \n",
       "Q 34.03125 6 38.125 10.046875 \n",
       "Q 42.234375 14.109375 42.234375 20.359375 \n",
       "Q 42.234375 26.703125 38.015625 30.859375 \n",
       "Q 33.796875 35.015625 27.4375 35.015625 \n",
       "Q 21.234375 35.015625 17.15625 30.90625 \n",
       "Q 13.09375 26.8125 13.09375 20.65625 \n",
       "z\n",
       "\" id=\"ArialMT-56\"/>\n",
       "      </defs>\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(28.291406 94.182121)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-56\"/>\n",
       "       <use x=\"55.615234\" xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"ytick_6\">\n",
       "     <g id=\"text_11\">\n",
       "      <!-- 100 -->\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(22.174375 64.015763)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-49\"/>\n",
       "       <use x=\"55.615234\" xlink:href=\"#ArialMT-48\"/>\n",
       "       <use x=\"111.230469\" xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"ytick_7\">\n",
       "     <g id=\"text_12\">\n",
       "      <!-- 120 -->\n",
       "      <g style=\"fill:#262626;\" transform=\"translate(22.174375 33.849405)scale(0.11 -0.11)\">\n",
       "       <use xlink:href=\"#ArialMT-49\"/>\n",
       "       <use x=\"55.615234\" xlink:href=\"#ArialMT-50\"/>\n",
       "       <use x=\"111.230469\" xlink:href=\"#ArialMT-48\"/>\n",
       "      </g>\n",
       "     </g>\n",
       "    </g>\n",
       "    <g id=\"text_13\">\n",
       "     <!-- score -->\n",
       "     <defs>\n",
       "      <path d=\"M 3.328125 25.921875 \n",
       "Q 3.328125 40.328125 11.328125 47.265625 \n",
       "Q 18.015625 53.03125 27.640625 53.03125 \n",
       "Q 38.328125 53.03125 45.109375 46.015625 \n",
       "Q 51.90625 39.015625 51.90625 26.65625 \n",
       "Q 51.90625 16.65625 48.90625 10.90625 \n",
       "Q 45.90625 5.171875 40.15625 2 \n",
       "Q 34.421875 -1.171875 27.640625 -1.171875 \n",
       "Q 16.75 -1.171875 10.03125 5.8125 \n",
       "Q 3.328125 12.796875 3.328125 25.921875 \n",
       "z\n",
       "M 12.359375 25.921875 \n",
       "Q 12.359375 15.96875 16.703125 11.015625 \n",
       "Q 21.046875 6.0625 27.640625 6.0625 \n",
       "Q 34.1875 6.0625 38.53125 11.03125 \n",
       "Q 42.875 16.015625 42.875 26.21875 \n",
       "Q 42.875 35.84375 38.5 40.796875 \n",
       "Q 34.125 45.75 27.640625 45.75 \n",
       "Q 21.046875 45.75 16.703125 40.8125 \n",
       "Q 12.359375 35.890625 12.359375 25.921875 \n",
       "z\n",
       "\" id=\"ArialMT-111\"/>\n",
       "      <path d=\"M 6.5 0 \n",
       "L 6.5 51.859375 \n",
       "L 14.40625 51.859375 \n",
       "L 14.40625 44 \n",
       "Q 17.4375 49.515625 20 51.265625 \n",
       "Q 22.5625 53.03125 25.640625 53.03125 \n",
       "Q 30.078125 53.03125 34.671875 50.203125 \n",
       "L 31.640625 42.046875 \n",
       "Q 28.421875 43.953125 25.203125 43.953125 \n",
       "Q 22.3125 43.953125 20.015625 42.21875 \n",
       "Q 17.71875 40.484375 16.75 37.40625 \n",
       "Q 15.28125 32.71875 15.28125 27.15625 \n",
       "L 15.28125 0 \n",
       "z\n",
       "\" id=\"ArialMT-114\"/>\n",
       "      <path d=\"M 42.09375 16.703125 \n",
       "L 51.171875 15.578125 \n",
       "Q 49.03125 7.625 43.21875 3.21875 \n",
       "Q 37.40625 -1.171875 28.375 -1.171875 \n",
       "Q 17 -1.171875 10.328125 5.828125 \n",
       "Q 3.65625 12.84375 3.65625 25.484375 \n",
       "Q 3.65625 38.578125 10.390625 45.796875 \n",
       "Q 17.140625 53.03125 27.875 53.03125 \n",
       "Q 38.28125 53.03125 44.875 45.953125 \n",
       "Q 51.46875 38.875 51.46875 26.03125 \n",
       "Q 51.46875 25.25 51.421875 23.6875 \n",
       "L 12.75 23.6875 \n",
       "Q 13.234375 15.140625 17.578125 10.59375 \n",
       "Q 21.921875 6.0625 28.421875 6.0625 \n",
       "Q 33.25 6.0625 36.671875 8.59375 \n",
       "Q 40.09375 11.140625 42.09375 16.703125 \n",
       "z\n",
       "M 13.234375 30.90625 \n",
       "L 42.1875 30.90625 \n",
       "Q 41.609375 37.453125 38.875 40.71875 \n",
       "Q 34.671875 45.796875 27.984375 45.796875 \n",
       "Q 21.921875 45.796875 17.796875 41.75 \n",
       "Q 13.671875 37.703125 13.234375 30.90625 \n",
       "z\n",
       "\" id=\"ArialMT-101\"/>\n",
       "     </defs>\n",
       "     <g style=\"fill:#262626;\" transform=\"translate(15.789375 136.590937)rotate(-90)scale(0.12 -0.12)\">\n",
       "      <use xlink:href=\"#ArialMT-115\"/>\n",
       "      <use x=\"50\" xlink:href=\"#ArialMT-99\"/>\n",
       "      <use x=\"100\" xlink:href=\"#ArialMT-111\"/>\n",
       "      <use x=\"155.615234\" xlink:href=\"#ArialMT-114\"/>\n",
       "      <use x=\"188.916016\" xlink:href=\"#ArialMT-101\"/>\n",
       "     </g>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PolyCollection_1\">\n",
       "    <defs>\n",
       "     <path d=\"M 92.229531 -51.617855 \n",
       "L 91.521406 -51.617855 \n",
       "L 91.444971 -53.614549 \n",
       "L 91.357132 -55.611244 \n",
       "L 91.257425 -57.607938 \n",
       "L 91.145653 -59.604632 \n",
       "L 91.021942 -61.601326 \n",
       "L 90.886781 -63.59802 \n",
       "L 90.741048 -65.594715 \n",
       "L 90.58602 -67.591409 \n",
       "L 90.42336 -69.588103 \n",
       "L 90.255078 -71.584797 \n",
       "L 90.083463 -73.581491 \n",
       "L 89.910999 -75.578186 \n",
       "L 89.740251 -77.57488 \n",
       "L 89.573738 -79.571574 \n",
       "L 89.4138 -81.568268 \n",
       "L 89.262457 -83.564963 \n",
       "L 89.121289 -85.561657 \n",
       "L 88.991321 -87.558351 \n",
       "L 88.872954 -89.555045 \n",
       "L 88.765913 -91.551739 \n",
       "L 88.669248 -93.548434 \n",
       "L 88.581379 -95.545128 \n",
       "L 88.500171 -97.541822 \n",
       "L 88.423062 -99.538516 \n",
       "L 88.347204 -101.53521 \n",
       "L 88.269639 -103.531905 \n",
       "L 88.187461 -105.528599 \n",
       "L 88.097992 -107.525293 \n",
       "L 87.998919 -109.521987 \n",
       "L 87.888403 -111.518682 \n",
       "L 87.765149 -113.515376 \n",
       "L 87.628418 -115.51207 \n",
       "L 87.477989 -117.508764 \n",
       "L 87.314069 -119.505458 \n",
       "L 87.137154 -121.502153 \n",
       "L 86.947855 -123.498847 \n",
       "L 86.746702 -125.495541 \n",
       "L 86.533929 -127.492235 \n",
       "L 86.309279 -129.488929 \n",
       "L 86.071828 -131.485624 \n",
       "L 85.819852 -133.482318 \n",
       "L 85.550749 -135.479012 \n",
       "L 85.261032 -137.475706 \n",
       "L 84.946398 -139.472401 \n",
       "L 84.601869 -141.469095 \n",
       "L 84.222014 -143.465789 \n",
       "L 83.801241 -145.462483 \n",
       "L 83.334136 -147.459177 \n",
       "L 82.815849 -149.455872 \n",
       "L 82.242492 -151.452566 \n",
       "L 81.611532 -153.44926 \n",
       "L 80.92216 -155.445954 \n",
       "L 80.175596 -157.442649 \n",
       "L 79.375335 -159.439343 \n",
       "L 78.527285 -161.436037 \n",
       "L 77.639814 -163.432731 \n",
       "L 76.723678 -165.429425 \n",
       "L 75.791837 -167.42612 \n",
       "L 74.859164 -169.422814 \n",
       "L 73.942058 -171.419508 \n",
       "L 73.057974 -173.416202 \n",
       "L 72.224893 -175.412896 \n",
       "L 71.460756 -177.409591 \n",
       "L 70.782882 -179.406285 \n",
       "L 70.207397 -181.402979 \n",
       "L 69.748702 -183.399673 \n",
       "L 69.418992 -185.396368 \n",
       "L 69.227854 -187.393062 \n",
       "L 69.181947 -189.389756 \n",
       "L 69.284792 -191.38645 \n",
       "L 69.536661 -193.383144 \n",
       "L 69.934579 -195.379839 \n",
       "L 70.47243 -197.376533 \n",
       "L 71.141169 -199.373227 \n",
       "L 71.92912 -201.369921 \n",
       "L 72.822361 -203.366615 \n",
       "L 73.805167 -205.36331 \n",
       "L 74.8605 -207.360004 \n",
       "L 75.970526 -209.356698 \n",
       "L 77.117139 -211.353392 \n",
       "L 78.28247 -213.350087 \n",
       "L 79.449363 -215.346781 \n",
       "L 80.601802 -217.343475 \n",
       "L 81.725272 -219.340169 \n",
       "L 82.807047 -221.336863 \n",
       "L 83.836396 -223.333558 \n",
       "L 84.8047 -225.330252 \n",
       "L 85.705493 -227.326946 \n",
       "L 86.534418 -229.32364 \n",
       "L 87.289118 -231.320334 \n",
       "L 87.969071 -233.317029 \n",
       "L 88.575373 -235.313723 \n",
       "L 89.110501 -237.310417 \n",
       "L 89.578047 -239.307111 \n",
       "L 89.98246 -241.303806 \n",
       "L 90.328788 -243.3005 \n",
       "L 90.62244 -245.297194 \n",
       "L 90.868978 -247.293888 \n",
       "L 91.073931 -249.290582 \n",
       "L 92.677006 -249.290582 \n",
       "L 92.677006 -249.290582 \n",
       "L 92.881959 -247.293888 \n",
       "L 93.128497 -245.297194 \n",
       "L 93.42215 -243.3005 \n",
       "L 93.768477 -241.303806 \n",
       "L 94.17289 -239.307111 \n",
       "L 94.640436 -237.310417 \n",
       "L 95.175564 -235.313723 \n",
       "L 95.781867 -233.317029 \n",
       "L 96.46182 -231.320334 \n",
       "L 97.21652 -229.32364 \n",
       "L 98.045444 -227.326946 \n",
       "L 98.946237 -225.330252 \n",
       "L 99.914542 -223.333558 \n",
       "L 100.943891 -221.336863 \n",
       "L 102.025666 -219.340169 \n",
       "L 103.149136 -217.343475 \n",
       "L 104.301574 -215.346781 \n",
       "L 105.468467 -213.350087 \n",
       "L 106.633798 -211.353392 \n",
       "L 107.780411 -209.356698 \n",
       "L 108.890437 -207.360004 \n",
       "L 109.94577 -205.36331 \n",
       "L 110.928576 -203.366615 \n",
       "L 111.821818 -201.369921 \n",
       "L 112.609769 -199.373227 \n",
       "L 113.278507 -197.376533 \n",
       "L 113.816358 -195.379839 \n",
       "L 114.214276 -193.383144 \n",
       "L 114.466146 -191.38645 \n",
       "L 114.568991 -189.389756 \n",
       "L 114.523084 -187.393062 \n",
       "L 114.331945 -185.396368 \n",
       "L 114.002236 -183.399673 \n",
       "L 113.543541 -181.402979 \n",
       "L 112.968056 -179.406285 \n",
       "L 112.290181 -177.409591 \n",
       "L 111.526044 -175.412896 \n",
       "L 110.692963 -173.416202 \n",
       "L 109.808879 -171.419508 \n",
       "L 108.891773 -169.422814 \n",
       "L 107.9591 -167.42612 \n",
       "L 107.027259 -165.429425 \n",
       "L 106.111123 -163.432731 \n",
       "L 105.223652 -161.436037 \n",
       "L 104.375603 -159.439343 \n",
       "L 103.575341 -157.442649 \n",
       "L 102.828778 -155.445954 \n",
       "L 102.139405 -153.44926 \n",
       "L 101.508446 -151.452566 \n",
       "L 100.935088 -149.455872 \n",
       "L 100.416801 -147.459177 \n",
       "L 99.949696 -145.462483 \n",
       "L 99.528923 -143.465789 \n",
       "L 99.149069 -141.469095 \n",
       "L 98.804539 -139.472401 \n",
       "L 98.489905 -137.475706 \n",
       "L 98.200189 -135.479012 \n",
       "L 97.931085 -133.482318 \n",
       "L 97.679109 -131.485624 \n",
       "L 97.441658 -129.488929 \n",
       "L 97.217009 -127.492235 \n",
       "L 97.004236 -125.495541 \n",
       "L 96.803082 -123.498847 \n",
       "L 96.613784 -121.502153 \n",
       "L 96.436869 -119.505458 \n",
       "L 96.272948 -117.508764 \n",
       "L 96.122519 -115.51207 \n",
       "L 95.985788 -113.515376 \n",
       "L 95.862534 -111.518682 \n",
       "L 95.752019 -109.521987 \n",
       "L 95.652945 -107.525293 \n",
       "L 95.563476 -105.528599 \n",
       "L 95.481299 -103.531905 \n",
       "L 95.403733 -101.53521 \n",
       "L 95.327876 -99.538516 \n",
       "L 95.250766 -97.541822 \n",
       "L 95.169559 -95.545128 \n",
       "L 95.081689 -93.548434 \n",
       "L 94.985025 -91.551739 \n",
       "L 94.877983 -89.555045 \n",
       "L 94.759616 -87.558351 \n",
       "L 94.629649 -85.561657 \n",
       "L 94.48848 -83.564963 \n",
       "L 94.337138 -81.568268 \n",
       "L 94.177199 -79.571574 \n",
       "L 94.010687 -77.57488 \n",
       "L 93.839939 -75.578186 \n",
       "L 93.667475 -73.581491 \n",
       "L 93.49586 -71.584797 \n",
       "L 93.327577 -69.588103 \n",
       "L 93.164917 -67.591409 \n",
       "L 93.00989 -65.594715 \n",
       "L 92.864157 -63.59802 \n",
       "L 92.728995 -61.601326 \n",
       "L 92.605285 -59.604632 \n",
       "L 92.493513 -57.607938 \n",
       "L 92.393805 -55.611244 \n",
       "L 92.305966 -53.614549 \n",
       "L 92.229531 -51.617855 \n",
       "z\n",
       "\" id=\"m1adc0606b3\" style=\"stroke:#5c5c5c;stroke-width:1.5;\"/>\n",
       "    </defs>\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#cb6d67;stroke:#5c5c5c;stroke-width:1.5;\" x=\"0\" xlink:href=\"#m1adc0606b3\" y=\"272.374219\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PolyCollection_2\">\n",
       "    <defs>\n",
       "     <path d=\"M 176.161041 -104.561543 \n",
       "L 174.989897 -104.561543 \n",
       "L 174.853208 -105.869556 \n",
       "L 174.693935 -107.177569 \n",
       "L 174.510699 -108.485582 \n",
       "L 174.302579 -109.793595 \n",
       "L 174.069222 -111.101609 \n",
       "L 173.810925 -112.409622 \n",
       "L 173.528704 -113.717635 \n",
       "L 173.224317 -115.025648 \n",
       "L 172.90025 -116.333661 \n",
       "L 172.559657 -117.641674 \n",
       "L 172.206249 -118.949687 \n",
       "L 171.844145 -120.2577 \n",
       "L 171.477678 -121.565713 \n",
       "L 171.11118 -122.873727 \n",
       "L 170.748748 -124.18174 \n",
       "L 170.39401 -125.489753 \n",
       "L 170.049906 -126.797766 \n",
       "L 169.718499 -128.105779 \n",
       "L 169.400818 -129.413792 \n",
       "L 169.096752 -130.721805 \n",
       "L 168.805003 -132.029818 \n",
       "L 168.523076 -133.337832 \n",
       "L 168.247333 -134.645845 \n",
       "L 167.973091 -135.953858 \n",
       "L 167.694749 -137.261871 \n",
       "L 167.405959 -138.569884 \n",
       "L 167.099812 -139.877897 \n",
       "L 166.769047 -141.18591 \n",
       "L 166.406264 -142.493923 \n",
       "L 166.004151 -143.801937 \n",
       "L 165.555698 -145.10995 \n",
       "L 165.05442 -146.417963 \n",
       "L 164.494563 -147.725976 \n",
       "L 163.871292 -149.033989 \n",
       "L 163.180871 -150.342002 \n",
       "L 162.42081 -151.650015 \n",
       "L 161.589991 -152.958028 \n",
       "L 160.688775 -154.266042 \n",
       "L 159.719075 -155.574055 \n",
       "L 158.684422 -156.882068 \n",
       "L 157.590008 -158.190081 \n",
       "L 156.442732 -159.498094 \n",
       "L 155.251231 -160.806107 \n",
       "L 154.025917 -162.11412 \n",
       "L 152.779001 -163.422133 \n",
       "L 151.524498 -164.730146 \n",
       "L 150.278194 -166.03816 \n",
       "L 149.057562 -167.346173 \n",
       "L 147.881585 -168.654186 \n",
       "L 146.770477 -169.962199 \n",
       "L 145.745289 -171.270212 \n",
       "L 144.827365 -172.578225 \n",
       "L 144.037693 -173.886238 \n",
       "L 143.39613 -175.194251 \n",
       "L 142.920571 -176.502265 \n",
       "L 142.626085 -177.810278 \n",
       "L 142.524102 -179.118291 \n",
       "L 142.621696 -180.426304 \n",
       "L 142.921039 -181.734317 \n",
       "L 143.419077 -183.04233 \n",
       "L 144.107471 -184.350343 \n",
       "L 144.972814 -185.658356 \n",
       "L 145.99713 -186.96637 \n",
       "L 147.158627 -188.274383 \n",
       "L 148.43265 -189.582396 \n",
       "L 149.792778 -190.890409 \n",
       "L 151.211982 -192.198422 \n",
       "L 152.663774 -193.506435 \n",
       "L 154.123259 -194.814448 \n",
       "L 155.568039 -196.122461 \n",
       "L 156.978905 -197.430475 \n",
       "L 158.340298 -198.738488 \n",
       "L 159.640512 -200.046501 \n",
       "L 160.871665 -201.354514 \n",
       "L 162.029454 -202.662527 \n",
       "L 163.112724 -203.97054 \n",
       "L 164.122927 -205.278553 \n",
       "L 165.063495 -206.586566 \n",
       "L 165.939193 -207.89458 \n",
       "L 166.755507 -209.202593 \n",
       "L 167.51809 -210.510606 \n",
       "L 168.232309 -211.818619 \n",
       "L 168.902908 -213.126632 \n",
       "L 169.53379 -214.434645 \n",
       "L 170.127919 -215.742658 \n",
       "L 170.687329 -217.050671 \n",
       "L 171.213214 -218.358684 \n",
       "L 171.70609 -219.666698 \n",
       "L 172.165986 -220.974711 \n",
       "L 172.592655 -222.282724 \n",
       "L 172.98578 -223.590737 \n",
       "L 173.345151 -224.89875 \n",
       "L 173.670806 -226.206763 \n",
       "L 173.963136 -227.514776 \n",
       "L 174.22294 -228.822789 \n",
       "L 174.451433 -230.130803 \n",
       "L 174.650225 -231.438816 \n",
       "L 174.821266 -232.746829 \n",
       "L 174.966773 -234.054842 \n",
       "L 176.184164 -234.054842 \n",
       "L 176.184164 -234.054842 \n",
       "L 176.329671 -232.746829 \n",
       "L 176.500712 -231.438816 \n",
       "L 176.699504 -230.130803 \n",
       "L 176.927997 -228.822789 \n",
       "L 177.187801 -227.514776 \n",
       "L 177.480132 -226.206763 \n",
       "L 177.805787 -224.89875 \n",
       "L 178.165157 -223.590737 \n",
       "L 178.558282 -222.282724 \n",
       "L 178.984951 -220.974711 \n",
       "L 179.444847 -219.666698 \n",
       "L 179.937723 -218.358684 \n",
       "L 180.463609 -217.050671 \n",
       "L 181.023019 -215.742658 \n",
       "L 181.617148 -214.434645 \n",
       "L 182.24803 -213.126632 \n",
       "L 182.918629 -211.818619 \n",
       "L 183.632848 -210.510606 \n",
       "L 184.39543 -209.202593 \n",
       "L 185.211744 -207.89458 \n",
       "L 186.087443 -206.586566 \n",
       "L 187.02801 -205.278553 \n",
       "L 188.038214 -203.97054 \n",
       "L 189.121484 -202.662527 \n",
       "L 190.279272 -201.354514 \n",
       "L 191.510426 -200.046501 \n",
       "L 192.81064 -198.738488 \n",
       "L 194.172032 -197.430475 \n",
       "L 195.582899 -196.122461 \n",
       "L 197.027679 -194.814448 \n",
       "L 198.487164 -193.506435 \n",
       "L 199.938956 -192.198422 \n",
       "L 201.35816 -190.890409 \n",
       "L 202.718288 -189.582396 \n",
       "L 203.992311 -188.274383 \n",
       "L 205.153808 -186.96637 \n",
       "L 206.178124 -185.658356 \n",
       "L 207.043466 -184.350343 \n",
       "L 207.73186 -183.04233 \n",
       "L 208.229898 -181.734317 \n",
       "L 208.529241 -180.426304 \n",
       "L 208.626835 -179.118291 \n",
       "L 208.524852 -177.810278 \n",
       "L 208.230367 -176.502265 \n",
       "L 207.754807 -175.194251 \n",
       "L 207.113245 -173.886238 \n",
       "L 206.323572 -172.578225 \n",
       "L 205.405649 -171.270212 \n",
       "L 204.38046 -169.962199 \n",
       "L 203.269353 -168.654186 \n",
       "L 202.093375 -167.346173 \n",
       "L 200.872743 -166.03816 \n",
       "L 199.62644 -164.730146 \n",
       "L 198.371936 -163.422133 \n",
       "L 197.12502 -162.11412 \n",
       "L 195.899706 -160.806107 \n",
       "L 194.708205 -159.498094 \n",
       "L 193.560929 -158.190081 \n",
       "L 192.466516 -156.882068 \n",
       "L 191.431862 -155.574055 \n",
       "L 190.462162 -154.266042 \n",
       "L 189.560946 -152.958028 \n",
       "L 188.730128 -151.650015 \n",
       "L 187.970066 -150.342002 \n",
       "L 187.279645 -149.033989 \n",
       "L 186.656375 -147.725976 \n",
       "L 186.096517 -146.417963 \n",
       "L 185.59524 -145.10995 \n",
       "L 185.146787 -143.801937 \n",
       "L 184.744673 -142.493923 \n",
       "L 184.381891 -141.18591 \n",
       "L 184.051126 -139.877897 \n",
       "L 183.744979 -138.569884 \n",
       "L 183.456188 -137.261871 \n",
       "L 183.177846 -135.953858 \n",
       "L 182.903604 -134.645845 \n",
       "L 182.627862 -133.337832 \n",
       "L 182.345935 -132.029818 \n",
       "L 182.054185 -130.721805 \n",
       "L 181.75012 -129.413792 \n",
       "L 181.432438 -128.105779 \n",
       "L 181.101031 -126.797766 \n",
       "L 180.756928 -125.489753 \n",
       "L 180.402189 -124.18174 \n",
       "L 180.039757 -122.873727 \n",
       "L 179.673259 -121.565713 \n",
       "L 179.306793 -120.2577 \n",
       "L 178.944689 -118.949687 \n",
       "L 178.591281 -117.641674 \n",
       "L 178.250687 -116.333661 \n",
       "L 177.92662 -115.025648 \n",
       "L 177.622233 -113.717635 \n",
       "L 177.340012 -112.409622 \n",
       "L 177.081715 -111.101609 \n",
       "L 176.848358 -109.793595 \n",
       "L 176.640239 -108.485582 \n",
       "L 176.457003 -107.177569 \n",
       "L 176.297729 -105.869556 \n",
       "L 176.161041 -104.561543 \n",
       "z\n",
       "\" id=\"m4096a40dfa\" style=\"stroke:#5c5c5c;stroke-width:1.5;\"/>\n",
       "    </defs>\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#93cb67;stroke:#5c5c5c;stroke-width:1.5;\" x=\"0\" xlink:href=\"#m4096a40dfa\" y=\"272.374219\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PolyCollection_3\">\n",
       "    <defs>\n",
       "     <path d=\"M 260.196183 -132.644335 \n",
       "L 258.354754 -132.644335 \n",
       "L 258.157003 -133.522139 \n",
       "L 257.926381 -134.399943 \n",
       "L 257.659591 -135.277747 \n",
       "L 257.353436 -136.15555 \n",
       "L 257.004913 -137.033354 \n",
       "L 256.611317 -137.911158 \n",
       "L 256.170337 -138.788962 \n",
       "L 255.680159 -139.666766 \n",
       "L 255.139559 -140.544569 \n",
       "L 254.547986 -141.422373 \n",
       "L 253.90563 -142.300177 \n",
       "L 253.213463 -143.177981 \n",
       "L 252.473265 -144.055785 \n",
       "L 251.687619 -144.933588 \n",
       "L 250.859875 -145.811392 \n",
       "L 249.994085 -146.689196 \n",
       "L 249.094915 -147.567 \n",
       "L 248.16753 -148.444804 \n",
       "L 247.217454 -149.322607 \n",
       "L 246.250427 -150.200411 \n",
       "L 245.272243 -151.078215 \n",
       "L 244.288604 -151.956019 \n",
       "L 243.304976 -152.833822 \n",
       "L 242.326464 -153.711626 \n",
       "L 241.357725 -154.58943 \n",
       "L 240.402903 -155.467234 \n",
       "L 239.465609 -156.345038 \n",
       "L 238.548938 -157.222841 \n",
       "L 237.655533 -158.100645 \n",
       "L 236.787666 -158.978449 \n",
       "L 235.947367 -159.856253 \n",
       "L 235.136553 -160.734057 \n",
       "L 234.357171 -161.61186 \n",
       "L 233.611327 -162.489664 \n",
       "L 232.901393 -163.367468 \n",
       "L 232.230077 -164.245272 \n",
       "L 231.600442 -165.123076 \n",
       "L 231.015872 -166.000879 \n",
       "L 230.479973 -166.878683 \n",
       "L 229.996416 -167.756487 \n",
       "L 229.56872 -168.634291 \n",
       "L 229.200002 -169.512095 \n",
       "L 228.892688 -170.389898 \n",
       "L 228.648219 -171.267702 \n",
       "L 228.46678 -172.145506 \n",
       "L 228.347058 -173.02331 \n",
       "L 228.286067 -173.901113 \n",
       "L 228.27906 -174.778917 \n",
       "L 228.319533 -175.656721 \n",
       "L 228.399354 -176.534525 \n",
       "L 228.508996 -177.412329 \n",
       "L 228.637892 -178.290132 \n",
       "L 228.774884 -179.167936 \n",
       "L 228.908761 -180.04574 \n",
       "L 229.028846 -180.923544 \n",
       "L 229.125609 -181.801348 \n",
       "L 229.191268 -182.679151 \n",
       "L 229.220337 -183.556955 \n",
       "L 229.210091 -184.434759 \n",
       "L 229.160907 -185.312563 \n",
       "L 229.076464 -186.190367 \n",
       "L 228.963772 -187.06817 \n",
       "L 228.833027 -187.945974 \n",
       "L 228.697292 -188.823778 \n",
       "L 228.57201 -189.701582 \n",
       "L 228.474375 -190.579385 \n",
       "L 228.422595 -191.457189 \n",
       "L 228.435071 -192.334993 \n",
       "L 228.529555 -193.212797 \n",
       "L 228.722317 -194.090601 \n",
       "L 229.027368 -194.968404 \n",
       "L 229.455786 -195.846208 \n",
       "L 230.015184 -196.724012 \n",
       "L 230.709326 -197.601816 \n",
       "L 231.537939 -198.47962 \n",
       "L 232.496701 -199.357423 \n",
       "L 233.577418 -200.235227 \n",
       "L 234.768365 -201.113031 \n",
       "L 236.054777 -201.990835 \n",
       "L 237.419447 -202.868639 \n",
       "L 238.843413 -203.746442 \n",
       "L 240.306677 -204.624246 \n",
       "L 241.788932 -205.50205 \n",
       "L 243.270256 -206.379854 \n",
       "L 244.731741 -207.257658 \n",
       "L 246.156037 -208.135461 \n",
       "L 247.527788 -209.013265 \n",
       "L 248.833947 -209.891069 \n",
       "L 250.063977 -210.768873 \n",
       "L 251.209932 -211.646676 \n",
       "L 252.266423 -212.52448 \n",
       "L 253.230504 -213.402284 \n",
       "L 254.101465 -214.280088 \n",
       "L 254.88058 -215.157892 \n",
       "L 255.570808 -216.035695 \n",
       "L 256.176473 -216.913499 \n",
       "L 256.70295 -217.791303 \n",
       "L 257.156352 -218.669107 \n",
       "L 257.543242 -219.546911 \n",
       "L 261.007695 -219.546911 \n",
       "L 261.007695 -219.546911 \n",
       "L 261.394585 -218.669107 \n",
       "L 261.847987 -217.791303 \n",
       "L 262.374464 -216.913499 \n",
       "L 262.98013 -216.035695 \n",
       "L 263.670357 -215.157892 \n",
       "L 264.449472 -214.280088 \n",
       "L 265.320434 -213.402284 \n",
       "L 266.284514 -212.52448 \n",
       "L 267.341006 -211.646676 \n",
       "L 268.48696 -210.768873 \n",
       "L 269.716991 -209.891069 \n",
       "L 271.02315 -209.013265 \n",
       "L 272.3949 -208.135461 \n",
       "L 273.819196 -207.257658 \n",
       "L 275.280681 -206.379854 \n",
       "L 276.762005 -205.50205 \n",
       "L 278.24426 -204.624246 \n",
       "L 279.707524 -203.746442 \n",
       "L 281.131491 -202.868639 \n",
       "L 282.496161 -201.990835 \n",
       "L 283.782572 -201.113031 \n",
       "L 284.973519 -200.235227 \n",
       "L 286.054236 -199.357423 \n",
       "L 287.012999 -198.47962 \n",
       "L 287.841612 -197.601816 \n",
       "L 288.535754 -196.724012 \n",
       "L 289.095151 -195.846208 \n",
       "L 289.52357 -194.968404 \n",
       "L 289.82862 -194.090601 \n",
       "L 290.021382 -193.212797 \n",
       "L 290.115867 -192.334993 \n",
       "L 290.128343 -191.457189 \n",
       "L 290.076562 -190.579385 \n",
       "L 289.978928 -189.701582 \n",
       "L 289.853645 -188.823778 \n",
       "L 289.71791 -187.945974 \n",
       "L 289.587166 -187.06817 \n",
       "L 289.474474 -186.190367 \n",
       "L 289.39003 -185.312563 \n",
       "L 289.340847 -184.434759 \n",
       "L 289.3306 -183.556955 \n",
       "L 289.35967 -182.679151 \n",
       "L 289.425329 -181.801348 \n",
       "L 289.522092 -180.923544 \n",
       "L 289.642177 -180.04574 \n",
       "L 289.776054 -179.167936 \n",
       "L 289.913046 -178.290132 \n",
       "L 290.041942 -177.412329 \n",
       "L 290.151584 -176.534525 \n",
       "L 290.231405 -175.656721 \n",
       "L 290.271878 -174.778917 \n",
       "L 290.26487 -173.901113 \n",
       "L 290.203879 -173.02331 \n",
       "L 290.084157 -172.145506 \n",
       "L 289.902719 -171.267702 \n",
       "L 289.65825 -170.389898 \n",
       "L 289.350935 -169.512095 \n",
       "L 288.982217 -168.634291 \n",
       "L 288.554522 -167.756487 \n",
       "L 288.070964 -166.878683 \n",
       "L 287.535065 -166.000879 \n",
       "L 286.950496 -165.123076 \n",
       "L 286.320861 -164.245272 \n",
       "L 285.649544 -163.367468 \n",
       "L 284.939611 -162.489664 \n",
       "L 284.193767 -161.61186 \n",
       "L 283.414384 -160.734057 \n",
       "L 282.603571 -159.856253 \n",
       "L 281.763271 -158.978449 \n",
       "L 280.895405 -158.100645 \n",
       "L 280.001999 -157.222841 \n",
       "L 279.085329 -156.345038 \n",
       "L 278.148034 -155.467234 \n",
       "L 277.193212 -154.58943 \n",
       "L 276.224473 -153.711626 \n",
       "L 275.245962 -152.833822 \n",
       "L 274.262333 -151.956019 \n",
       "L 273.278695 -151.078215 \n",
       "L 272.300511 -150.200411 \n",
       "L 271.333483 -149.322607 \n",
       "L 270.383408 -148.444804 \n",
       "L 269.456022 -147.567 \n",
       "L 268.556853 -146.689196 \n",
       "L 267.691063 -145.811392 \n",
       "L 266.863318 -144.933588 \n",
       "L 266.077672 -144.055785 \n",
       "L 265.337475 -143.177981 \n",
       "L 264.645308 -142.300177 \n",
       "L 264.002951 -141.422373 \n",
       "L 263.411379 -140.544569 \n",
       "L 262.870779 -139.666766 \n",
       "L 262.380601 -138.788962 \n",
       "L 261.93962 -137.911158 \n",
       "L 261.546024 -137.033354 \n",
       "L 261.197502 -136.15555 \n",
       "L 260.891346 -135.277747 \n",
       "L 260.624556 -134.399943 \n",
       "L 260.393934 -133.522139 \n",
       "L 260.196183 -132.644335 \n",
       "z\n",
       "\" id=\"me9b5672f6f\" style=\"stroke:#5c5c5c;stroke-width:1.5;\"/>\n",
       "    </defs>\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#67c5cb;stroke:#5c5c5c;stroke-width:1.5;\" x=\"0\" xlink:href=\"#me9b5672f6f\" y=\"272.374219\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PolyCollection_4\">\n",
       "    <defs>\n",
       "     <path d=\"M 343.652813 -123.059086 \n",
       "L 342.298124 -123.059086 \n",
       "L 342.141104 -124.176238 \n",
       "L 341.957945 -125.29339 \n",
       "L 341.746757 -126.410542 \n",
       "L 341.506009 -127.527693 \n",
       "L 341.234585 -128.644845 \n",
       "L 340.931829 -129.761997 \n",
       "L 340.597541 -130.879149 \n",
       "L 340.231931 -131.9963 \n",
       "L 339.835527 -133.113452 \n",
       "L 339.409027 -134.230604 \n",
       "L 338.953117 -135.347756 \n",
       "L 338.468257 -136.464908 \n",
       "L 337.954451 -137.582059 \n",
       "L 337.411036 -138.699211 \n",
       "L 336.836502 -139.816363 \n",
       "L 336.228382 -140.933515 \n",
       "L 335.583222 -142.050667 \n",
       "L 334.896667 -143.167818 \n",
       "L 334.163663 -144.28497 \n",
       "L 333.378779 -145.402122 \n",
       "L 332.536635 -146.519274 \n",
       "L 331.63242 -147.636426 \n",
       "L 330.662453 -148.753577 \n",
       "L 329.624751 -149.870729 \n",
       "L 328.519555 -150.987881 \n",
       "L 327.349753 -152.105033 \n",
       "L 326.121168 -153.222184 \n",
       "L 324.842662 -154.339336 \n",
       "L 323.526039 -155.456488 \n",
       "L 322.185741 -156.57364 \n",
       "L 320.838342 -157.690792 \n",
       "L 319.501881 -158.807943 \n",
       "L 318.195076 -159.925095 \n",
       "L 316.936474 -161.042247 \n",
       "L 315.743612 -162.159399 \n",
       "L 314.632242 -163.276551 \n",
       "L 313.615691 -164.393702 \n",
       "L 312.704402 -165.510854 \n",
       "L 311.905684 -166.628006 \n",
       "L 311.223675 -167.745158 \n",
       "L 310.659537 -168.86231 \n",
       "L 310.211818 -169.979461 \n",
       "L 309.876967 -171.096613 \n",
       "L 309.649941 -172.213765 \n",
       "L 309.524831 -173.330917 \n",
       "L 309.495469 -174.448069 \n",
       "L 309.555949 -175.56522 \n",
       "L 309.701035 -176.682372 \n",
       "L 309.92641 -177.799524 \n",
       "L 310.228786 -178.916676 \n",
       "L 310.605846 -180.033827 \n",
       "L 311.056069 -181.150979 \n",
       "L 311.578443 -182.268131 \n",
       "L 312.172118 -183.385283 \n",
       "L 312.836035 -184.502435 \n",
       "L 313.568562 -185.619586 \n",
       "L 314.367175 -186.736738 \n",
       "L 315.228217 -187.85389 \n",
       "L 316.146745 -188.971042 \n",
       "L 317.116469 -190.088194 \n",
       "L 318.129812 -191.205345 \n",
       "L 319.178045 -192.322497 \n",
       "L 320.251529 -193.439649 \n",
       "L 321.340013 -194.556801 \n",
       "L 322.432983 -195.673953 \n",
       "L 323.520049 -196.791104 \n",
       "L 324.591326 -197.908256 \n",
       "L 325.637803 -199.025408 \n",
       "L 326.651671 -200.14256 \n",
       "L 327.626588 -201.259711 \n",
       "L 328.557869 -202.376863 \n",
       "L 329.442586 -203.494015 \n",
       "L 330.279565 -204.611167 \n",
       "L 331.069295 -205.728319 \n",
       "L 331.813734 -206.84547 \n",
       "L 332.516049 -207.962622 \n",
       "L 333.180281 -209.079774 \n",
       "L 333.810992 -210.196926 \n",
       "L 334.412886 -211.314078 \n",
       "L 334.99046 -212.431229 \n",
       "L 335.547689 -213.548381 \n",
       "L 336.087784 -214.665533 \n",
       "L 336.61302 -215.782685 \n",
       "L 337.124653 -216.899837 \n",
       "L 337.622932 -218.016988 \n",
       "L 338.107175 -219.13414 \n",
       "L 338.575927 -220.251292 \n",
       "L 339.027159 -221.368444 \n",
       "L 339.458492 -222.485596 \n",
       "L 339.867438 -223.602747 \n",
       "L 340.251617 -224.719899 \n",
       "L 340.608954 -225.837051 \n",
       "L 340.937833 -226.954203 \n",
       "L 341.2372 -228.071354 \n",
       "L 341.506618 -229.188506 \n",
       "L 341.746277 -230.305658 \n",
       "L 341.956956 -231.42281 \n",
       "L 342.139959 -232.539962 \n",
       "L 342.297017 -233.657113 \n",
       "L 343.653921 -233.657113 \n",
       "L 343.653921 -233.657113 \n",
       "L 343.810979 -232.539962 \n",
       "L 343.993981 -231.42281 \n",
       "L 344.204661 -230.305658 \n",
       "L 344.44432 -229.188506 \n",
       "L 344.713738 -228.071354 \n",
       "L 345.013104 -226.954203 \n",
       "L 345.341983 -225.837051 \n",
       "L 345.699321 -224.719899 \n",
       "L 346.0835 -223.602747 \n",
       "L 346.492445 -222.485596 \n",
       "L 346.923779 -221.368444 \n",
       "L 347.37501 -220.251292 \n",
       "L 347.843763 -219.13414 \n",
       "L 348.328006 -218.016988 \n",
       "L 348.826284 -216.899837 \n",
       "L 349.337918 -215.782685 \n",
       "L 349.863153 -214.665533 \n",
       "L 350.403248 -213.548381 \n",
       "L 350.960478 -212.431229 \n",
       "L 351.538051 -211.314078 \n",
       "L 352.139946 -210.196926 \n",
       "L 352.770656 -209.079774 \n",
       "L 353.434889 -207.962622 \n",
       "L 354.137203 -206.84547 \n",
       "L 354.881643 -205.728319 \n",
       "L 355.671372 -204.611167 \n",
       "L 356.508352 -203.494015 \n",
       "L 357.393068 -202.376863 \n",
       "L 358.32435 -201.259711 \n",
       "L 359.299267 -200.14256 \n",
       "L 360.313135 -199.025408 \n",
       "L 361.359612 -197.908256 \n",
       "L 362.430889 -196.791104 \n",
       "L 363.517955 -195.673953 \n",
       "L 364.610925 -194.556801 \n",
       "L 365.699408 -193.439649 \n",
       "L 366.772892 -192.322497 \n",
       "L 367.821126 -191.205345 \n",
       "L 368.834468 -190.088194 \n",
       "L 369.804193 -188.971042 \n",
       "L 370.72272 -187.85389 \n",
       "L 371.583763 -186.736738 \n",
       "L 372.382376 -185.619586 \n",
       "L 373.114902 -184.502435 \n",
       "L 373.77882 -183.385283 \n",
       "L 374.372495 -182.268131 \n",
       "L 374.894868 -181.150979 \n",
       "L 375.345091 -180.033827 \n",
       "L 375.722152 -178.916676 \n",
       "L 376.024527 -177.799524 \n",
       "L 376.249903 -176.682372 \n",
       "L 376.394988 -175.56522 \n",
       "L 376.455469 -174.448069 \n",
       "L 376.426106 -173.330917 \n",
       "L 376.300996 -172.213765 \n",
       "L 376.07397 -171.096613 \n",
       "L 375.73912 -169.979461 \n",
       "L 375.2914 -168.86231 \n",
       "L 374.727262 -167.745158 \n",
       "L 374.045254 -166.628006 \n",
       "L 373.246535 -165.510854 \n",
       "L 372.335247 -164.393702 \n",
       "L 371.318696 -163.276551 \n",
       "L 370.207325 -162.159399 \n",
       "L 369.014463 -161.042247 \n",
       "L 367.755862 -159.925095 \n",
       "L 366.449057 -158.807943 \n",
       "L 365.112596 -157.690792 \n",
       "L 363.765197 -156.57364 \n",
       "L 362.424898 -155.456488 \n",
       "L 361.108276 -154.339336 \n",
       "L 359.82977 -153.222184 \n",
       "L 358.601185 -152.105033 \n",
       "L 357.431383 -150.987881 \n",
       "L 356.326186 -149.870729 \n",
       "L 355.288485 -148.753577 \n",
       "L 354.318517 -147.636426 \n",
       "L 353.414303 -146.519274 \n",
       "L 352.572159 -145.402122 \n",
       "L 351.787275 -144.28497 \n",
       "L 351.054271 -143.167818 \n",
       "L 350.367716 -142.050667 \n",
       "L 349.722555 -140.933515 \n",
       "L 349.114435 -139.816363 \n",
       "L 348.539902 -138.699211 \n",
       "L 347.996487 -137.582059 \n",
       "L 347.482681 -136.464908 \n",
       "L 346.99782 -135.347756 \n",
       "L 346.541911 -134.230604 \n",
       "L 346.11541 -133.113452 \n",
       "L 345.719006 -131.9963 \n",
       "L 345.353397 -130.879149 \n",
       "L 345.019109 -129.761997 \n",
       "L 344.716353 -128.644845 \n",
       "L 344.444929 -127.527693 \n",
       "L 344.20418 -126.410542 \n",
       "L 343.992993 -125.29339 \n",
       "L 343.809833 -124.176238 \n",
       "L 343.652813 -123.059086 \n",
       "z\n",
       "\" id=\"m12ca7d8121\" style=\"stroke:#5c5c5c;stroke-width:1.5;\"/>\n",
       "    </defs>\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#9f67cb;stroke:#5c5c5c;stroke-width:1.5;\" x=\"0\" xlink:href=\"#m12ca7d8121\" y=\"272.374219\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"line2d_1\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 91.875469 126.444954 \n",
       "L 91.875469 63.095602 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:1.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_2\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 91.875469 99.295232 \n",
       "L 91.875469 76.670463 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:4.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_3\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 175.575469 126.444954 \n",
       "L 175.575469 63.095602 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:1.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_4\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 175.575469 108.345139 \n",
       "L 175.575469 88.737006 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:4.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_5\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 259.275469 120.411682 \n",
       "L 259.275469 72.14551 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:1.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_6\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 259.275469 102.311867 \n",
       "L 259.275469 76.670463 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:4.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_7\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 342.975469 127.953272 \n",
       "L 342.975469 60.078966 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:1.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"line2d_8\">\n",
       "    <path clip-path=\"url(#p2fb6f5326b)\" d=\"M 342.975469 106.836821 \n",
       "L 342.975469 87.228688 \n",
       "\" style=\"fill:none;stroke:#5c5c5c;stroke-linecap:round;stroke-width:4.5;\"/>\n",
       "   </g>\n",
       "   <g id=\"patch_3\">\n",
       "    <path d=\"M 50.025469 230.64 \n",
       "L 50.025469 13.2 \n",
       "\" style=\"fill:none;stroke:#262626;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.25;\"/>\n",
       "   </g>\n",
       "   <g id=\"patch_4\">\n",
       "    <path d=\"M 384.825469 230.64 \n",
       "L 384.825469 13.2 \n",
       "\" style=\"fill:none;stroke:#262626;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.25;\"/>\n",
       "   </g>\n",
       "   <g id=\"patch_5\">\n",
       "    <path d=\"M 50.025469 230.64 \n",
       "L 384.825469 230.64 \n",
       "\" style=\"fill:none;stroke:#262626;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.25;\"/>\n",
       "   </g>\n",
       "   <g id=\"patch_6\">\n",
       "    <path d=\"M 50.025469 13.2 \n",
       "L 384.825469 13.2 \n",
       "\" style=\"fill:none;stroke:#262626;stroke-linecap:square;stroke-linejoin:miter;stroke-width:1.25;\"/>\n",
       "   </g>\n",
       "   <g id=\"PathCollection_1\">\n",
       "    <defs>\n",
       "     <path d=\"M 0 1.5 \n",
       "C 0.397805 1.5 0.77937 1.341951 1.06066 1.06066 \n",
       "C 1.341951 0.77937 1.5 0.397805 1.5 0 \n",
       "C 1.5 -0.397805 1.341951 -0.77937 1.06066 -1.06066 \n",
       "C 0.77937 -1.341951 0.397805 -1.5 0 -1.5 \n",
       "C -0.397805 -1.5 -0.77937 -1.341951 -1.06066 -1.06066 \n",
       "C -1.341951 -0.77937 -1.5 -0.397805 -1.5 0 \n",
       "C -1.5 0.397805 -1.341951 0.77937 -1.06066 1.06066 \n",
       "C -0.77937 1.341951 -0.397805 1.5 0 1.5 \n",
       "z\n",
       "\" id=\"mbae61726c7\" style=\"stroke:#5c5c5c;\"/>\n",
       "    </defs>\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#ffffff;stroke:#5c5c5c;\" x=\"91.875469\" xlink:href=\"#mbae61726c7\" y=\"93.26196\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PathCollection_2\">\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#ffffff;stroke:#5c5c5c;\" x=\"175.575469\" xlink:href=\"#mbae61726c7\" y=\"93.26196\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PathCollection_3\">\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#ffffff;stroke:#5c5c5c;\" x=\"259.275469\" xlink:href=\"#mbae61726c7\" y=\"96.278596\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "   <g id=\"PathCollection_4\">\n",
       "    <g clip-path=\"url(#p2fb6f5326b)\">\n",
       "     <use style=\"fill:#ffffff;stroke:#5c5c5c;\" x=\"342.975469\" xlink:href=\"#mbae61726c7\" y=\"93.26196\"/>\n",
       "    </g>\n",
       "   </g>\n",
       "  </g>\n",
       " </g>\n",
       " <defs>\n",
       "  <clipPath id=\"p2fb6f5326b\">\n",
       "   <rect height=\"217.44\" width=\"334.8\" x=\"50.025469\" y=\"13.2\"/>\n",
       "  </clipPath>\n",
       " </defs>\n",
       "</svg>\n"
      ],
      "text/plain": [
       "<Figure size 432x288 with 1 Axes>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "ax = sns.violinplot(x= 'class', y = 'score',data = dfdata,\n",
    "            palette = 'hls', # 设置调色板\n",
    "            inner = 'box',   # 设置内部显示类型 → “box”, “quartile”, “point”, “stick”, None\n",
    "           )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**5，词云图示范**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "词云图适合表现不同关键词的出现频率或重要性程度。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min', 'wordcloud': '/nbextensions/echarts/echarts-wordcloud.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"13a91f17192b4373b88cfee41a4b2aeb\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts', 'wordcloud'], function(echarts) {\n",
       "        \n",
       "var myChart_13a91f17192b4373b88cfee41a4b2aeb = echarts.init(document.getElementById('13a91f17192b4373b88cfee41a4b2aeb'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_13a91f17192b4373b88cfee41a4b2aeb = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u6570\\u636e\\u7b97\\u6cd5\\u5e38\\u7528\\u5de5\\u5177\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 1942705,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"wordCloud\",\n",
       "            \"name\": \"utils\",\n",
       "            \"shape\": \"circle\",\n",
       "            \"rotationRange\": [\n",
       "                -90,\n",
       "                90\n",
       "            ],\n",
       "            \"rotationStep\": 45,\n",
       "            \"girdSize\": 20,\n",
       "            \"sizeRange\": [\n",
       "                10,\n",
       "                70\n",
       "            ],\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"python\",\n",
       "                    \"value\": 100,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(134,155,32)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"jupyter\",\n",
       "                    \"value\": 90,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(24,132,65)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"numpy\",\n",
       "                    \"value\": 65,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(17,121,21)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"pandas\",\n",
       "                    \"value\": 95,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(2,112,7)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"matplotlib\",\n",
       "                    \"value\": 50,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(63,47,96)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"sklearn\",\n",
       "                    \"value\": 60,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(0,7,137)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"xgboost\",\n",
       "                    \"value\": 70,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(132,26,97)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"lightGBM\",\n",
       "                    \"value\": 70,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(69,61,48)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"simpy\",\n",
       "                    \"value\": 20,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(40,27,9)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"keras\",\n",
       "                    \"value\": 70,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(125,52,21)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"tensorflow\",\n",
       "                    \"value\": 80,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(12,9,26)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"hive\",\n",
       "                    \"value\": 80,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(54,112,105)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"hadoop\",\n",
       "                    \"value\": 60,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(87,30,65)\"\n",
       "                        }\n",
       "                    }\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"spark\",\n",
       "                    \"value\": 60,\n",
       "                    \"textStyle\": {\n",
       "                        \"normal\": {\n",
       "                            \"color\": \"rgb(3,91,121)\"\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_13a91f17192b4373b88cfee41a4b2aeb.setOption(option_13a91f17192b4373b88cfee41a4b2aeb);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.wordcloud.WordCloud at 0x1a2120b198>"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import WordCloud\n",
    "\n",
    "words = ['python','jupyter','numpy','pandas','matplotlib','sklearn',\n",
    "        'xgboost','lightGBM','simpy','keras','tensorflow',\n",
    "         'hive','hadoop','spark']\n",
    "counts = [100,90,65,95,50,60,70,70,20,70,80,80,60,60]\n",
    "\n",
    "cloud = WordCloud(title = '数据算法常用工具',width = 600,height = 420)\n",
    "cloud.add(name = 'utils',attr = words,value = counts,\n",
    "          shape = \"circle\",word_size_range = (10,70))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 二，图表配置"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "如果要对绘制的图表进行诸如图像尺寸，坐标轴刻度，线的颜色，以及网格线等各个细节方面的修改，我们则需要手动对图表进行配置，而不是依赖于默认配置。\n",
    "\n",
    "图表配置有3种主要方式：\n",
    "\n",
    "1，修改图表主题风格：利用configure或use_theme指定图表主题风格，对图表整体颜色风格产生影响。 \n",
    "\n",
    "2，初始化图表通用属性：创建图表时指定图表height,title等属性，对图像尺寸和标题等通用属性产生影响。\n",
    "\n",
    "3，配置特定元素属性：使用add给图表配置xyAxis,datazoom,lineStyle等特定元素属性。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**1，修改图表主题风格**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "可以使用use_theme修改单个图表主题，也可以用configure修改全局图表风格。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"0ae35496ba9e4830a18df690eaf2bad5\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_0ae35496ba9e4830a18df690eaf2bad5 = echarts.init(document.getElementById('0ae35496ba9e4830a18df690eaf2bad5'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_0ae35496ba9e4830a18df690eaf2bad5 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u9ed8\\u8ba4\\u4e3b\\u9898\\u6548\\u679c\",\n",
       "            \"subtext\": \"\\u8fd9\\u91cc\\u662f\\u526f\\u6807\\u9898\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 6721586,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"data\": [\n",
       "                14,\n",
       "                62,\n",
       "                28,\n",
       "                41,\n",
       "                94,\n",
       "                99\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 6721586\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"data\": [\n",
       "                44,\n",
       "                98,\n",
       "                14,\n",
       "                49,\n",
       "                91,\n",
       "                42\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 6721586\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6C\",\n",
       "            \"data\": [\n",
       "                59,\n",
       "                43,\n",
       "                27,\n",
       "                49,\n",
       "                20,\n",
       "                79\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 6721586\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6D\",\n",
       "            \"data\": [\n",
       "                43,\n",
       "                36,\n",
       "                31,\n",
       "                49,\n",
       "                20,\n",
       "                75\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 6721586\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\",\n",
       "                \"\\u5546\\u5bb6C\",\n",
       "                \"\\u5546\\u5bb6D\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_0ae35496ba9e4830a18df690eaf2bad5.setOption(option_0ae35496ba9e4830a18df690eaf2bad5);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.bar.Bar at 0x1a2120d470>"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 默认light主题效果\n",
    "import random\n",
    "from pyecharts import Bar\n",
    "\n",
    "X_AXIS = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "bar = Bar(\"light主题效果\", \"这里是副标题\")\n",
    "bar.add(\"商家A\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar.add(\"商家B\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar.add(\"商家C\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar.add(\"商家D\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"d94924cccb6649f3b12bff56cf77d56d\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_d94924cccb6649f3b12bff56cf77d56d = echarts.init(document.getElementById('d94924cccb6649f3b12bff56cf77d56d'), 'dark', {renderer: 'canvas'});\n",
       "\n",
       "var option_d94924cccb6649f3b12bff56cf77d56d = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"dark\\u4e3b\\u9898\\u5c55\\u793a\",\n",
       "            \"subtext\": \"\\u8fd9\\u91cc\\u662f\\u526f\\u6807\\u9898\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 2235047,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"data\": [\n",
       "                85,\n",
       "                26,\n",
       "                45,\n",
       "                38,\n",
       "                70,\n",
       "                59\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 2235047\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"data\": [\n",
       "                96,\n",
       "                60,\n",
       "                95,\n",
       "                77,\n",
       "                77,\n",
       "                98\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 2235047\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6C\",\n",
       "            \"data\": [\n",
       "                61,\n",
       "                73,\n",
       "                38,\n",
       "                35,\n",
       "                91,\n",
       "                65\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 2235047\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6D\",\n",
       "            \"data\": [\n",
       "                86,\n",
       "                59,\n",
       "                67,\n",
       "                13,\n",
       "                78,\n",
       "                61\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 2235047\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\",\n",
       "                \"\\u5546\\u5bb6C\",\n",
       "                \"\\u5546\\u5bb6D\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": []\n",
       "};\n",
       "myChart_d94924cccb6649f3b12bff56cf77d56d.setOption(option_d94924cccb6649f3b12bff56cf77d56d);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.bar.Bar at 0x1a2120dc50>"
      ]
     },
     "execution_count": 26,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 使用dark主题\n",
    "import random\n",
    "from pyecharts import Bar\n",
    "\n",
    "\n",
    "X_AXIS = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "bar = Bar(\"dark主题展示\", \"这里是副标题\")\n",
    "bar.use_theme(\"dark\")\n",
    "bar.add(\"商家A\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar.add(\"商家B\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar.add(\"商家C\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar.add(\"商家D\", X_AXIS, [random.randint(10, 100) for _ in range(6)])\n",
    "bar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "如果要设置某个主题风格应用到所有图表，可以在绘图开始前用configure进行设置。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {},
   "outputs": [],
   "source": [
    "from pyecharts import configure\n",
    "# 将这行代码置于首部\n",
    "configure(global_theme='light')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"59c04ebcadbb4c78a59da8c7a98eab23\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_59c04ebcadbb4c78a59da8c7a98eab23 = echarts.init(document.getElementById('59c04ebcadbb4c78a59da8c7a98eab23'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_59c04ebcadbb4c78a59da8c7a98eab23 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u9500\\u552e\\u989d\\u5360\\u6bd4\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 333257,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u886c\\u886b\",\n",
       "                    \"value\": 11\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                    \"value\": 12\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u96ea\\u7eba\\u886b\",\n",
       "                    \"value\": 13\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u88e4\\u5b50\",\n",
       "                    \"value\": 10\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                    \"value\": 10\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u889c\\u5b50\",\n",
       "                    \"value\": 10\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"0%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"50%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"outside\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 333257\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_59c04ebcadbb4c78a59da8c7a98eab23.setOption(option_59c04ebcadbb4c78a59da8c7a98eab23);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.pie.Pie at 0x1a21363780>"
      ]
     },
     "execution_count": 54,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Pie\n",
    "attr = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "value = [11, 12, 13, 10, 10, 10]\n",
    "pie = Pie(\"销售额占比\",width = 600,height = 420)\n",
    "pie.add(\"\", attr, value, is_label_show=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**2，初始化图表通用属性**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "图表通用属性指的是图表的title,subtitle,height,width,title_pos,title_color,title_text_size,background_color等属性，这些属性对所有类型的图表都适用。\n",
    "\n",
    "所有通用属性设置方式详细参见：https://github.com/lyhue1991/pyecharts/blob/master/docs/zh-cn/charts_configure.md"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 55,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"e379ca517c3e45fba75b167d8f2c75e0\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_e379ca517c3e45fba75b167d8f2c75e0 = echarts.init(document.getElementById('e379ca517c3e45fba75b167d8f2c75e0'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_e379ca517c3e45fba75b167d8f2c75e0 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u9500\\u552e\\u989d\\u5360\\u6bd4\",\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"bottom\",\n",
       "            \"textStyle\": {\n",
       "                \"color\": \"#0000ff\",\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 3111473,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u886c\\u886b\",\n",
       "                    \"value\": 11\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                    \"value\": 12\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u96ea\\u7eba\\u886b\",\n",
       "                    \"value\": 13\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u88e4\\u5b50\",\n",
       "                    \"value\": 10\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                    \"value\": 10\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u889c\\u5b50\",\n",
       "                    \"value\": 10\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"0%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"50%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"outside\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3111473\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"backgroundColor\": \"#aee\",\n",
       "    \"animation\": true,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_e379ca517c3e45fba75b167d8f2c75e0.setOption(option_e379ca517c3e45fba75b167d8f2c75e0);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.pie.Pie at 0x1a21399080>"
      ]
     },
     "execution_count": 55,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Pie\n",
    "attr = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "value = [11, 12, 13, 10, 10, 10]\n",
    "\n",
    "# 初始化图表通用属性\n",
    "pie = Pie(title = \"销售额占比\",\n",
    "          title_pos = 'center', # 标题居中\n",
    "          title_top = 'bottom', # 标题在底部\n",
    "          title_color = '#0000ff', # 标题颜色设置为蓝色，256位rgb格式\n",
    "          background_color = \"#aee\", # 设置背景颜色，16位rgb格式\n",
    "          width = 600,height = 420)\n",
    "\n",
    "pie.add(\"\", attr, value, is_label_show=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**3，配置特定元素属性**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "特定元素属性包括xyAxis,dataZoom,lineStyle,markLine-markPoint,visualMap等元素属性，这些元素只在某些种类的图表中适用。例如xyAxis只在Line、Bar、Scatter、EffectScatter、Kline这几类图表中适用。\n",
    "\n",
    "所有特定元素属性设置方式详细参见：https://github.com/lyhue1991/pyecharts/blob/master/docs/zh-cn/charts_configure.md"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 56,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"8d318da547254a5384a6879f201a8bae\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_8d318da547254a5384a6879f201a8bae = echarts.init(document.getElementById('8d318da547254a5384a6879f201a8bae'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_8d318da547254a5384a6879f201a8bae = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u6708\\u9500\\u552e\\u603b\\u989d\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 5965932,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    10\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    50\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 5965932\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    8\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    50\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    53\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    48\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    58\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 5965932\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"name\": \"\\u6708\\u4efd\",\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 40,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": true\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 30,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2018-01\",\n",
       "                \"2018-02\",\n",
       "                \"2018-03\",\n",
       "                \"2018-04\",\n",
       "                \"2018-05\",\n",
       "                \"2018-06\",\n",
       "                \"2018-07\",\n",
       "                \"2018-08\",\n",
       "                \"2018-09\",\n",
       "                \"2018-10\",\n",
       "                \"2018-11\",\n",
       "                \"2018-12\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"name\": \"\\u9500\\u552e\\u989d\",\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"min\": 0,\n",
       "            \"max\": 100,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_8d318da547254a5384a6879f201a8bae.setOption(option_8d318da547254a5384a6879f201a8bae);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.line.Line at 0x1a213a74e0>"
      ]
     },
     "execution_count": 56,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 设置xyAxis示范\n",
    "\n",
    "from  pyecharts import Line\n",
    "\n",
    "x = ['2018-{:0>2d}'.format(s) for s in range(1,13)]\n",
    "y1 = [5,10,26,30,35,30,20,26,40,46,40,50]\n",
    "y2 = [8,20,24,36,40,36,40,45,50,53,48,58]\n",
    "\n",
    "line = Line(title = \"月销售总额\",width = 600,height = 420)\n",
    "\n",
    "line.add(name = \"商家A\", x_axis = x, y_axis = y1)\n",
    "line.add(name = \"商家B\", x_axis = x, y_axis = y2,\n",
    "         #\n",
    "         #=====设置xyAxis=====\n",
    "         yaxis_min = 0,yaxis_max = 100,  # 设置y坐标轴刻度范围\n",
    "         xaxis_name = '月份', yaxis_name = '销售额', #x轴名称，y轴名称\n",
    "         xaxis_name_gap =  40, # x轴名称与轴距离\n",
    "         xaxis_rotate = 30,  # x轴刻度旋转角度\n",
    "         is_splitline_show = True, # 显示y轴网格线\n",
    "         is_xaxislabel_align = True # x轴刻度和标签是否对齐\n",
    "        )\n",
    "line"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 57,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"066aa4f30fd44c2d8c63f372809da9de\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_066aa4f30fd44c2d8c63f372809da9de = echarts.init(document.getElementById('066aa4f30fd44c2d8c63f372809da9de'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_066aa4f30fd44c2d8c63f372809da9de = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u6708\\u9500\\u552e\\u603b\\u989d\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 1852806,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    10\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    50\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1852806\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    8\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    50\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    53\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    48\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    58\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1852806\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": false,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2018-01\",\n",
       "                \"2018-02\",\n",
       "                \"2018-03\",\n",
       "                \"2018-04\",\n",
       "                \"2018-05\",\n",
       "                \"2018-06\",\n",
       "                \"2018-07\",\n",
       "                \"2018-08\",\n",
       "                \"2018-09\",\n",
       "                \"2018-10\",\n",
       "                \"2018-11\",\n",
       "                \"2018-12\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"start\": 50,\n",
       "            \"end\": 100,\n",
       "            \"orient\": \"horizontal\"\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"inside\",\n",
       "            \"start\": 50,\n",
       "            \"end\": 100,\n",
       "            \"orient\": \"horizontal\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_066aa4f30fd44c2d8c63f372809da9de.setOption(option_066aa4f30fd44c2d8c63f372809da9de);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.line.Line at 0x1a213a77b8>"
      ]
     },
     "execution_count": 57,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 设置dataZoom示范\n",
    "\n",
    "from  pyecharts import Line\n",
    "\n",
    "x = ['2018-{:0>2d}'.format(s) for s in range(1,13)]\n",
    "y1 = [5,10,26,30,35,30,20,26,40,46,40,50]\n",
    "y2 = [8,20,24,36,40,36,40,45,50,53,48,58]\n",
    "\n",
    "line = Line(title = \"月销售总额\",width = 600,height = 420)\n",
    "\n",
    "line.add(name = \"商家A\", x_axis = x, y_axis = y1)\n",
    "line.add(name = \"商家B\", x_axis = x, y_axis = y2,\n",
    "         #\n",
    "         #=====设置xyAxis=====\n",
    "         is_xaxis_boundarygap = False,  # x坐标刻度对准数据，而不是作为分类边界\n",
    "         #\n",
    "         #=====设置dataZoom=====\n",
    "         is_datazoom_show = True, #显示 dataZoom控制条\n",
    "         datazoom_type = 'both' # 可以是slider,inside或both\n",
    "         #\n",
    "         #\n",
    "        )\n",
    "line"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 58,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"5a04a2a2b5e34e93806cc53d61a8997c\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_5a04a2a2b5e34e93806cc53d61a8997c = echarts.init(document.getElementById('5a04a2a2b5e34e93806cc53d61a8997c'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_5a04a2a2b5e34e93806cc53d61a8997c = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u6708\\u9500\\u552e\\u603b\\u989d\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 8196816,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    10\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    50\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 2,\n",
       "                    \"opacity\": 0.5,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"red\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8196816\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    8\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    50\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    53\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    48\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    58\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 3,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"dashed\",\n",
       "                    \"color\": \"#11ffbb\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8196816\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": false,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2018-01\",\n",
       "                \"2018-02\",\n",
       "                \"2018-03\",\n",
       "                \"2018-04\",\n",
       "                \"2018-05\",\n",
       "                \"2018-06\",\n",
       "                \"2018-07\",\n",
       "                \"2018-08\",\n",
       "                \"2018-09\",\n",
       "                \"2018-10\",\n",
       "                \"2018-11\",\n",
       "                \"2018-12\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"start\": 50,\n",
       "            \"end\": 100,\n",
       "            \"orient\": \"horizontal\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_5a04a2a2b5e34e93806cc53d61a8997c.setOption(option_5a04a2a2b5e34e93806cc53d61a8997c);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.line.Line at 0x1a21363c88>"
      ]
     },
     "execution_count": 58,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 设置lineStyle示范\n",
    "\n",
    "from  pyecharts import Line\n",
    "\n",
    "x = ['2018-{:0>2d}'.format(s) for s in range(1,13)]\n",
    "y1 = [5,10,26,30,35,30,20,26,40,46,40,50]\n",
    "y2 = [8,20,24,36,40,36,40,45,50,53,48,58]\n",
    "\n",
    "line = Line(title = \"月销售总额\",width = 600,height = 420)\n",
    "\n",
    "line.add(name = \"商家A\", x_axis = x, y_axis = y1,\n",
    "         #\n",
    "         #=====设置lineStyle=====\n",
    "         line_width = 2,\n",
    "         line_opacity = 0.5, # 透明度\n",
    "         line_color = 'red'\n",
    "        )\n",
    "line.add(name = \"商家B\", x_axis = x, y_axis = y2,\n",
    "         #\n",
    "         #=====设置xyAxis=====\n",
    "         is_xaxis_boundarygap = False,  # x坐标刻度对准数据，而不是作为分类边界\n",
    "         #\n",
    "         #=====设置dataZoom=====\n",
    "         is_datazoom_show = True, #显示 dataZoom控制条\n",
    "         #\n",
    "         #=====设置lineStyle=====\n",
    "         line_width = 3,\n",
    "         line_color = '#11ffbb',\n",
    "         line_type = 'dashed', # 线型，可以是solid,dashed,或者dotted\n",
    "        )\n",
    "line"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 59,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"c0a035fb89354b45a12fec961bccd95c\" style=\"width:600px;height:420px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_c0a035fb89354b45a12fec961bccd95c = echarts.init(document.getElementById('c0a035fb89354b45a12fec961bccd95c'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_c0a035fb89354b45a12fec961bccd95c = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u6708\\u9500\\u552e\\u603b\\u989d\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 1798368,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    10\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    30\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    50\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 2,\n",
       "                    \"opacity\": 0.5,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"red\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"min\",\n",
       "                        \"name\": \"Minimum\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    {\n",
       "                        \"type\": \"max\",\n",
       "                        \"name\": \"Maximum\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"average\",\n",
       "                        \"name\": \"mean-Value\"\n",
       "                    }\n",
       "                ],\n",
       "                \"symbolSize\": 10\n",
       "            },\n",
       "            \"seriesId\": 1798368\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"2018-01\",\n",
       "                    8\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-02\",\n",
       "                    20\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-03\",\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-04\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-05\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-06\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-07\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-08\",\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-09\",\n",
       "                    50\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-10\",\n",
       "                    53\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-11\",\n",
       "                    48\n",
       "                ],\n",
       "                [\n",
       "                    \"2018-12\",\n",
       "                    58\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 3,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"dashed\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"coord\": [\n",
       "                            \"2018-09\",\n",
       "                            60\n",
       "                        ],\n",
       "                        \"value\": 60,\n",
       "                        \"name\": \"2018/09\\u9500\\u552e\\u76ee\\u6807\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    {\n",
       "                        \"coord\": [\n",
       "                            \"2018-11\",\n",
       "                            80\n",
       "                        ],\n",
       "                        \"value\": 80,\n",
       "                        \"name\": \"2018/10\\u9500\\u552e\\u76ee\\u6807\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1798368\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": false,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"2018-01\",\n",
       "                \"2018-02\",\n",
       "                \"2018-03\",\n",
       "                \"2018-04\",\n",
       "                \"2018-05\",\n",
       "                \"2018-06\",\n",
       "                \"2018-07\",\n",
       "                \"2018-08\",\n",
       "                \"2018-09\",\n",
       "                \"2018-10\",\n",
       "                \"2018-11\",\n",
       "                \"2018-12\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"min\": 0,\n",
       "            \"max\": 100,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"start\": 50,\n",
       "            \"end\": 100,\n",
       "            \"orient\": \"horizontal\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_c0a035fb89354b45a12fec961bccd95c.setOption(option_c0a035fb89354b45a12fec961bccd95c);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.line.Line at 0x1a213ef630>"
      ]
     },
     "execution_count": 59,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 设置markPoint和markLine示范\n",
    "\n",
    "from  pyecharts import Line\n",
    "\n",
    "x = ['2018-{:0>2d}'.format(s) for s in range(1,13)]\n",
    "y1 = [5,10,26,30,35,30,20,26,40,46,40,50]\n",
    "y2 = [8,20,24,36,40,36,40,45,50,53,48,58]\n",
    "\n",
    "line = Line(title = \"月销售总额\",width = 600,height = 420)\n",
    "\n",
    "line.add(name = \"商家A\", x_axis = x, y_axis = y1,\n",
    "         #\n",
    "         #=====设置lineStyle=====\n",
    "         line_width = 2,\n",
    "         line_opacity = 0.5, # 透明度\n",
    "         line_color = 'red',\n",
    "         #\n",
    "         #=====设置markPoint&markLine=====\n",
    "         mark_point = ['min','max'], #标记点\n",
    "         mark_line = ['average'] #标记线\n",
    "        )\n",
    "line.add(name = \"商家B\", x_axis = x, y_axis = y2,\n",
    "         #\n",
    "         #=====设置xyAxis=====\n",
    "         is_xaxis_boundarygap = False,  # x坐标刻度对准数据，而不是作为分类边界\n",
    "         yaxis_min = 0,yaxis_max = 100,  # 设置y坐标轴刻度范围\n",
    "         #\n",
    "         #=====设置dataZoom=====\n",
    "         is_datazoom_show = True, #显示 dataZoom控制条\n",
    "         #\n",
    "         #=====设置lineStyle=====\n",
    "         line_width = 3,\n",
    "         line_type = 'dashed', # 线型，可以是solid,dashed,或者dotted\n",
    "         \n",
    "         #=====设置markPoint&markLine=====\n",
    "         mark_point = [{\"coord\": ['2018-09', 60], \"name\": \"2018/09销售目标\"}, \n",
    "          {\"coord\": ['2018-11', 80], \"name\": \"2018/10销售目标\"}]  # 自定义标记点\n",
    "        )\n",
    "line"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "如果需要反复使用相同的配置，可以使用Style类简化这个过程。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 60,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"39d940ce34b241b7bf298901024cc9b4\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_39d940ce34b241b7bf298901024cc9b4 = echarts.init(document.getElementById('39d940ce34b241b7bf298901024cc9b4'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_39d940ce34b241b7bf298901024cc9b4 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u5404\\u7c7b\\u7535\\u5f71\\u4e2d\\\"\\u597d\\u7247\\\"\\u6240\\u5360\\u7684\\u6bd4\\u4f8b\",\n",
       "            \"subtext\": \"\\u6570\\u636e\\u6765\\u81ea\\u8c46\\u74e3\",\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 3080514,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u5267\\u60c5\",\n",
       "                    \"value\": 25\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 75\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"10%\",\n",
       "                \"30%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u5947\\u5e7b\",\n",
       "                    \"value\": 24\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 76\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"30%\",\n",
       "                \"30%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u7231\\u60c5\",\n",
       "                    \"value\": 14\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 86\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"50%\",\n",
       "                \"30%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u60ca\\u609a\",\n",
       "                    \"value\": 11\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 89\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"70%\",\n",
       "                \"30%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u5192\\u9669\",\n",
       "                    \"value\": 27\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 73\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"90%\",\n",
       "                \"30%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u52a8\\u4f5c\",\n",
       "                    \"value\": 15\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 85\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"10%\",\n",
       "                \"70%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u559c\\u5267\",\n",
       "                    \"value\": 54\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 46\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"30%\",\n",
       "                \"70%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u79d1\\u5e7b\",\n",
       "                    \"value\": 26\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 74\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"50%\",\n",
       "                \"70%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u60ac\\u7591\",\n",
       "                    \"value\": 25\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 75\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"70%\",\n",
       "                \"70%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u72af\\u7f6a\",\n",
       "                    \"value\": 28\n",
       "                },\n",
       "                {\n",
       "                    \"value\": 72\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"18%\",\n",
       "                \"24%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"90%\",\n",
       "                \"70%\"\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"center\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    },\n",
       "                    \"formatter\": \"{b}: {d}%\"\n",
       "                }\n",
       "            },\n",
       "            \"seriesId\": 3080514\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5267\\u60c5\",\n",
       "                \"\",\n",
       "                \"\\u5947\\u5e7b\",\n",
       "                \"\\u7231\\u60c5\",\n",
       "                \"\\u60ca\\u609a\",\n",
       "                \"\\u5192\\u9669\",\n",
       "                \"\\u52a8\\u4f5c\",\n",
       "                \"\\u559c\\u5267\",\n",
       "                \"\\u79d1\\u5e7b\",\n",
       "                \"\\u60ac\\u7591\",\n",
       "                \"\\u72af\\u7f6a\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"bottom\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_39d940ce34b241b7bf298901024cc9b4.setOption(option_39d940ce34b241b7bf298901024cc9b4);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.charts.pie.Pie at 0x1a214296a0>"
      ]
     },
     "execution_count": 60,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Pie,Style\n",
    "\n",
    "pie = Pie('各类电影中\"好片\"所占的比例', \"数据来自豆瓣\", title_pos='center')\n",
    "style = Style()\n",
    "pie_style = style.add(\n",
    "    label_pos=\"center\",\n",
    "    is_label_show=True,\n",
    "    label_text_color=None\n",
    ")\n",
    "\n",
    "pie.add(\n",
    "    \"\", [\"剧情\", \"\"], [25, 75], center=[10, 30], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"奇幻\", \"\"], [24, 76], center=[30, 30], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"爱情\", \"\"], [14, 86], center=[50, 30], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"惊悚\", \"\"], [11, 89], center=[70, 30], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"冒险\", \"\"], [27, 73], center=[90, 30], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"动作\", \"\"], [15, 85], center=[10, 70], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"喜剧\", \"\"], [54, 46], center=[30, 70], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"科幻\", \"\"], [26, 74], center=[50, 70], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"悬疑\", \"\"], [25, 75], center=[70, 70], radius=[18, 24], **pie_style\n",
    ")\n",
    "pie.add(\n",
    "    \"\", [\"犯罪\", \"\"],[28, 72],center=[90, 70], radius=[18, 24], legend_top=\"bottom\", \n",
    "    **pie_style\n",
    ")\n",
    "pie"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 三，图表组合"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "如果要把多张图作为子图绘制在一张图中，或者要把柱状图和折线图这样不同类型的图表叠加在一起的时候，我们需要使用对基本图表进行一些组合来实现更加丰富的呈现效果。\n",
    "\n",
    "在pyecharts 中 对图表进行组合的方式主要有：Grid, Overlap, Page, Timeline这四种方式。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**1，Grid图表组合**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Grid图表组合可以并行显示多张图，类似子图的作用。Grid中的子图可以是Overlap。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 61,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"e12ccd2ee323486ca115b4fa5748b697\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_e12ccd2ee323486ca115b4fa5748b697 = echarts.init(document.getElementById('e12ccd2ee323486ca115b4fa5748b697'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_e12ccd2ee323486ca115b4fa5748b697 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u67f1\\u72b6\\u56fe\\u793a\\u4f8b\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"text\": \"\\u6298\\u7ebf\\u56fe\\u793a\\u4f8b\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"50%\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 1455134,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"data\": [\n",
       "                5,\n",
       "                20,\n",
       "                36,\n",
       "                10,\n",
       "                75,\n",
       "                90\n",
       "            ],\n",
       "            \"stack\": \"stack_1455134\",\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1455134,\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"data\": [\n",
       "                10,\n",
       "                25,\n",
       "                8,\n",
       "                60,\n",
       "                20,\n",
       "                80\n",
       "            ],\n",
       "            \"stack\": \"stack_1455134\",\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 1455134,\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u6700\\u9ad8\\u6c14\\u6e29\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5468\\u4e00\",\n",
       "                    11\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e8c\",\n",
       "                    11\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e09\",\n",
       "                    15\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u56db\",\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e94\",\n",
       "                    12\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u516d\",\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u65e5\",\n",
       "                    10\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"max\",\n",
       "                        \"name\": \"Maximum\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    {\n",
       "                        \"type\": \"min\",\n",
       "                        \"name\": \"Minimum\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"average\",\n",
       "                        \"name\": \"mean-Value\"\n",
       "                    }\n",
       "                ],\n",
       "                \"symbolSize\": 10\n",
       "            },\n",
       "            \"seriesId\": 5450024,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u6700\\u4f4e\\u6c14\\u6e29\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5468\\u4e00\",\n",
       "                    1\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e8c\",\n",
       "                    -2\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e09\",\n",
       "                    2\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u56db\",\n",
       "                    5\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e94\",\n",
       "                    3\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u516d\",\n",
       "                    2\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u65e5\",\n",
       "                    0\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"max\",\n",
       "                        \"name\": \"Maximum\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    {\n",
       "                        \"type\": \"min\",\n",
       "                        \"name\": \"Minimum\",\n",
       "                        \"symbol\": \"pin\",\n",
       "                        \"symbolSize\": 50,\n",
       "                        \"label\": {\n",
       "                            \"normal\": {\n",
       "                                \"textStyle\": {\n",
       "                                    \"color\": \"#fff\"\n",
       "                                }\n",
       "                            }\n",
       "                        }\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"average\",\n",
       "                        \"name\": \"mean-Value\"\n",
       "                    }\n",
       "                ],\n",
       "                \"symbolSize\": 10\n",
       "            },\n",
       "            \"seriesId\": 5450024,\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u6700\\u9ad8\\u6c14\\u6e29\",\n",
       "                \"\\u6700\\u4f4e\\u6c14\\u6e29\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"50%\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u5468\\u4e00\",\n",
       "                \"\\u5468\\u4e8c\",\n",
       "                \"\\u5468\\u4e09\",\n",
       "                \"\\u5468\\u56db\",\n",
       "                \"\\u5468\\u4e94\",\n",
       "                \"\\u5468\\u516d\",\n",
       "                \"\\u5468\\u65e5\"\n",
       "            ],\n",
       "            \"gridIndex\": 3\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"gridIndex\": 3\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"bottom\": \"60%\"\n",
       "        },\n",
       "        {\n",
       "            \"bottom\": \"60%\"\n",
       "        },\n",
       "        {\n",
       "            \"top\": \"60%\"\n",
       "        },\n",
       "        {\n",
       "            \"top\": \"60%\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_e12ccd2ee323486ca115b4fa5748b697.setOption(option_e12ccd2ee323486ca115b4fa5748b697);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.custom.grid.Grid at 0x1a214295f8>"
      ]
     },
     "execution_count": 61,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Bar, Line, Grid\n",
    "\n",
    "x = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "y1 = [5, 20, 36, 10, 75, 90]\n",
    "y2 = [10, 25, 8, 60, 20, 80]\n",
    "bar = Bar(\"柱状图示例\", height=720)\n",
    "bar.add(\"商家A\", x, y1, is_stack=True)\n",
    "bar.add(\"商家B\", x, y2, is_stack=True)\n",
    "\n",
    "\n",
    "line = Line(\"折线图示例\", title_top=\"50%\")\n",
    "x = [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\", \"周日\"]\n",
    "line.add(\n",
    "    \"最高气温\",\n",
    "    x,\n",
    "    [11, 11, 15, 13, 12, 13, 10],\n",
    "    mark_point=[\"max\", \"min\"],\n",
    "    mark_line=[\"average\"],\n",
    ")\n",
    "line.add(\n",
    "    \"最低气温\",\n",
    "    x,\n",
    "    [1, -2, 2, 5, 3, 2, 0],\n",
    "    mark_point=[\"max\", \"min\"],\n",
    "    mark_line=[\"average\"],\n",
    "    legend_top=\"50%\",\n",
    ")\n",
    "\n",
    "grid = Grid()\n",
    "#利用grid_bottom,grid_top,grid_left,grid_right四个参数控制子图的相对位置\n",
    "grid.add(bar, grid_bottom=\"60%\")  \n",
    "grid.add(line, grid_top=\"60%\")\n",
    "grid"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "利用Grid解决dataZoom与X轴标签重叠的问题"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 62,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"eb6543c4dfd54188a6f4d049d0a339b2\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_eb6543c4dfd54188a6f4d049d0a339b2 = echarts.init(document.getElementById('eb6543c4dfd54188a6f4d049d0a339b2'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_eb6543c4dfd54188a6f4d049d0a339b2 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u5229\\u7528 Grid \\u89e3\\u51b3 dataZoom \\u4e0e X \\u8f74\\u6807\\u7b7e\\u91cd\\u53e0\\u95ee\\u9898\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 3910474,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                10,\n",
       "                20,\n",
       "                30,\n",
       "                40,\n",
       "                50,\n",
       "                60,\n",
       "                70,\n",
       "                80,\n",
       "                90\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 3910474\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": 0,\n",
       "                \"rotate\": 30,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f741\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f742\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f743\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f744\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f745\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f746\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f747\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f748\",\n",
       "                \"\\u540d\\u5b57\\u5f88\\u957f\\u7684x\\u8f749\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"start\": 50,\n",
       "            \"end\": 100,\n",
       "            \"orient\": \"horizontal\"\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"bottom\": \"25%\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_eb6543c4dfd54188a6f4d049d0a339b2.setOption(option_eb6543c4dfd54188a6f4d049d0a339b2);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.custom.grid.Grid at 0x1a213a70b8>"
      ]
     },
     "execution_count": 62,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Bar, Grid\n",
    "\n",
    "x = [\n",
    "    \"名字很长的x轴1\",\n",
    "    \"名字很长的x轴2\",\n",
    "    \"名字很长的x轴3\",\n",
    "    \"名字很长的x轴4\",\n",
    "    \"名字很长的x轴5\",\n",
    "    \"名字很长的x轴6\",\n",
    "    \"名字很长的x轴7\",\n",
    "    \"名字很长的x轴8\",\n",
    "    \"名字很长的x轴9\",\n",
    "]\n",
    "y = [10, 20, 30, 40, 50, 60, 70, 80, 90]\n",
    "\n",
    "grid = Grid()\n",
    "bar = Bar(\"利用 Grid 解决 dataZoom 与 X 轴标签重叠问题\")\n",
    "bar.add(\"\", x, y, is_datazoom_show=True, xaxis_interval=0, xaxis_rotate=30)\n",
    "\n",
    "# 把 bar 加入到 grid 中，并适当调整 grid_bottom 参数，使 bar 图整体上移\n",
    "grid.add(bar, grid_bottom=\"25%\")\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**2，Overlap图表组合**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Overlap图表组合可以将不同类型的图表画在同一张图上。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 63,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"a5fa099306674207adc3495ec1f6599e\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_a5fa099306674207adc3495ec1f6599e = echarts.init(document.getElementById('a5fa099306674207adc3495ec1f6599e'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_a5fa099306674207adc3495ec1f6599e = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Line - Bar \\u793a\\u4f8b\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 8248420,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"bar\",\n",
       "            \"data\": [\n",
       "                10,\n",
       "                20,\n",
       "                30,\n",
       "                40,\n",
       "                50,\n",
       "                60\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8248420\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"line\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"A\",\n",
       "                    38\n",
       "                ],\n",
       "                [\n",
       "                    \"B\",\n",
       "                    28\n",
       "                ],\n",
       "                [\n",
       "                    \"C\",\n",
       "                    58\n",
       "                ],\n",
       "                [\n",
       "                    \"D\",\n",
       "                    48\n",
       "                ],\n",
       "                [\n",
       "                    \"E\",\n",
       "                    78\n",
       "                ],\n",
       "                [\n",
       "                    \"F\",\n",
       "                    68\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8248420,\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"bar\",\n",
       "                \"line\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"A\",\n",
       "                \"B\",\n",
       "                \"C\",\n",
       "                \"D\",\n",
       "                \"E\",\n",
       "                \"F\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_a5fa099306674207adc3495ec1f6599e.setOption(option_a5fa099306674207adc3495ec1f6599e);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.custom.overlap.Overlap at 0x1a213a7550>"
      ]
     },
     "execution_count": 63,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Bar, Line, Overlap\n",
    "\n",
    "attr = ['A', 'B', 'C', 'D', 'E', 'F']\n",
    "v1 = [10, 20, 30, 40, 50, 60]\n",
    "v2 = [38, 28, 58, 48, 78, 68]\n",
    "bar = Bar(\"Line - Bar 示例\")\n",
    "bar.add(\"bar\", attr, v1)\n",
    "line = Line()\n",
    "line.add(\"line\", attr, v2)\n",
    "\n",
    "overlap = Overlap()\n",
    "overlap.add(bar)\n",
    "overlap.add(line)\n",
    "overlap"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Overlap显示双坐标轴"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 64,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"5a5f8f8055ea45479c9e48e6c1b613d7\" style=\"width:800px;height:500px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_5a5f8f8055ea45479c9e48e6c1b613d7 = echarts.init(document.getElementById('5a5f8f8055ea45479c9e48e6c1b613d7'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_5a5f8f8055ea45479c9e48e6c1b613d7 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 8849529,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"data\": [\n",
       "                2.0,\n",
       "                4.9,\n",
       "                7.0,\n",
       "                23.2,\n",
       "                25.6,\n",
       "                76.7,\n",
       "                135.6,\n",
       "                162.2,\n",
       "                32.6,\n",
       "                20.0,\n",
       "                6.4,\n",
       "                3.3\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8849529\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"data\": [\n",
       "                2.6,\n",
       "                5.9,\n",
       "                9.0,\n",
       "                26.4,\n",
       "                28.7,\n",
       "                70.7,\n",
       "                175.6,\n",
       "                182.2,\n",
       "                48.7,\n",
       "                18.8,\n",
       "                6.0,\n",
       "                2.3\n",
       "            ],\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8849529\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6\",\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 4,\n",
       "            \"smooth\": false,\n",
       "            \"step\": false,\n",
       "            \"showSymbol\": true,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"1\\u6708\",\n",
       "                    2.0\n",
       "                ],\n",
       "                [\n",
       "                    \"2\\u6708\",\n",
       "                    2.2\n",
       "                ],\n",
       "                [\n",
       "                    \"3\\u6708\",\n",
       "                    3.3\n",
       "                ],\n",
       "                [\n",
       "                    \"4\\u6708\",\n",
       "                    4.5\n",
       "                ],\n",
       "                [\n",
       "                    \"5\\u6708\",\n",
       "                    6.3\n",
       "                ],\n",
       "                [\n",
       "                    \"6\\u6708\",\n",
       "                    10.2\n",
       "                ],\n",
       "                [\n",
       "                    \"7\\u6708\",\n",
       "                    20.3\n",
       "                ],\n",
       "                [\n",
       "                    \"8\\u6708\",\n",
       "                    23.4\n",
       "                ],\n",
       "                [\n",
       "                    \"9\\u6708\",\n",
       "                    23.0\n",
       "                ],\n",
       "                [\n",
       "                    \"10\\u6708\",\n",
       "                    16.5\n",
       "                ],\n",
       "                [\n",
       "                    \"11\\u6708\",\n",
       "                    12.0\n",
       "                ],\n",
       "                [\n",
       "                    \"12\\u6708\",\n",
       "                    6.2\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"normal\": {\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 8849529,\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 1\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf\",\n",
       "                \"\\u964d\\u6c34\\u91cf\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"1\\u6708\",\n",
       "                \"2\\u6708\",\n",
       "                \"3\\u6708\",\n",
       "                \"4\\u6708\",\n",
       "                \"5\\u6708\",\n",
       "                \"6\\u6708\",\n",
       "                \"7\\u6708\",\n",
       "                \"8\\u6708\",\n",
       "                \"9\\u6708\",\n",
       "                \"10\\u6708\",\n",
       "                \"11\\u6708\",\n",
       "                \"12\\u6708\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"max\": 250,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": 50,\n",
       "                \"formatter\": \"{value}  ml\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": 5,\n",
       "                \"formatter\": \"{value}  \\u00b0C\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_5a5f8f8055ea45479c9e48e6c1b613d7.setOption(option_5a5f8f8055ea45479c9e48e6c1b613d7);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.custom.overlap.Overlap at 0x1a21406f60>"
      ]
     },
     "execution_count": 64,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Line, Bar, Overlap\n",
    "\n",
    "attr = [\"{}月\".format(i) for i in range(1, 13)]\n",
    "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]\n",
    "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]\n",
    "v3 = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]\n",
    "\n",
    "bar = Bar()\n",
    "bar.add(\"蒸发量\", attr, v1)\n",
    "bar.add(\"降水量\", attr, v2, yaxis_formatter=\" ml\",\n",
    "        yaxis_interval=50, yaxis_max=250)\n",
    "\n",
    "line = Line()\n",
    "line.add(\"平均温度\", attr, v3, yaxis_formatter=\" °C\", yaxis_interval=5)\n",
    "\n",
    "overlap = Overlap(width=800, height=500)\n",
    "# 默认不新增 x y 轴，并且 x y 轴的索引都为 0\n",
    "overlap.add(bar)\n",
    "# 新增一个 y 轴，此时 y 轴的数量为 2，第二个 y 轴的索引为 1（索引从 0 开始），所以设置 yaxis_index = 1\n",
    "# 由于使用的是同一个 x 轴，所以 x 轴部分不用做出改变\n",
    "overlap.add(line, yaxis_index=1, is_add_yaxis=True)\n",
    "overlap"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**3，Pages图表组合**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Pages可以将多张图表按顺序展示在一张网页中，适合制作图形化报表。Pages中的图表可以是Grid,Overlap或Timeline."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 65,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min', 'echartsgl': '/nbextensions/echarts/echarts-gl.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"101af1b93bbf4dc987e61116393a7af5\" style=\"width:800px;height:400px;\"></div>\n",
       "    <div id=\"9a3e0aa503e74260947f09d9ffc2fde6\" style=\"width:800px;height:600px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts', 'echartsgl'], function(echarts) {\n",
       "        \n",
       "var myChart_101af1b93bbf4dc987e61116393a7af5 = echarts.init(document.getElementById('101af1b93bbf4dc987e61116393a7af5'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_101af1b93bbf4dc987e61116393a7af5 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u67f1\\u72b6\\u56fe\\u6570\\u636e\\u5806\\u53e0\\u793a\\u4f8b\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 4160601,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"data\": [\n",
       "                5,\n",
       "                20,\n",
       "                36,\n",
       "                10,\n",
       "                75,\n",
       "                90\n",
       "            ],\n",
       "            \"stack\": \"stack_4160601\",\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 4160601\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"data\": [\n",
       "                10,\n",
       "                25,\n",
       "                8,\n",
       "                60,\n",
       "                20,\n",
       "                80\n",
       "            ],\n",
       "            \"stack\": \"stack_4160601\",\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"markLine\": {\n",
       "                \"data\": []\n",
       "            },\n",
       "            \"seriesId\": 4160601\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"category\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": false\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u886c\\u886b\",\n",
       "                \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                \"\\u96ea\\u7eba\\u886b\",\n",
       "                \"\\u88e4\\u5b50\",\n",
       "                \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                \"\\u889c\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"nameLocation\": \"middle\",\n",
       "            \"nameGap\": 25,\n",
       "            \"nameTextStyle\": {\n",
       "                \"fontSize\": 14\n",
       "            },\n",
       "            \"axisTick\": {\n",
       "                \"alignWithLabel\": false\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"boundaryGap\": true,\n",
       "            \"type\": \"value\",\n",
       "            \"splitLine\": {\n",
       "                \"show\": true\n",
       "            },\n",
       "            \"axisLine\": {\n",
       "                \"lineStyle\": {\n",
       "                    \"width\": 1\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"interval\": \"auto\",\n",
       "                \"formatter\": \"{value} \",\n",
       "                \"rotate\": 0,\n",
       "                \"margin\": 8,\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 12\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ]\n",
       "};\n",
       "myChart_101af1b93bbf4dc987e61116393a7af5.setOption(option_101af1b93bbf4dc987e61116393a7af5);\n",
       "\n",
       "\n",
       "var myChart_9a3e0aa503e74260947f09d9ffc2fde6 = echarts.init(document.getElementById('9a3e0aa503e74260947f09d9ffc2fde6'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_9a3e0aa503e74260947f09d9ffc2fde6 = {\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"3D \\u6563\\u70b9\\u56fe\\u793a\\u4f8b\",\n",
       "            \"left\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 18\n",
       "            },\n",
       "            \"subtextStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"show\": true,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"95%\",\n",
       "        \"top\": \"center\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"save as image\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"restore\"\n",
       "            },\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"data view\"\n",
       "            }\n",
       "        }\n",
       "    },\n",
       "    \"series_id\": 990146,\n",
       "    \"tooltip\": {\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "        \"borderColor\": \"#333\",\n",
       "        \"borderWidth\": 0\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"scatter3D\",\n",
       "            \"data\": [\n",
       "                [\n",
       "                    72,\n",
       "                    43,\n",
       "                    73\n",
       "                ],\n",
       "                [\n",
       "                    53,\n",
       "                    0,\n",
       "                    100\n",
       "                ],\n",
       "                [\n",
       "                    62,\n",
       "                    3,\n",
       "                    29\n",
       "                ],\n",
       "                [\n",
       "                    38,\n",
       "                    85,\n",
       "                    51\n",
       "                ],\n",
       "                [\n",
       "                    67,\n",
       "                    17,\n",
       "                    1\n",
       "                ],\n",
       "                [\n",
       "                    83,\n",
       "                    45,\n",
       "                    93\n",
       "                ],\n",
       "                [\n",
       "                    9,\n",
       "                    18,\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    82,\n",
       "                    2,\n",
       "                    75\n",
       "                ],\n",
       "                [\n",
       "                    70,\n",
       "                    48,\n",
       "                    69\n",
       "                ],\n",
       "                [\n",
       "                    67,\n",
       "                    24,\n",
       "                    21\n",
       "                ],\n",
       "                [\n",
       "                    48,\n",
       "                    85,\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    17,\n",
       "                    68,\n",
       "                    81\n",
       "                ],\n",
       "                [\n",
       "                    26,\n",
       "                    55,\n",
       "                    94\n",
       "                ],\n",
       "                [\n",
       "                    100,\n",
       "                    83,\n",
       "                    79\n",
       "                ],\n",
       "                [\n",
       "                    7,\n",
       "                    100,\n",
       "                    29\n",
       "                ],\n",
       "                [\n",
       "                    23,\n",
       "                    38,\n",
       "                    31\n",
       "                ],\n",
       "                [\n",
       "                    45,\n",
       "                    73,\n",
       "                    47\n",
       "                ],\n",
       "                [\n",
       "                    44,\n",
       "                    47,\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    96,\n",
       "                    58,\n",
       "                    33\n",
       "                ],\n",
       "                [\n",
       "                    29,\n",
       "                    75,\n",
       "                    47\n",
       "                ],\n",
       "                [\n",
       "                    33,\n",
       "                    69,\n",
       "                    29\n",
       "                ],\n",
       "                [\n",
       "                    33,\n",
       "                    55,\n",
       "                    73\n",
       "                ],\n",
       "                [\n",
       "                    73,\n",
       "                    69,\n",
       "                    49\n",
       "                ],\n",
       "                [\n",
       "                    67,\n",
       "                    59,\n",
       "                    17\n",
       "                ],\n",
       "                [\n",
       "                    88,\n",
       "                    58,\n",
       "                    27\n",
       "                ],\n",
       "                [\n",
       "                    83,\n",
       "                    4,\n",
       "                    70\n",
       "                ],\n",
       "                [\n",
       "                    3,\n",
       "                    14,\n",
       "                    41\n",
       "                ],\n",
       "                [\n",
       "                    75,\n",
       "                    10,\n",
       "                    39\n",
       "                ],\n",
       "                [\n",
       "                    37,\n",
       "                    76,\n",
       "                    10\n",
       "                ],\n",
       "                [\n",
       "                    50,\n",
       "                    51,\n",
       "                    41\n",
       "                ],\n",
       "                [\n",
       "                    44,\n",
       "                    41,\n",
       "                    25\n",
       "                ],\n",
       "                [\n",
       "                    77,\n",
       "                    31,\n",
       "                    35\n",
       "                ],\n",
       "                [\n",
       "                    7,\n",
       "                    56,\n",
       "                    18\n",
       "                ],\n",
       "                [\n",
       "                    47,\n",
       "                    2,\n",
       "                    23\n",
       "                ],\n",
       "                [\n",
       "                    19,\n",
       "                    75,\n",
       "                    76\n",
       "                ],\n",
       "                [\n",
       "                    69,\n",
       "                    26,\n",
       "                    50\n",
       "                ],\n",
       "                [\n",
       "                    64,\n",
       "                    92,\n",
       "                    52\n",
       "                ],\n",
       "                [\n",
       "                    46,\n",
       "                    51,\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    92,\n",
       "                    7,\n",
       "                    18\n",
       "                ],\n",
       "                [\n",
       "                    86,\n",
       "                    25,\n",
       "                    18\n",
       "                ],\n",
       "                [\n",
       "                    67,\n",
       "                    39,\n",
       "                    97\n",
       "                ],\n",
       "                [\n",
       "                    98,\n",
       "                    22,\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    98,\n",
       "                    81,\n",
       "                    56\n",
       "                ],\n",
       "                [\n",
       "                    69,\n",
       "                    42,\n",
       "                    49\n",
       "                ],\n",
       "                [\n",
       "                    2,\n",
       "                    45,\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    51,\n",
       "                    1,\n",
       "                    93\n",
       "                ],\n",
       "                [\n",
       "                    12,\n",
       "                    72,\n",
       "                    45\n",
       "                ],\n",
       "                [\n",
       "                    29,\n",
       "                    51,\n",
       "                    93\n",
       "                ],\n",
       "                [\n",
       "                    79,\n",
       "                    42,\n",
       "                    72\n",
       "                ],\n",
       "                [\n",
       "                    78,\n",
       "                    71,\n",
       "                    77\n",
       "                ],\n",
       "                [\n",
       "                    99,\n",
       "                    45,\n",
       "                    79\n",
       "                ],\n",
       "                [\n",
       "                    16,\n",
       "                    14,\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    91,\n",
       "                    63,\n",
       "                    58\n",
       "                ],\n",
       "                [\n",
       "                    71,\n",
       "                    34,\n",
       "                    8\n",
       "                ],\n",
       "                [\n",
       "                    47,\n",
       "                    69,\n",
       "                    58\n",
       "                ],\n",
       "                [\n",
       "                    88,\n",
       "                    70,\n",
       "                    37\n",
       "                ],\n",
       "                [\n",
       "                    80,\n",
       "                    14,\n",
       "                    72\n",
       "                ],\n",
       "                [\n",
       "                    42,\n",
       "                    4,\n",
       "                    16\n",
       "                ],\n",
       "                [\n",
       "                    13,\n",
       "                    39,\n",
       "                    13\n",
       "                ],\n",
       "                [\n",
       "                    67,\n",
       "                    49,\n",
       "                    1\n",
       "                ],\n",
       "                [\n",
       "                    69,\n",
       "                    64,\n",
       "                    51\n",
       "                ],\n",
       "                [\n",
       "                    46,\n",
       "                    47,\n",
       "                    69\n",
       "                ],\n",
       "                [\n",
       "                    20,\n",
       "                    99,\n",
       "                    55\n",
       "                ],\n",
       "                [\n",
       "                    40,\n",
       "                    65,\n",
       "                    3\n",
       "                ],\n",
       "                [\n",
       "                    42,\n",
       "                    13,\n",
       "                    49\n",
       "                ],\n",
       "                [\n",
       "                    43,\n",
       "                    9,\n",
       "                    0\n",
       "                ],\n",
       "                [\n",
       "                    11,\n",
       "                    75,\n",
       "                    74\n",
       "                ],\n",
       "                [\n",
       "                    96,\n",
       "                    82,\n",
       "                    70\n",
       "                ],\n",
       "                [\n",
       "                    2,\n",
       "                    47,\n",
       "                    25\n",
       "                ],\n",
       "                [\n",
       "                    97,\n",
       "                    13,\n",
       "                    86\n",
       "                ],\n",
       "                [\n",
       "                    21,\n",
       "                    44,\n",
       "                    61\n",
       "                ],\n",
       "                [\n",
       "                    89,\n",
       "                    88,\n",
       "                    55\n",
       "                ],\n",
       "                [\n",
       "                    63,\n",
       "                    28,\n",
       "                    44\n",
       "                ],\n",
       "                [\n",
       "                    93,\n",
       "                    32,\n",
       "                    1\n",
       "                ],\n",
       "                [\n",
       "                    36,\n",
       "                    77,\n",
       "                    91\n",
       "                ],\n",
       "                [\n",
       "                    75,\n",
       "                    5,\n",
       "                    24\n",
       "                ],\n",
       "                [\n",
       "                    88,\n",
       "                    21,\n",
       "                    93\n",
       "                ],\n",
       "                [\n",
       "                    6,\n",
       "                    25,\n",
       "                    44\n",
       "                ],\n",
       "                [\n",
       "                    100,\n",
       "                    46,\n",
       "                    41\n",
       "                ],\n",
       "                [\n",
       "                    49,\n",
       "                    1,\n",
       "                    11\n",
       "                ]\n",
       "            ],\n",
       "            \"label\": {\n",
       "                \"normal\": {\n",
       "                    \"show\": false,\n",
       "                    \"position\": \"top\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"emphasis\": {\n",
       "                    \"show\": true,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            },\n",
       "            \"itemStyle\": {\n",
       "                \"opacity\": 1\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\"\n",
       "            ],\n",
       "            \"selectedMode\": \"multiple\",\n",
       "            \"show\": true,\n",
       "            \"left\": \"center\",\n",
       "            \"top\": \"top\",\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"textStyle\": {\n",
       "                \"fontSize\": 12\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"animation\": true,\n",
       "    \"xAxis3D\": {\n",
       "        \"nameGap\": 20,\n",
       "        \"nameTextStyle\": {\n",
       "            \"fontSize\": 16\n",
       "        },\n",
       "        \"type\": \"value\",\n",
       "        \"axisLabel\": {\n",
       "            \"margin\": 8,\n",
       "            \"interval\": \"auto\"\n",
       "        }\n",
       "    },\n",
       "    \"yAxis3D\": {\n",
       "        \"nameGap\": 20,\n",
       "        \"nameTextStyle\": {\n",
       "            \"fontSize\": 16\n",
       "        },\n",
       "        \"type\": \"value\",\n",
       "        \"axisLabel\": {\n",
       "            \"margin\": 8,\n",
       "            \"interval\": \"auto\"\n",
       "        }\n",
       "    },\n",
       "    \"zAxis3D\": {\n",
       "        \"nameGap\": 20,\n",
       "        \"nameTextStyle\": {\n",
       "            \"fontSize\": 16\n",
       "        },\n",
       "        \"type\": \"value\",\n",
       "        \"axisLabel\": {\n",
       "            \"margin\": 8\n",
       "        }\n",
       "    },\n",
       "    \"grid3D\": {\n",
       "        \"boxWidth\": 100,\n",
       "        \"boxHeight\": 100,\n",
       "        \"boxDepth\": 100,\n",
       "        \"viewControl\": {\n",
       "            \"autoRotate\": false,\n",
       "            \"autoRotateSpeed\": 10,\n",
       "            \"rotateSensitivity\": 1\n",
       "        }\n",
       "    },\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\",\n",
       "        \"#f6f5ec\"\n",
       "    ],\n",
       "    \"visualMap\": {\n",
       "        \"type\": \"continuous\",\n",
       "        \"min\": 0,\n",
       "        \"max\": 100,\n",
       "        \"text\": [\n",
       "            \"high\",\n",
       "            \"low\"\n",
       "        ],\n",
       "        \"textStyle\": {},\n",
       "        \"inRange\": {\n",
       "            \"color\": [\n",
       "                \"#313695\",\n",
       "                \"#4575b4\",\n",
       "                \"#74add1\",\n",
       "                \"#abd9e9\",\n",
       "                \"#e0f3f8\",\n",
       "                \"#ffffbf\",\n",
       "                \"#fee090\",\n",
       "                \"#fdae61\",\n",
       "                \"#f46d43\",\n",
       "                \"#d73027\",\n",
       "                \"#a50026\"\n",
       "            ]\n",
       "        },\n",
       "        \"calculable\": true,\n",
       "        \"splitNumber\": 5,\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"left\",\n",
       "        \"top\": \"bottom\",\n",
       "        \"showLabel\": true\n",
       "    }\n",
       "};\n",
       "myChart_9a3e0aa503e74260947f09d9ffc2fde6.setOption(option_9a3e0aa503e74260947f09d9ffc2fde6);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.custom.page.Page at 0x1a213ef470>"
      ]
     },
     "execution_count": 65,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#coding=utf-8\n",
    "from __future__ import unicode_literals\n",
    "from pyecharts import Bar, Scatter3D\n",
    "from pyecharts import Page\n",
    "\n",
    "page = Page()         # step 1\n",
    "\n",
    "# bar\n",
    "attr = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "v1 = [5, 20, 36, 10, 75, 90]\n",
    "v2 = [10, 25, 8, 60, 20, 80]\n",
    "bar = Bar(\"柱状图数据堆叠示例\")\n",
    "bar.add(\"商家A\", attr, v1, is_stack=True)\n",
    "bar.add(\"商家B\", attr, v2, is_stack=True)\n",
    "page.add(bar)         # step 2\n",
    "\n",
    "# scatter3D\n",
    "import random\n",
    "data = [\n",
    "    [random.randint(0, 100),\n",
    "    random.randint(0, 100),\n",
    "    random.randint(0, 100)] for _ in range(80)\n",
    "]\n",
    "range_color = [\n",
    "    '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',\n",
    "    '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']\n",
    "scatter3D = Scatter3D(\"3D 散点图示例\", width=800, height=600)\n",
    "scatter3D.add(\"\", data, is_visualmap=True, visual_range_color=range_color)\n",
    "page.add(scatter3D)  # step 2\n",
    "\n",
    "page    # step 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**4，Timeline图表组合**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Timeline可以将多个图表制作成动画。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 66,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts': '/nbextensions/echarts/echarts.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "    <div id=\"6744e34898a840daab4a7ebbf7ffcfeb\" style=\"width:800px;height:400px;\"></div>\n",
       "\n",
       "\n",
       "<script>\n",
       "    require(['echarts'], function(echarts) {\n",
       "        \n",
       "var myChart_6744e34898a840daab4a7ebbf7ffcfeb = echarts.init(document.getElementById('6744e34898a840daab4a7ebbf7ffcfeb'), 'light', {renderer: 'canvas'});\n",
       "\n",
       "var option_6744e34898a840daab4a7ebbf7ffcfeb = {\n",
       "    \"baseOption\": {\n",
       "        \"timeline\": {\n",
       "            \"axisType\": \"category\",\n",
       "            \"autoPlay\": true,\n",
       "            \"loop\": true,\n",
       "            \"rewind\": false,\n",
       "            \"show\": true,\n",
       "            \"symbol\": \"emptyCircle\",\n",
       "            \"symbolSize\": 10,\n",
       "            \"playInterval\": 800,\n",
       "            \"left\": \"auto\",\n",
       "            \"right\": \"auto\",\n",
       "            \"top\": \"auto\",\n",
       "            \"bottom\": 0,\n",
       "            \"data\": [\n",
       "                \"2012 \\u5e74\",\n",
       "                \"2013 \\u5e74\",\n",
       "                \"2014 \\u5e74\",\n",
       "                \"2015 \\u5e74\",\n",
       "                \"2016 \\u5e74\"\n",
       "            ]\n",
       "        },\n",
       "        \"series\": [],\n",
       "        \"xAxis\": [\n",
       "            {\n",
       "                \"show\": true,\n",
       "                \"nameLocation\": \"middle\",\n",
       "                \"nameGap\": 25,\n",
       "                \"nameTextStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"axisTick\": {\n",
       "                    \"alignWithLabel\": false\n",
       "                },\n",
       "                \"inverse\": false,\n",
       "                \"boundaryGap\": true,\n",
       "                \"type\": \"category\",\n",
       "                \"splitLine\": {\n",
       "                    \"show\": false\n",
       "                },\n",
       "                \"axisLine\": {\n",
       "                    \"lineStyle\": {\n",
       "                        \"width\": 1\n",
       "                    }\n",
       "                },\n",
       "                \"axisLabel\": {\n",
       "                    \"interval\": \"auto\",\n",
       "                    \"rotate\": 0,\n",
       "                    \"margin\": 8,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                },\n",
       "                \"data\": [\n",
       "                    \"\\u886c\\u886b\",\n",
       "                    \"\\u7f8a\\u6bdb\\u886b\",\n",
       "                    \"\\u96ea\\u7eba\\u886b\",\n",
       "                    \"\\u88e4\\u5b50\",\n",
       "                    \"\\u9ad8\\u8ddf\\u978b\",\n",
       "                    \"\\u889c\\u5b50\"\n",
       "                ]\n",
       "            }\n",
       "        ],\n",
       "        \"yAxis\": [\n",
       "            {\n",
       "                \"show\": true,\n",
       "                \"nameLocation\": \"middle\",\n",
       "                \"nameGap\": 25,\n",
       "                \"nameTextStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"axisTick\": {\n",
       "                    \"alignWithLabel\": false\n",
       "                },\n",
       "                \"inverse\": false,\n",
       "                \"boundaryGap\": true,\n",
       "                \"type\": \"value\",\n",
       "                \"splitLine\": {\n",
       "                    \"show\": true\n",
       "                },\n",
       "                \"axisLine\": {\n",
       "                    \"lineStyle\": {\n",
       "                        \"width\": 1\n",
       "                    }\n",
       "                },\n",
       "                \"axisLabel\": {\n",
       "                    \"interval\": \"auto\",\n",
       "                    \"formatter\": \"{value} \",\n",
       "                    \"rotate\": 0,\n",
       "                    \"margin\": 8,\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "        ]\n",
       "    },\n",
       "    \"options\": [\n",
       "        {\n",
       "            \"color\": [\n",
       "                \"#c23531\",\n",
       "                \"#2f4554\",\n",
       "                \"#61a0a8\",\n",
       "                \"#d48265\",\n",
       "                \"#749f83\",\n",
       "                \"#ca8622\",\n",
       "                \"#bda29a\",\n",
       "                \"#6e7074\",\n",
       "                \"#546570\",\n",
       "                \"#c4ccd3\",\n",
       "                \"#f05b72\",\n",
       "                \"#ef5b9c\",\n",
       "                \"#f47920\",\n",
       "                \"#905a3d\",\n",
       "                \"#fab27b\",\n",
       "                \"#2a5caa\",\n",
       "                \"#444693\",\n",
       "                \"#726930\",\n",
       "                \"#b2d235\",\n",
       "                \"#6d8346\",\n",
       "                \"#ac6767\",\n",
       "                \"#1d953f\",\n",
       "                \"#6950a1\",\n",
       "                \"#918597\",\n",
       "                \"#f6f5ec\"\n",
       "            ],\n",
       "            \"legend\": [\n",
       "                {\n",
       "                    \"data\": [\n",
       "                        \"\\u6625\\u5b63\",\n",
       "                        \"\\u590f\\u5b63\",\n",
       "                        \"\\u79cb\\u5b63\",\n",
       "                        \"\\u51ac\\u5b63\"\n",
       "                    ],\n",
       "                    \"selectedMode\": \"multiple\",\n",
       "                    \"show\": true,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"top\",\n",
       "                    \"orient\": \"horizontal\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"series\": [\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u6625\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        97,\n",
       "                        78,\n",
       "                        87,\n",
       "                        26,\n",
       "                        61,\n",
       "                        42\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 2571662\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u590f\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        13,\n",
       "                        62,\n",
       "                        24,\n",
       "                        83,\n",
       "                        13,\n",
       "                        71\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 2571662\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u79cb\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        26,\n",
       "                        82,\n",
       "                        67,\n",
       "                        54,\n",
       "                        50,\n",
       "                        42\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 2571662\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u51ac\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        100,\n",
       "                        30,\n",
       "                        25,\n",
       "                        65,\n",
       "                        25,\n",
       "                        25\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 2571662\n",
       "                }\n",
       "            ],\n",
       "            \"title\": [\n",
       "                {\n",
       "                    \"text\": \"2012 \\u5e74\\u9500\\u91cf\",\n",
       "                    \"subtext\": \"\\u6570\\u636e\\u7eaf\\u5c5e\\u865a\\u6784\",\n",
       "                    \"left\": \"auto\",\n",
       "                    \"top\": \"auto\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 18\n",
       "                    },\n",
       "                    \"subtextStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"tooltip\": {\n",
       "                \"trigger\": \"item\",\n",
       "                \"triggerOn\": \"mousemove|click\",\n",
       "                \"axisPointer\": {\n",
       "                    \"type\": \"line\"\n",
       "                },\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "                \"borderColor\": \"#333\",\n",
       "                \"borderWidth\": 0\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"color\": [\n",
       "                \"#c23531\",\n",
       "                \"#2f4554\",\n",
       "                \"#61a0a8\",\n",
       "                \"#d48265\",\n",
       "                \"#749f83\",\n",
       "                \"#ca8622\",\n",
       "                \"#bda29a\",\n",
       "                \"#6e7074\",\n",
       "                \"#546570\",\n",
       "                \"#c4ccd3\",\n",
       "                \"#f05b72\",\n",
       "                \"#ef5b9c\",\n",
       "                \"#f47920\",\n",
       "                \"#905a3d\",\n",
       "                \"#fab27b\",\n",
       "                \"#2a5caa\",\n",
       "                \"#444693\",\n",
       "                \"#726930\",\n",
       "                \"#b2d235\",\n",
       "                \"#6d8346\",\n",
       "                \"#ac6767\",\n",
       "                \"#1d953f\",\n",
       "                \"#6950a1\",\n",
       "                \"#918597\",\n",
       "                \"#f6f5ec\"\n",
       "            ],\n",
       "            \"legend\": [\n",
       "                {\n",
       "                    \"data\": [\n",
       "                        \"\\u6625\\u5b63\",\n",
       "                        \"\\u590f\\u5b63\",\n",
       "                        \"\\u79cb\\u5b63\",\n",
       "                        \"\\u51ac\\u5b63\"\n",
       "                    ],\n",
       "                    \"selectedMode\": \"multiple\",\n",
       "                    \"show\": true,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"top\",\n",
       "                    \"orient\": \"horizontal\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"series\": [\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u6625\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        57,\n",
       "                        100,\n",
       "                        39,\n",
       "                        45,\n",
       "                        15,\n",
       "                        39\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 7234545\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u590f\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        13,\n",
       "                        70,\n",
       "                        95,\n",
       "                        33,\n",
       "                        17,\n",
       "                        11\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 7234545\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u79cb\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        64,\n",
       "                        83,\n",
       "                        58,\n",
       "                        99,\n",
       "                        23,\n",
       "                        31\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 7234545\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u51ac\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        15,\n",
       "                        31,\n",
       "                        70,\n",
       "                        58,\n",
       "                        36,\n",
       "                        12\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 7234545\n",
       "                }\n",
       "            ],\n",
       "            \"title\": [\n",
       "                {\n",
       "                    \"text\": \"2013 \\u5e74\\u9500\\u91cf\",\n",
       "                    \"subtext\": \"\\u6570\\u636e\\u7eaf\\u5c5e\\u865a\\u6784\",\n",
       "                    \"left\": \"auto\",\n",
       "                    \"top\": \"auto\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 18\n",
       "                    },\n",
       "                    \"subtextStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"tooltip\": {\n",
       "                \"trigger\": \"item\",\n",
       "                \"triggerOn\": \"mousemove|click\",\n",
       "                \"axisPointer\": {\n",
       "                    \"type\": \"line\"\n",
       "                },\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "                \"borderColor\": \"#333\",\n",
       "                \"borderWidth\": 0\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"color\": [\n",
       "                \"#c23531\",\n",
       "                \"#2f4554\",\n",
       "                \"#61a0a8\",\n",
       "                \"#d48265\",\n",
       "                \"#749f83\",\n",
       "                \"#ca8622\",\n",
       "                \"#bda29a\",\n",
       "                \"#6e7074\",\n",
       "                \"#546570\",\n",
       "                \"#c4ccd3\",\n",
       "                \"#f05b72\",\n",
       "                \"#ef5b9c\",\n",
       "                \"#f47920\",\n",
       "                \"#905a3d\",\n",
       "                \"#fab27b\",\n",
       "                \"#2a5caa\",\n",
       "                \"#444693\",\n",
       "                \"#726930\",\n",
       "                \"#b2d235\",\n",
       "                \"#6d8346\",\n",
       "                \"#ac6767\",\n",
       "                \"#1d953f\",\n",
       "                \"#6950a1\",\n",
       "                \"#918597\",\n",
       "                \"#f6f5ec\"\n",
       "            ],\n",
       "            \"legend\": [\n",
       "                {\n",
       "                    \"data\": [\n",
       "                        \"\\u6625\\u5b63\",\n",
       "                        \"\\u590f\\u5b63\",\n",
       "                        \"\\u79cb\\u5b63\",\n",
       "                        \"\\u51ac\\u5b63\"\n",
       "                    ],\n",
       "                    \"selectedMode\": \"multiple\",\n",
       "                    \"show\": true,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"top\",\n",
       "                    \"orient\": \"horizontal\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"series\": [\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u6625\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        30,\n",
       "                        56,\n",
       "                        78,\n",
       "                        24,\n",
       "                        23,\n",
       "                        89\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6598495\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u590f\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        67,\n",
       "                        82,\n",
       "                        75,\n",
       "                        13,\n",
       "                        91,\n",
       "                        63\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6598495\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u79cb\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        63,\n",
       "                        77,\n",
       "                        21,\n",
       "                        42,\n",
       "                        35,\n",
       "                        59\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6598495\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u51ac\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        21,\n",
       "                        65,\n",
       "                        70,\n",
       "                        97,\n",
       "                        49,\n",
       "                        48\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6598495\n",
       "                }\n",
       "            ],\n",
       "            \"title\": [\n",
       "                {\n",
       "                    \"text\": \"2014 \\u5e74\\u9500\\u91cf\",\n",
       "                    \"subtext\": \"\\u6570\\u636e\\u7eaf\\u5c5e\\u865a\\u6784\",\n",
       "                    \"left\": \"auto\",\n",
       "                    \"top\": \"auto\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 18\n",
       "                    },\n",
       "                    \"subtextStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"tooltip\": {\n",
       "                \"trigger\": \"item\",\n",
       "                \"triggerOn\": \"mousemove|click\",\n",
       "                \"axisPointer\": {\n",
       "                    \"type\": \"line\"\n",
       "                },\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "                \"borderColor\": \"#333\",\n",
       "                \"borderWidth\": 0\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"color\": [\n",
       "                \"#c23531\",\n",
       "                \"#2f4554\",\n",
       "                \"#61a0a8\",\n",
       "                \"#d48265\",\n",
       "                \"#749f83\",\n",
       "                \"#ca8622\",\n",
       "                \"#bda29a\",\n",
       "                \"#6e7074\",\n",
       "                \"#546570\",\n",
       "                \"#c4ccd3\",\n",
       "                \"#f05b72\",\n",
       "                \"#ef5b9c\",\n",
       "                \"#f47920\",\n",
       "                \"#905a3d\",\n",
       "                \"#fab27b\",\n",
       "                \"#2a5caa\",\n",
       "                \"#444693\",\n",
       "                \"#726930\",\n",
       "                \"#b2d235\",\n",
       "                \"#6d8346\",\n",
       "                \"#ac6767\",\n",
       "                \"#1d953f\",\n",
       "                \"#6950a1\",\n",
       "                \"#918597\",\n",
       "                \"#f6f5ec\"\n",
       "            ],\n",
       "            \"legend\": [\n",
       "                {\n",
       "                    \"data\": [\n",
       "                        \"\\u6625\\u5b63\",\n",
       "                        \"\\u590f\\u5b63\",\n",
       "                        \"\\u79cb\\u5b63\",\n",
       "                        \"\\u51ac\\u5b63\"\n",
       "                    ],\n",
       "                    \"selectedMode\": \"multiple\",\n",
       "                    \"show\": true,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"top\",\n",
       "                    \"orient\": \"horizontal\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"series\": [\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u6625\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        35,\n",
       "                        32,\n",
       "                        16,\n",
       "                        72,\n",
       "                        47,\n",
       "                        22\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6323828\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u590f\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        42,\n",
       "                        62,\n",
       "                        60,\n",
       "                        44,\n",
       "                        21,\n",
       "                        56\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6323828\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u79cb\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        66,\n",
       "                        20,\n",
       "                        45,\n",
       "                        27,\n",
       "                        32,\n",
       "                        36\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6323828\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u51ac\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        24,\n",
       "                        100,\n",
       "                        75,\n",
       "                        29,\n",
       "                        52,\n",
       "                        13\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 6323828\n",
       "                }\n",
       "            ],\n",
       "            \"title\": [\n",
       "                {\n",
       "                    \"text\": \"2015 \\u5e74\\u9500\\u91cf\",\n",
       "                    \"subtext\": \"\\u6570\\u636e\\u7eaf\\u5c5e\\u865a\\u6784\",\n",
       "                    \"left\": \"auto\",\n",
       "                    \"top\": \"auto\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 18\n",
       "                    },\n",
       "                    \"subtextStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"tooltip\": {\n",
       "                \"trigger\": \"item\",\n",
       "                \"triggerOn\": \"mousemove|click\",\n",
       "                \"axisPointer\": {\n",
       "                    \"type\": \"line\"\n",
       "                },\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "                \"borderColor\": \"#333\",\n",
       "                \"borderWidth\": 0\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"color\": [\n",
       "                \"#c23531\",\n",
       "                \"#2f4554\",\n",
       "                \"#61a0a8\",\n",
       "                \"#d48265\",\n",
       "                \"#749f83\",\n",
       "                \"#ca8622\",\n",
       "                \"#bda29a\",\n",
       "                \"#6e7074\",\n",
       "                \"#546570\",\n",
       "                \"#c4ccd3\",\n",
       "                \"#f05b72\",\n",
       "                \"#ef5b9c\",\n",
       "                \"#f47920\",\n",
       "                \"#905a3d\",\n",
       "                \"#fab27b\",\n",
       "                \"#2a5caa\",\n",
       "                \"#444693\",\n",
       "                \"#726930\",\n",
       "                \"#b2d235\",\n",
       "                \"#6d8346\",\n",
       "                \"#ac6767\",\n",
       "                \"#1d953f\",\n",
       "                \"#6950a1\",\n",
       "                \"#918597\",\n",
       "                \"#f6f5ec\"\n",
       "            ],\n",
       "            \"legend\": [\n",
       "                {\n",
       "                    \"data\": [\n",
       "                        \"\\u6625\\u5b63\",\n",
       "                        \"\\u590f\\u5b63\",\n",
       "                        \"\\u79cb\\u5b63\",\n",
       "                        \"\\u51ac\\u5b63\"\n",
       "                    ],\n",
       "                    \"selectedMode\": \"multiple\",\n",
       "                    \"show\": true,\n",
       "                    \"left\": \"center\",\n",
       "                    \"top\": \"top\",\n",
       "                    \"orient\": \"horizontal\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"series\": [\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u6625\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        96,\n",
       "                        70,\n",
       "                        95,\n",
       "                        78,\n",
       "                        13,\n",
       "                        40\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 1137908\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u590f\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        52,\n",
       "                        32,\n",
       "                        89,\n",
       "                        48,\n",
       "                        55,\n",
       "                        78\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 1137908\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u79cb\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        49,\n",
       "                        37,\n",
       "                        12,\n",
       "                        92,\n",
       "                        11,\n",
       "                        15\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 1137908\n",
       "                },\n",
       "                {\n",
       "                    \"type\": \"bar\",\n",
       "                    \"name\": \"\\u51ac\\u5b63\",\n",
       "                    \"data\": [\n",
       "                        42,\n",
       "                        33,\n",
       "                        81,\n",
       "                        69,\n",
       "                        34,\n",
       "                        35\n",
       "                    ],\n",
       "                    \"barCategoryGap\": \"20%\",\n",
       "                    \"label\": {\n",
       "                        \"normal\": {\n",
       "                            \"show\": false,\n",
       "                            \"position\": \"top\",\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        },\n",
       "                        \"emphasis\": {\n",
       "                            \"show\": true,\n",
       "                            \"textStyle\": {\n",
       "                                \"fontSize\": 12\n",
       "                            }\n",
       "                        }\n",
       "                    },\n",
       "                    \"markPoint\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"markLine\": {\n",
       "                        \"data\": []\n",
       "                    },\n",
       "                    \"seriesId\": 1137908\n",
       "                }\n",
       "            ],\n",
       "            \"title\": [\n",
       "                {\n",
       "                    \"text\": \"2016 \\u5e74\\u9500\\u91cf\",\n",
       "                    \"subtext\": \"\\u6570\\u636e\\u7eaf\\u5c5e\\u865a\\u6784\",\n",
       "                    \"left\": \"auto\",\n",
       "                    \"top\": \"auto\",\n",
       "                    \"textStyle\": {\n",
       "                        \"fontSize\": 18\n",
       "                    },\n",
       "                    \"subtextStyle\": {\n",
       "                        \"fontSize\": 12\n",
       "                    }\n",
       "                }\n",
       "            ],\n",
       "            \"tooltip\": {\n",
       "                \"trigger\": \"item\",\n",
       "                \"triggerOn\": \"mousemove|click\",\n",
       "                \"axisPointer\": {\n",
       "                    \"type\": \"line\"\n",
       "                },\n",
       "                \"textStyle\": {\n",
       "                    \"fontSize\": 14\n",
       "                },\n",
       "                \"backgroundColor\": \"rgba(50,50,50,0.7)\",\n",
       "                \"borderColor\": \"#333\",\n",
       "                \"borderWidth\": 0\n",
       "            }\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "myChart_6744e34898a840daab4a7ebbf7ffcfeb.setOption(option_6744e34898a840daab4a7ebbf7ffcfeb);\n",
       "\n",
       "    });\n",
       "</script>\n"
      ],
      "text/plain": [
       "<pyecharts.custom.timeline.Timeline at 0x1a2139db00>"
      ]
     },
     "execution_count": 66,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import Bar, Timeline\n",
    "from random import randint\n",
    "\n",
    "attr = [\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"]\n",
    "bar_1 = Bar(\"2012 年销量\", \"数据纯属虚构\")\n",
    "bar_1.add(\"春季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_1.add(\"夏季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_1.add(\"秋季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_1.add(\"冬季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "\n",
    "bar_2 = Bar(\"2013 年销量\", \"数据纯属虚构\")\n",
    "bar_2.add(\"春季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_2.add(\"夏季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_2.add(\"秋季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_2.add(\"冬季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "\n",
    "bar_3 = Bar(\"2014 年销量\", \"数据纯属虚构\")\n",
    "bar_3.add(\"春季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_3.add(\"夏季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_3.add(\"秋季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_3.add(\"冬季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "\n",
    "bar_4 = Bar(\"2015 年销量\", \"数据纯属虚构\")\n",
    "bar_4.add(\"春季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_4.add(\"夏季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_4.add(\"秋季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_4.add(\"冬季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "\n",
    "bar_5 = Bar(\"2016 年销量\", \"数据纯属虚构\")\n",
    "bar_5.add(\"春季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_5.add(\"夏季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_5.add(\"秋季\", attr, [randint(10, 100) for _ in range(6)])\n",
    "bar_5.add(\"冬季\", attr, [randint(10, 100) for _ in range(6)], is_legend_show=True)\n",
    "\n",
    "timeline = Timeline(is_auto_play=True,\n",
    "                    timeline_bottom=0,\n",
    "                    timeline_play_interval=800  # 每800ms播放一张\n",
    "                   )\n",
    "\n",
    "timeline.add(bar_1, '2012 年')\n",
    "timeline.add(bar_2, '2013 年')\n",
    "timeline.add(bar_3, '2014 年')\n",
    "timeline.add(bar_4, '2015 年')\n",
    "timeline.add(bar_5, '2016 年')\n",
    "timeline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}