23_多图形组合成一个界面.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--BOOK_INFORMATION-->\n",
    "<a href=\"https://user-images.githubusercontent.com/19553554/71825144-2d568180-30d6-11ea-8ee0-63c849cfd934.png\" target=\"_blank\"><img align=\"left\" style=\"width: 76px; height: 100px; background: white; padding: 1px; border: 1px solid black; margin-right:10px;\"></a>\n",
    "*pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。用 Echarts 生成的图可视化效果非常棒，为了与 Python 进行对接，方便在 Python 中直接使用数据生成图，于是有人开发出了这个项目[GitHub](https://github.com/pyecharts/pyecharts) .*\n",
    "\n",
    "*Note.建议本程序在参看https://github.com/pyecharts/pyecharts 的安装步骤后再运行； 本程序所有的例子都是从官方提供的样例代码[GitHub](https://github.com/pyecharts/pyecharts-gallery)中提取的,如果对某个API有疑问建议在IDE里面查看*\n",
    "\n",
    "*Echart类型图种大全:https://echarts.apache.org/examples/zh/#chart-type-line pyecharts图导入到ppt中的方法:https://baijiahao.baidu.com/s?id=1663839456876951842&wfr=spider&for=pc.*\n",
    "\n",
    "*作者: LBQ; 时间:2020/7/24. 邮箱:779660843@qq.com*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# XXIII.多图形组合成一个界面(Page)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"79a8b9f075d54591bb2e7cd9192cb94c\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"817e850e791d4fbb8945a5987e089bda\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"a265c0f1d69f41a8987a2db616318020\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"ba690763ccb84673990315b9879d907b\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"dcf8ddc9214b49ac90eb95e87eef164e\" style=\"width:900px; height:500px;\"></div>\n",
       "                <style>\n",
       "            .fl-table {\n",
       "                margin: 20px;\n",
       "                border-radius: 5px;\n",
       "                font-size: 12px;\n",
       "                border: none;\n",
       "                border-collapse: collapse;\n",
       "                max-width: 100%;\n",
       "                white-space: nowrap;\n",
       "                word-break: keep-all;\n",
       "            }\n",
       "\n",
       "            .fl-table th {\n",
       "                text-align: left;\n",
       "                font-size: 20px;\n",
       "            }\n",
       "\n",
       "            .fl-table tr {\n",
       "                display: table-row;\n",
       "                vertical-align: inherit;\n",
       "                border-color: inherit;\n",
       "            }\n",
       "\n",
       "            .fl-table tr:hover td {\n",
       "                background: #00d1b2;\n",
       "                color: #F8F8F8;\n",
       "            }\n",
       "\n",
       "            .fl-table td, .fl-table th {\n",
       "                border-style: none;\n",
       "                border-top: 1px solid #dbdbdb;\n",
       "                border-left: 1px solid #dbdbdb;\n",
       "                border-bottom: 3px solid #dbdbdb;\n",
       "                border-right: 1px solid #dbdbdb;\n",
       "                padding: .5em .55em;\n",
       "                font-size: 15px;\n",
       "            }\n",
       "\n",
       "            .fl-table td {\n",
       "                border-style: none;\n",
       "                font-size: 15px;\n",
       "                vertical-align: center;\n",
       "                border-bottom: 1px solid #dbdbdb;\n",
       "                border-left: 1px solid #dbdbdb;\n",
       "                border-right: 1px solid #dbdbdb;\n",
       "                height: 30px;\n",
       "            }\n",
       "\n",
       "            .fl-table tr:nth-child(even) {\n",
       "                background: #F8F8F8;\n",
       "            }\n",
       "        </style>\n",
       "        <div id=\"a4d48e00f0224b76b190e9784f0e402f\" class=\"chart-container\" style=\"\">\n",
       "            <p class=\"title\" style=\"font-size: 18px; font-weight:bold;\" > Table</p>\n",
       "            <p class=\"subtitle\" style=\"font-size: 12px;\" > </p>\n",
       "            <table class=\"fl-table\">\n",
       "    <tr>\n",
       "        <th>City name</th>\n",
       "        <th>Area</th>\n",
       "        <th>Population</th>\n",
       "        <th>Annual Rainfall</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Brisbane</td>\n",
       "        <td>5905</td>\n",
       "        <td>1857594</td>\n",
       "        <td>1146.4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Adelaide</td>\n",
       "        <td>1295</td>\n",
       "        <td>1158259</td>\n",
       "        <td>600.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Darwin</td>\n",
       "        <td>112</td>\n",
       "        <td>120900</td>\n",
       "        <td>1714.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Hobart</td>\n",
       "        <td>1357</td>\n",
       "        <td>205556</td>\n",
       "        <td>619.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Sydney</td>\n",
       "        <td>2058</td>\n",
       "        <td>4336374</td>\n",
       "        <td>1214.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Melbourne</td>\n",
       "        <td>1566</td>\n",
       "        <td>3806092</td>\n",
       "        <td>646.9</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Perth</td>\n",
       "        <td>5386</td>\n",
       "        <td>1554769</td>\n",
       "        <td>869.4</td>\n",
       "    </tr>\n",
       "</table>\n",
       "        </div>\n",
       "\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_79a8b9f075d54591bb2e7cd9192cb94c = echarts.init(\n",
       "                    document.getElementById('79a8b9f075d54591bb2e7cd9192cb94c'), 'white', {renderer: 'canvas'});\n",
       "                var option_79a8b9f075d54591bb2e7cd9192cb94c = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                3,\n",
       "                22,\n",
       "                15,\n",
       "                3,\n",
       "                8,\n",
       "                30,\n",
       "                2,\n",
       "                21,\n",
       "                5,\n",
       "                20,\n",
       "                9,\n",
       "                10,\n",
       "                1,\n",
       "                27,\n",
       "                5,\n",
       "                7,\n",
       "                17,\n",
       "                28,\n",
       "                30,\n",
       "                22,\n",
       "                10,\n",
       "                1,\n",
       "                25,\n",
       "                7,\n",
       "                19,\n",
       "                26,\n",
       "                11,\n",
       "                30,\n",
       "                30,\n",
       "                10\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"0\\u5929\",\n",
       "                \"1\\u5929\",\n",
       "                \"2\\u5929\",\n",
       "                \"3\\u5929\",\n",
       "                \"4\\u5929\",\n",
       "                \"5\\u5929\",\n",
       "                \"6\\u5929\",\n",
       "                \"7\\u5929\",\n",
       "                \"8\\u5929\",\n",
       "                \"9\\u5929\",\n",
       "                \"10\\u5929\",\n",
       "                \"11\\u5929\",\n",
       "                \"12\\u5929\",\n",
       "                \"13\\u5929\",\n",
       "                \"14\\u5929\",\n",
       "                \"15\\u5929\",\n",
       "                \"16\\u5929\",\n",
       "                \"17\\u5929\",\n",
       "                \"18\\u5929\",\n",
       "                \"19\\u5929\",\n",
       "                \"20\\u5929\",\n",
       "                \"21\\u5929\",\n",
       "                \"22\\u5929\",\n",
       "                \"23\\u5929\",\n",
       "                \"24\\u5929\",\n",
       "                \"25\\u5929\",\n",
       "                \"26\\u5929\",\n",
       "                \"27\\u5929\",\n",
       "                \"28\\u5929\",\n",
       "                \"29\\u5929\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-DataZoom\\uff08slider-\\u6c34\\u5e73\\uff09\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_79a8b9f075d54591bb2e7cd9192cb94c.setOption(option_79a8b9f075d54591bb2e7cd9192cb94c);\n",
       "                var chart_817e850e791d4fbb8945a5987e089bda = echarts.init(\n",
       "                    document.getElementById('817e850e791d4fbb8945a5987e089bda'), 'white', {renderer: 'canvas'});\n",
       "                var option_817e850e791d4fbb8945a5987e089bda = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"connectNulls\": false,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5468\\u4e00\",\n",
       "                    95\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e8c\",\n",
       "                    111\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e09\",\n",
       "                    101\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u56db\",\n",
       "                    29\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e94\",\n",
       "                    94\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u516d\",\n",
       "                    131\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u65e5\",\n",
       "                    23\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"min\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"connectNulls\": false,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u5468\\u4e00\",\n",
       "                    40\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e8c\",\n",
       "                    53\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e09\",\n",
       "                    88\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u56db\",\n",
       "                    42\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u4e94\",\n",
       "                    64\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u516d\",\n",
       "                    149\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5468\\u65e5\",\n",
       "                    66\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"max\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\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",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Line-MarkPoint\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_817e850e791d4fbb8945a5987e089bda.setOption(option_817e850e791d4fbb8945a5987e089bda);\n",
       "                var chart_a265c0f1d69f41a8987a2db616318020 = echarts.init(\n",
       "                    document.getElementById('a265c0f1d69f41a8987a2db616318020'), 'white', {renderer: 'canvas'});\n",
       "                var option_a265c0f1d69f41a8987a2db616318020 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"clockwise\": true,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u54c8\\u58eb\\u5947\",\n",
       "                    \"value\": 88\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u8428\\u6469\\u8036\",\n",
       "                    \"value\": 43\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6cf0\\u8fea\",\n",
       "                    \"value\": 27\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u91d1\\u6bdb\",\n",
       "                    \"value\": 87\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u7267\\u7f8a\\u72ac\",\n",
       "                    \"value\": 71\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5409\\u5a03\\u5a03\",\n",
       "                    \"value\": 51\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u67ef\\u57fa\",\n",
       "                    \"value\": 143\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"30%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"25%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"roseType\": \"radius\",\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"clockwise\": true,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u54c8\\u58eb\\u5947\",\n",
       "                    \"value\": 58\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u8428\\u6469\\u8036\",\n",
       "                    \"value\": 128\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6cf0\\u8fea\",\n",
       "                    \"value\": 74\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u91d1\\u6bdb\",\n",
       "                    \"value\": 55\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u7267\\u7f8a\\u72ac\",\n",
       "                    \"value\": 133\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5409\\u5a03\\u5a03\",\n",
       "                    \"value\": 74\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u67ef\\u57fa\",\n",
       "                    \"value\": 122\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"30%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"75%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"roseType\": \"area\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u54c8\\u58eb\\u5947\",\n",
       "                \"\\u8428\\u6469\\u8036\",\n",
       "                \"\\u6cf0\\u8fea\",\n",
       "                \"\\u91d1\\u6bdb\",\n",
       "                \"\\u7267\\u7f8a\\u72ac\",\n",
       "                \"\\u5409\\u5a03\\u5a03\",\n",
       "                \"\\u67ef\\u57fa\"\n",
       "            ],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Pie-\\u73ab\\u7470\\u56fe\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_a265c0f1d69f41a8987a2db616318020.setOption(option_a265c0f1d69f41a8987a2db616318020);\n",
       "                var chart_ba690763ccb84673990315b9879d907b = echarts.init(\n",
       "                    document.getElementById('ba690763ccb84673990315b9879d907b'), 'white', {renderer: 'canvas'});\n",
       "                var option_ba690763ccb84673990315b9879d907b = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#5793f3\",\n",
       "        \"#d14a61\",\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\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",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"legendHoverLink\": true,\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",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6\",\n",
       "            \"connectNulls\": false,\n",
       "            \"yAxisIndex\": 2,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\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",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf\",\n",
       "                \"\\u964d\\u6c34\\u91cf\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u84b8\\u53d1\\u91cf\": true,\n",
       "                \"\\u964d\\u6c34\\u91cf\": true,\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"axis\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"cross\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\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",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#5793f3\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 80,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#d14a61\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u6e29\\u5ea6\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#675bba\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} \\u00b0C\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"left\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 25,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-\\u591a Y \\u8f74\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"5%\",\n",
       "            \"right\": \"20%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_ba690763ccb84673990315b9879d907b.setOption(option_ba690763ccb84673990315b9879d907b);\n",
       "                var chart_dcf8ddc9214b49ac90eb95e87eef164e = echarts.init(\n",
       "                    document.getElementById('dcf8ddc9214b49ac90eb95e87eef164e'), 'white', {renderer: 'canvas'});\n",
       "                var option_dcf8ddc9214b49ac90eb95e87eef164e = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3254\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50,\n",
       "                \"formatter\": function (param) {                        return (Math.floor(param.value * 10000) / 100) + '%';                    }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-\\u6570\\u636e\\u7cbe\\u5ea6\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_dcf8ddc9214b49ac90eb95e87eef164e.setOption(option_dcf8ddc9214b49ac90eb95e87eef164e);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f0c103d50f0>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie\n",
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.components import Table\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "\n",
    "def bar_datazoom_slider() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis(Faker.days_attrs)\n",
    "        .add_yaxis(\"商家A\", Faker.days_values)\n",
    "        .set_global_opts(\n",
    "            title_opts=opts.TitleOpts(title=\"Bar-DataZoom（slider-水平）\"),\n",
    "            datazoom_opts=[opts.DataZoomOpts()],\n",
    "        )\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def line_markpoint() -> Line:\n",
    "    c = (\n",
    "        Line()\n",
    "        .add_xaxis(Faker.choose())\n",
    "        .add_yaxis(\n",
    "            \"商家A\",\n",
    "            Faker.values(),\n",
    "            markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_=\"min\")]),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"商家B\",\n",
    "            Faker.values(),\n",
    "            markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_=\"max\")]),\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Line-MarkPoint\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def pie_rosetype() -> Pie:\n",
    "    v = Faker.choose()\n",
    "    c = (\n",
    "        Pie()\n",
    "        .add(\n",
    "            \"\",\n",
    "            [list(z) for z in zip(v, Faker.values())],\n",
    "            radius=[\"30%\", \"75%\"],\n",
    "            center=[\"25%\", \"50%\"],\n",
    "            rosetype=\"radius\",\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add(\n",
    "            \"\",\n",
    "            [list(z) for z in zip(v, Faker.values())],\n",
    "            radius=[\"30%\", \"75%\"],\n",
    "            center=[\"75%\", \"50%\"],\n",
    "            rosetype=\"area\",\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Pie-玫瑰图示例\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def grid_mutil_yaxis() -> Grid:\n",
    "    x_data = [\"{}月\".format(i) for i in range(1, 13)]\n",
    "    bar = (\n",
    "        Bar()\n",
    "        .add_xaxis(x_data)\n",
    "        .add_yaxis(\n",
    "            \"蒸发量\",\n",
    "            [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",
    "            yaxis_index=0,\n",
    "            color=\"#d14a61\",\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"降水量\",\n",
    "            [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",
    "            yaxis_index=1,\n",
    "            color=\"#5793f3\",\n",
    "        )\n",
    "        .extend_axis(\n",
    "            yaxis=opts.AxisOpts(\n",
    "                name=\"蒸发量\",\n",
    "                type_=\"value\",\n",
    "                min_=0,\n",
    "                max_=250,\n",
    "                position=\"right\",\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#d14a61\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "            )\n",
    "        )\n",
    "        .extend_axis(\n",
    "            yaxis=opts.AxisOpts(\n",
    "                type_=\"value\",\n",
    "                name=\"温度\",\n",
    "                min_=0,\n",
    "                max_=25,\n",
    "                position=\"left\",\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#675bba\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} °C\"),\n",
    "                splitline_opts=opts.SplitLineOpts(\n",
    "                    is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)\n",
    "                ),\n",
    "            )\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                name=\"降水量\",\n",
    "                min_=0,\n",
    "                max_=250,\n",
    "                position=\"right\",\n",
    "                offset=80,\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#5793f3\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "            ),\n",
    "            title_opts=opts.TitleOpts(title=\"Grid-多 Y 轴示例\"),\n",
    "            tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"cross\"),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    line = (\n",
    "        Line()\n",
    "        .add_xaxis(x_data)\n",
    "        .add_yaxis(\n",
    "            \"平均温度\",\n",
    "            [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",
    "            yaxis_index=2,\n",
    "            color=\"#675bba\",\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    bar.overlap(line)\n",
    "    return Grid().add(\n",
    "        bar, opts.GridOpts(pos_left=\"5%\", pos_right=\"20%\"), is_control_axis_index=True\n",
    "    )\n",
    "\n",
    "\n",
    "def liquid_data_precision() -> Liquid:\n",
    "    c = (\n",
    "        Liquid()\n",
    "        .add(\n",
    "            \"lq\",\n",
    "            [0.3254],\n",
    "            label_opts=opts.LabelOpts(\n",
    "                font_size=50,\n",
    "                formatter=JsCode(\n",
    "                    \"\"\"function (param) {\n",
    "                        return (Math.floor(param.value * 10000) / 100) + '%';\n",
    "                    }\"\"\"\n",
    "                ),\n",
    "                position=\"inside\",\n",
    "            ),\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-数据精度\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def table_base() -> Table:\n",
    "    table = Table()\n",
    "\n",
    "    headers = [\"City name\", \"Area\", \"Population\", \"Annual Rainfall\"]\n",
    "    rows = [\n",
    "        [\"Brisbane\", 5905, 1857594, 1146.4],\n",
    "        [\"Adelaide\", 1295, 1158259, 600.5],\n",
    "        [\"Darwin\", 112, 120900, 1714.7],\n",
    "        [\"Hobart\", 1357, 205556, 619.5],\n",
    "        [\"Sydney\", 2058, 4336374, 1214.8],\n",
    "        [\"Melbourne\", 1566, 3806092, 646.9],\n",
    "        [\"Perth\", 5386, 1554769, 869.4],\n",
    "    ]\n",
    "    table.add(headers, rows).set_global_opts(\n",
    "        title_opts=opts.ComponentTitleOpts(title=\"Table\")\n",
    "    )\n",
    "    return table\n",
    "\n",
    "\n",
    "def page_default_layout():\n",
    "    page = Page()\n",
    "    page.add(\n",
    "        bar_datazoom_slider(),\n",
    "        line_markpoint(),\n",
    "        pie_rosetype(),\n",
    "        grid_mutil_yaxis(),\n",
    "        liquid_data_precision(),\n",
    "        table_base(),\n",
    "    )\n",
    "    #page.render(\"page_default_layout.html\")\n",
    "    return page\n",
    "\n",
    "pg1 = page_default_layout()\n",
    "pg1.load_javascript()\n",
    "pg1.render_notebook()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"5825a1a2e7cd4aef839d998fd92962e2\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"091c6c6590804a7fac2227105fcaa22f\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"862f3c01714d414da50dd0d4f11d5aa7\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"89f6f39218db4c38afb683772dfb07e5\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"c4a384ae0b2f4715a31c4c1c8301059c\" style=\"width:900px; height:500px;\"></div>\n",
       "                <style>\n",
       "            .fl-table {\n",
       "                margin: 20px;\n",
       "                border-radius: 5px;\n",
       "                font-size: 12px;\n",
       "                border: none;\n",
       "                border-collapse: collapse;\n",
       "                max-width: 100%;\n",
       "                white-space: nowrap;\n",
       "                word-break: keep-all;\n",
       "            }\n",
       "\n",
       "            .fl-table th {\n",
       "                text-align: left;\n",
       "                font-size: 20px;\n",
       "            }\n",
       "\n",
       "            .fl-table tr {\n",
       "                display: table-row;\n",
       "                vertical-align: inherit;\n",
       "                border-color: inherit;\n",
       "            }\n",
       "\n",
       "            .fl-table tr:hover td {\n",
       "                background: #00d1b2;\n",
       "                color: #F8F8F8;\n",
       "            }\n",
       "\n",
       "            .fl-table td, .fl-table th {\n",
       "                border-style: none;\n",
       "                border-top: 1px solid #dbdbdb;\n",
       "                border-left: 1px solid #dbdbdb;\n",
       "                border-bottom: 3px solid #dbdbdb;\n",
       "                border-right: 1px solid #dbdbdb;\n",
       "                padding: .5em .55em;\n",
       "                font-size: 15px;\n",
       "            }\n",
       "\n",
       "            .fl-table td {\n",
       "                border-style: none;\n",
       "                font-size: 15px;\n",
       "                vertical-align: center;\n",
       "                border-bottom: 1px solid #dbdbdb;\n",
       "                border-left: 1px solid #dbdbdb;\n",
       "                border-right: 1px solid #dbdbdb;\n",
       "                height: 30px;\n",
       "            }\n",
       "\n",
       "            .fl-table tr:nth-child(even) {\n",
       "                background: #F8F8F8;\n",
       "            }\n",
       "        </style>\n",
       "        <div id=\"2bf0f4c0214d40f0a9a4674aeb3659e4\" class=\"chart-container\" style=\"\">\n",
       "            <p class=\"title\" style=\"font-size: 18px; font-weight:bold;\" > Table</p>\n",
       "            <p class=\"subtitle\" style=\"font-size: 12px;\" > </p>\n",
       "            <table class=\"fl-table\">\n",
       "    <tr>\n",
       "        <th>City name</th>\n",
       "        <th>Area</th>\n",
       "        <th>Population</th>\n",
       "        <th>Annual Rainfall</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Brisbane</td>\n",
       "        <td>5905</td>\n",
       "        <td>1857594</td>\n",
       "        <td>1146.4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Adelaide</td>\n",
       "        <td>1295</td>\n",
       "        <td>1158259</td>\n",
       "        <td>600.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Darwin</td>\n",
       "        <td>112</td>\n",
       "        <td>120900</td>\n",
       "        <td>1714.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Hobart</td>\n",
       "        <td>1357</td>\n",
       "        <td>205556</td>\n",
       "        <td>619.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Sydney</td>\n",
       "        <td>2058</td>\n",
       "        <td>4336374</td>\n",
       "        <td>1214.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Melbourne</td>\n",
       "        <td>1566</td>\n",
       "        <td>3806092</td>\n",
       "        <td>646.9</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Perth</td>\n",
       "        <td>5386</td>\n",
       "        <td>1554769</td>\n",
       "        <td>869.4</td>\n",
       "    </tr>\n",
       "</table>\n",
       "        </div>\n",
       "\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_5825a1a2e7cd4aef839d998fd92962e2 = echarts.init(\n",
       "                    document.getElementById('5825a1a2e7cd4aef839d998fd92962e2'), 'white', {renderer: 'canvas'});\n",
       "                var option_5825a1a2e7cd4aef839d998fd92962e2 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                3,\n",
       "                22,\n",
       "                15,\n",
       "                3,\n",
       "                8,\n",
       "                30,\n",
       "                2,\n",
       "                21,\n",
       "                5,\n",
       "                20,\n",
       "                9,\n",
       "                10,\n",
       "                1,\n",
       "                27,\n",
       "                5,\n",
       "                7,\n",
       "                17,\n",
       "                28,\n",
       "                30,\n",
       "                22,\n",
       "                10,\n",
       "                1,\n",
       "                25,\n",
       "                7,\n",
       "                19,\n",
       "                26,\n",
       "                11,\n",
       "                30,\n",
       "                30,\n",
       "                10\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"0\\u5929\",\n",
       "                \"1\\u5929\",\n",
       "                \"2\\u5929\",\n",
       "                \"3\\u5929\",\n",
       "                \"4\\u5929\",\n",
       "                \"5\\u5929\",\n",
       "                \"6\\u5929\",\n",
       "                \"7\\u5929\",\n",
       "                \"8\\u5929\",\n",
       "                \"9\\u5929\",\n",
       "                \"10\\u5929\",\n",
       "                \"11\\u5929\",\n",
       "                \"12\\u5929\",\n",
       "                \"13\\u5929\",\n",
       "                \"14\\u5929\",\n",
       "                \"15\\u5929\",\n",
       "                \"16\\u5929\",\n",
       "                \"17\\u5929\",\n",
       "                \"18\\u5929\",\n",
       "                \"19\\u5929\",\n",
       "                \"20\\u5929\",\n",
       "                \"21\\u5929\",\n",
       "                \"22\\u5929\",\n",
       "                \"23\\u5929\",\n",
       "                \"24\\u5929\",\n",
       "                \"25\\u5929\",\n",
       "                \"26\\u5929\",\n",
       "                \"27\\u5929\",\n",
       "                \"28\\u5929\",\n",
       "                \"29\\u5929\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-DataZoom\\uff08slider-\\u6c34\\u5e73\\uff09\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_5825a1a2e7cd4aef839d998fd92962e2.setOption(option_5825a1a2e7cd4aef839d998fd92962e2);\n",
       "                var chart_091c6c6590804a7fac2227105fcaa22f = echarts.init(\n",
       "                    document.getElementById('091c6c6590804a7fac2227105fcaa22f'), 'white', {renderer: 'canvas'});\n",
       "                var option_091c6c6590804a7fac2227105fcaa22f = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"connectNulls\": false,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u54c8\\u58eb\\u5947\",\n",
       "                    57\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u8428\\u6469\\u8036\",\n",
       "                    139\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u6cf0\\u8fea\",\n",
       "                    122\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u91d1\\u6bdb\",\n",
       "                    76\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u7267\\u7f8a\\u72ac\",\n",
       "                    33\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5409\\u5a03\\u5a03\",\n",
       "                    71\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u67ef\\u57fa\",\n",
       "                    21\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"min\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"connectNulls\": false,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u54c8\\u58eb\\u5947\",\n",
       "                    84\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u8428\\u6469\\u8036\",\n",
       "                    65\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u6cf0\\u8fea\",\n",
       "                    51\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u91d1\\u6bdb\",\n",
       "                    119\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u7267\\u7f8a\\u72ac\",\n",
       "                    112\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5409\\u5a03\\u5a03\",\n",
       "                    36\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u67ef\\u57fa\",\n",
       "                    116\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"max\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u54c8\\u58eb\\u5947\",\n",
       "                \"\\u8428\\u6469\\u8036\",\n",
       "                \"\\u6cf0\\u8fea\",\n",
       "                \"\\u91d1\\u6bdb\",\n",
       "                \"\\u7267\\u7f8a\\u72ac\",\n",
       "                \"\\u5409\\u5a03\\u5a03\",\n",
       "                \"\\u67ef\\u57fa\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Line-MarkPoint\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_091c6c6590804a7fac2227105fcaa22f.setOption(option_091c6c6590804a7fac2227105fcaa22f);\n",
       "                var chart_862f3c01714d414da50dd0d4f11d5aa7 = echarts.init(\n",
       "                    document.getElementById('862f3c01714d414da50dd0d4f11d5aa7'), 'white', {renderer: 'canvas'});\n",
       "                var option_862f3c01714d414da50dd0d4f11d5aa7 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"clockwise\": true,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u6cb3\\u9a6c\",\n",
       "                    \"value\": 74\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u87d2\\u86c7\",\n",
       "                    \"value\": 68\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u8001\\u864e\",\n",
       "                    \"value\": 80\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5927\\u8c61\",\n",
       "                    \"value\": 128\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5154\\u5b50\",\n",
       "                    \"value\": 30\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u718a\\u732b\",\n",
       "                    \"value\": 89\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u72ee\\u5b50\",\n",
       "                    \"value\": 105\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"30%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"25%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"roseType\": \"radius\",\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"clockwise\": true,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u6cb3\\u9a6c\",\n",
       "                    \"value\": 47\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u87d2\\u86c7\",\n",
       "                    \"value\": 28\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u8001\\u864e\",\n",
       "                    \"value\": 38\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5927\\u8c61\",\n",
       "                    \"value\": 120\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5154\\u5b50\",\n",
       "                    \"value\": 117\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u718a\\u732b\",\n",
       "                    \"value\": 87\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u72ee\\u5b50\",\n",
       "                    \"value\": 97\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"30%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"75%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"roseType\": \"area\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u6cb3\\u9a6c\",\n",
       "                \"\\u87d2\\u86c7\",\n",
       "                \"\\u8001\\u864e\",\n",
       "                \"\\u5927\\u8c61\",\n",
       "                \"\\u5154\\u5b50\",\n",
       "                \"\\u718a\\u732b\",\n",
       "                \"\\u72ee\\u5b50\"\n",
       "            ],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Pie-\\u73ab\\u7470\\u56fe\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_862f3c01714d414da50dd0d4f11d5aa7.setOption(option_862f3c01714d414da50dd0d4f11d5aa7);\n",
       "                var chart_89f6f39218db4c38afb683772dfb07e5 = echarts.init(\n",
       "                    document.getElementById('89f6f39218db4c38afb683772dfb07e5'), 'white', {renderer: 'canvas'});\n",
       "                var option_89f6f39218db4c38afb683772dfb07e5 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#5793f3\",\n",
       "        \"#d14a61\",\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\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",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"legendHoverLink\": true,\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",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6\",\n",
       "            \"connectNulls\": false,\n",
       "            \"yAxisIndex\": 2,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\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",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf\",\n",
       "                \"\\u964d\\u6c34\\u91cf\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u84b8\\u53d1\\u91cf\": true,\n",
       "                \"\\u964d\\u6c34\\u91cf\": true,\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"axis\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"cross\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\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",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#5793f3\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 80,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#d14a61\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u6e29\\u5ea6\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#675bba\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} \\u00b0C\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"left\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 25,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-\\u591a Y \\u8f74\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"5%\",\n",
       "            \"right\": \"20%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_89f6f39218db4c38afb683772dfb07e5.setOption(option_89f6f39218db4c38afb683772dfb07e5);\n",
       "                var chart_c4a384ae0b2f4715a31c4c1c8301059c = echarts.init(\n",
       "                    document.getElementById('c4a384ae0b2f4715a31c4c1c8301059c'), 'white', {renderer: 'canvas'});\n",
       "                var option_c4a384ae0b2f4715a31c4c1c8301059c = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3254\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50,\n",
       "                \"formatter\": function (param) {                        return (Math.floor(param.value * 10000) / 100) + '%';                    }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-\\u6570\\u636e\\u7cbe\\u5ea6\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_c4a384ae0b2f4715a31c4c1c8301059c.setOption(option_c4a384ae0b2f4715a31c4c1c8301059c);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f0c1040a908>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie\n",
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.components import Table\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "\n",
    "def bar_datazoom_slider() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis(Faker.days_attrs)\n",
    "        .add_yaxis(\"商家A\", Faker.days_values)\n",
    "        .set_global_opts(\n",
    "            title_opts=opts.TitleOpts(title=\"Bar-DataZoom（slider-水平）\"),\n",
    "            datazoom_opts=[opts.DataZoomOpts()],\n",
    "        )\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def line_markpoint() -> Line:\n",
    "    c = (\n",
    "        Line()\n",
    "        .add_xaxis(Faker.choose())\n",
    "        .add_yaxis(\n",
    "            \"商家A\",\n",
    "            Faker.values(),\n",
    "            markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_=\"min\")]),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"商家B\",\n",
    "            Faker.values(),\n",
    "            markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_=\"max\")]),\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Line-MarkPoint\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def pie_rosetype() -> Pie:\n",
    "    v = Faker.choose()\n",
    "    c = (\n",
    "        Pie()\n",
    "        .add(\n",
    "            \"\",\n",
    "            [list(z) for z in zip(v, Faker.values())],\n",
    "            radius=[\"30%\", \"75%\"],\n",
    "            center=[\"25%\", \"50%\"],\n",
    "            rosetype=\"radius\",\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add(\n",
    "            \"\",\n",
    "            [list(z) for z in zip(v, Faker.values())],\n",
    "            radius=[\"30%\", \"75%\"],\n",
    "            center=[\"75%\", \"50%\"],\n",
    "            rosetype=\"area\",\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Pie-玫瑰图示例\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def grid_mutil_yaxis() -> Grid:\n",
    "    x_data = [\"{}月\".format(i) for i in range(1, 13)]\n",
    "    bar = (\n",
    "        Bar()\n",
    "        .add_xaxis(x_data)\n",
    "        .add_yaxis(\n",
    "            \"蒸发量\",\n",
    "            [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",
    "            yaxis_index=0,\n",
    "            color=\"#d14a61\",\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"降水量\",\n",
    "            [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",
    "            yaxis_index=1,\n",
    "            color=\"#5793f3\",\n",
    "        )\n",
    "        .extend_axis(\n",
    "            yaxis=opts.AxisOpts(\n",
    "                name=\"蒸发量\",\n",
    "                type_=\"value\",\n",
    "                min_=0,\n",
    "                max_=250,\n",
    "                position=\"right\",\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#d14a61\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "            )\n",
    "        )\n",
    "        .extend_axis(\n",
    "            yaxis=opts.AxisOpts(\n",
    "                type_=\"value\",\n",
    "                name=\"温度\",\n",
    "                min_=0,\n",
    "                max_=25,\n",
    "                position=\"left\",\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#675bba\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} °C\"),\n",
    "                splitline_opts=opts.SplitLineOpts(\n",
    "                    is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)\n",
    "                ),\n",
    "            )\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                name=\"降水量\",\n",
    "                min_=0,\n",
    "                max_=250,\n",
    "                position=\"right\",\n",
    "                offset=80,\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#5793f3\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "            ),\n",
    "            title_opts=opts.TitleOpts(title=\"Grid-多 Y 轴示例\"),\n",
    "            tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"cross\"),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    line = (\n",
    "        Line()\n",
    "        .add_xaxis(x_data)\n",
    "        .add_yaxis(\n",
    "            \"平均温度\",\n",
    "            [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",
    "            yaxis_index=2,\n",
    "            color=\"#675bba\",\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    bar.overlap(line)\n",
    "    return Grid().add(\n",
    "        bar, opts.GridOpts(pos_left=\"5%\", pos_right=\"20%\"), is_control_axis_index=True\n",
    "    )\n",
    "\n",
    "\n",
    "def liquid_data_precision() -> Liquid:\n",
    "    c = (\n",
    "        Liquid()\n",
    "        .add(\n",
    "            \"lq\",\n",
    "            [0.3254],\n",
    "            label_opts=opts.LabelOpts(\n",
    "                font_size=50,\n",
    "                formatter=JsCode(\n",
    "                    \"\"\"function (param) {\n",
    "                        return (Math.floor(param.value * 10000) / 100) + '%';\n",
    "                    }\"\"\"\n",
    "                ),\n",
    "                position=\"inside\",\n",
    "            ),\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-数据精度\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def table_base() -> Table:\n",
    "    table = Table()\n",
    "\n",
    "    headers = [\"City name\", \"Area\", \"Population\", \"Annual Rainfall\"]\n",
    "    rows = [\n",
    "        [\"Brisbane\", 5905, 1857594, 1146.4],\n",
    "        [\"Adelaide\", 1295, 1158259, 600.5],\n",
    "        [\"Darwin\", 112, 120900, 1714.7],\n",
    "        [\"Hobart\", 1357, 205556, 619.5],\n",
    "        [\"Sydney\", 2058, 4336374, 1214.8],\n",
    "        [\"Melbourne\", 1566, 3806092, 646.9],\n",
    "        [\"Perth\", 5386, 1554769, 869.4],\n",
    "    ]\n",
    "    table.add(headers, rows).set_global_opts(\n",
    "        title_opts=opts.ComponentTitleOpts(title=\"Table\")\n",
    "    )\n",
    "    return table\n",
    "\n",
    "\n",
    "def page_draggable_layout():\n",
    "    page = Page(layout=Page.DraggablePageLayout)\n",
    "    page.add(\n",
    "        bar_datazoom_slider(),\n",
    "        line_markpoint(),\n",
    "        pie_rosetype(),\n",
    "        grid_mutil_yaxis(),\n",
    "        liquid_data_precision(),\n",
    "        table_base(),\n",
    "    )\n",
    "    return page\n",
    "\n",
    "pg2 = page_default_layout()\n",
    "pg2.load_javascript()\n",
    "pg2.render_notebook()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/composite_charts/grid.py:17: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n",
      "/home/fisadm/anaconda3/envs/detectron2/lib/python3.7/site-packages/pyecharts/charts/chart.py:14: PendingDeprecationWarning: pyecharts 所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 :)\n",
      "  super().__init__(init_opts=init_opts)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"824117a853ed4970ae9a1236ba6eecd3\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"b96799090a864c3bb858e3f2f39e67b5\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"90b087b8bbb54c628859eb6e1f5276c8\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"d9a31a7404174a7d9e2109252bc0c303\" style=\"width:900px; height:500px;\"></div>\n",
       "        <div id=\"6eacb32984f34fdfafc0c002dd9b5757\" style=\"width:900px; height:500px;\"></div>\n",
       "                <style>\n",
       "            .fl-table {\n",
       "                margin: 20px;\n",
       "                border-radius: 5px;\n",
       "                font-size: 12px;\n",
       "                border: none;\n",
       "                border-collapse: collapse;\n",
       "                max-width: 100%;\n",
       "                white-space: nowrap;\n",
       "                word-break: keep-all;\n",
       "            }\n",
       "\n",
       "            .fl-table th {\n",
       "                text-align: left;\n",
       "                font-size: 20px;\n",
       "            }\n",
       "\n",
       "            .fl-table tr {\n",
       "                display: table-row;\n",
       "                vertical-align: inherit;\n",
       "                border-color: inherit;\n",
       "            }\n",
       "\n",
       "            .fl-table tr:hover td {\n",
       "                background: #00d1b2;\n",
       "                color: #F8F8F8;\n",
       "            }\n",
       "\n",
       "            .fl-table td, .fl-table th {\n",
       "                border-style: none;\n",
       "                border-top: 1px solid #dbdbdb;\n",
       "                border-left: 1px solid #dbdbdb;\n",
       "                border-bottom: 3px solid #dbdbdb;\n",
       "                border-right: 1px solid #dbdbdb;\n",
       "                padding: .5em .55em;\n",
       "                font-size: 15px;\n",
       "            }\n",
       "\n",
       "            .fl-table td {\n",
       "                border-style: none;\n",
       "                font-size: 15px;\n",
       "                vertical-align: center;\n",
       "                border-bottom: 1px solid #dbdbdb;\n",
       "                border-left: 1px solid #dbdbdb;\n",
       "                border-right: 1px solid #dbdbdb;\n",
       "                height: 30px;\n",
       "            }\n",
       "\n",
       "            .fl-table tr:nth-child(even) {\n",
       "                background: #F8F8F8;\n",
       "            }\n",
       "        </style>\n",
       "        <div id=\"9e26d95d7e224a2f8701ac8512b5fdde\" class=\"chart-container\" style=\"\">\n",
       "            <p class=\"title\" style=\"font-size: 18px; font-weight:bold;\" > Table</p>\n",
       "            <p class=\"subtitle\" style=\"font-size: 12px;\" > </p>\n",
       "            <table class=\"fl-table\">\n",
       "    <tr>\n",
       "        <th>City name</th>\n",
       "        <th>Area</th>\n",
       "        <th>Population</th>\n",
       "        <th>Annual Rainfall</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Brisbane</td>\n",
       "        <td>5905</td>\n",
       "        <td>1857594</td>\n",
       "        <td>1146.4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Adelaide</td>\n",
       "        <td>1295</td>\n",
       "        <td>1158259</td>\n",
       "        <td>600.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Darwin</td>\n",
       "        <td>112</td>\n",
       "        <td>120900</td>\n",
       "        <td>1714.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Hobart</td>\n",
       "        <td>1357</td>\n",
       "        <td>205556</td>\n",
       "        <td>619.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Sydney</td>\n",
       "        <td>2058</td>\n",
       "        <td>4336374</td>\n",
       "        <td>1214.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Melbourne</td>\n",
       "        <td>1566</td>\n",
       "        <td>3806092</td>\n",
       "        <td>646.9</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "        <td>Perth</td>\n",
       "        <td>5386</td>\n",
       "        <td>1554769</td>\n",
       "        <td>869.4</td>\n",
       "    </tr>\n",
       "</table>\n",
       "        </div>\n",
       "\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_824117a853ed4970ae9a1236ba6eecd3 = echarts.init(\n",
       "                    document.getElementById('824117a853ed4970ae9a1236ba6eecd3'), 'white', {renderer: 'canvas'});\n",
       "                var option_824117a853ed4970ae9a1236ba6eecd3 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"legendHoverLink\": true,\n",
       "            \"data\": [\n",
       "                3,\n",
       "                22,\n",
       "                15,\n",
       "                3,\n",
       "                8,\n",
       "                30,\n",
       "                2,\n",
       "                21,\n",
       "                5,\n",
       "                20,\n",
       "                9,\n",
       "                10,\n",
       "                1,\n",
       "                27,\n",
       "                5,\n",
       "                7,\n",
       "                17,\n",
       "                28,\n",
       "                30,\n",
       "                22,\n",
       "                10,\n",
       "                1,\n",
       "                25,\n",
       "                7,\n",
       "                19,\n",
       "                26,\n",
       "                11,\n",
       "                30,\n",
       "                30,\n",
       "                10\n",
       "            ],\n",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"0\\u5929\",\n",
       "                \"1\\u5929\",\n",
       "                \"2\\u5929\",\n",
       "                \"3\\u5929\",\n",
       "                \"4\\u5929\",\n",
       "                \"5\\u5929\",\n",
       "                \"6\\u5929\",\n",
       "                \"7\\u5929\",\n",
       "                \"8\\u5929\",\n",
       "                \"9\\u5929\",\n",
       "                \"10\\u5929\",\n",
       "                \"11\\u5929\",\n",
       "                \"12\\u5929\",\n",
       "                \"13\\u5929\",\n",
       "                \"14\\u5929\",\n",
       "                \"15\\u5929\",\n",
       "                \"16\\u5929\",\n",
       "                \"17\\u5929\",\n",
       "                \"18\\u5929\",\n",
       "                \"19\\u5929\",\n",
       "                \"20\\u5929\",\n",
       "                \"21\\u5929\",\n",
       "                \"22\\u5929\",\n",
       "                \"23\\u5929\",\n",
       "                \"24\\u5929\",\n",
       "                \"25\\u5929\",\n",
       "                \"26\\u5929\",\n",
       "                \"27\\u5929\",\n",
       "                \"28\\u5929\",\n",
       "                \"29\\u5929\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Bar-DataZoom\\uff08slider-\\u6c34\\u5e73\\uff09\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"dataZoom\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"type\": \"slider\",\n",
       "            \"realtime\": true,\n",
       "            \"start\": 20,\n",
       "            \"end\": 80,\n",
       "            \"orient\": \"horizontal\",\n",
       "            \"zoomLock\": false,\n",
       "            \"filterMode\": \"filter\"\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_824117a853ed4970ae9a1236ba6eecd3.setOption(option_824117a853ed4970ae9a1236ba6eecd3);\n",
       "                var chart_b96799090a864c3bb858e3f2f39e67b5 = echarts.init(\n",
       "                    document.getElementById('b96799090a864c3bb858e3f2f39e67b5'), 'white', {renderer: 'canvas'});\n",
       "                var option_b96799090a864c3bb858e3f2f39e67b5 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6A\",\n",
       "            \"connectNulls\": false,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u6cb3\\u9a6c\",\n",
       "                    95\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u87d2\\u86c7\",\n",
       "                    118\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u8001\\u864e\",\n",
       "                    107\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5927\\u8c61\",\n",
       "                    41\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5154\\u5b50\",\n",
       "                    65\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u718a\\u732b\",\n",
       "                    46\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u72ee\\u5b50\",\n",
       "                    52\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"min\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5546\\u5bb6B\",\n",
       "            \"connectNulls\": false,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\n",
       "            \"data\": [\n",
       "                [\n",
       "                    \"\\u6cb3\\u9a6c\",\n",
       "                    133\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u87d2\\u86c7\",\n",
       "                    97\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u8001\\u864e\",\n",
       "                    118\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5927\\u8c61\",\n",
       "                    121\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u5154\\u5b50\",\n",
       "                    26\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u718a\\u732b\",\n",
       "                    97\n",
       "                ],\n",
       "                [\n",
       "                    \"\\u72ee\\u5b50\",\n",
       "                    150\n",
       "                ]\n",
       "            ],\n",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"markPoint\": {\n",
       "                \"label\": {\n",
       "                    \"show\": true,\n",
       "                    \"position\": \"inside\",\n",
       "                    \"color\": \"#fff\",\n",
       "                    \"margin\": 8\n",
       "                },\n",
       "                \"data\": [\n",
       "                    {\n",
       "                        \"type\": \"max\"\n",
       "                    }\n",
       "                ]\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u5546\\u5bb6A\",\n",
       "                \"\\u5546\\u5bb6B\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u5546\\u5bb6A\": true,\n",
       "                \"\\u5546\\u5bb6B\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            },\n",
       "            \"data\": [\n",
       "                \"\\u6cb3\\u9a6c\",\n",
       "                \"\\u87d2\\u86c7\",\n",
       "                \"\\u8001\\u864e\",\n",
       "                \"\\u5927\\u8c61\",\n",
       "                \"\\u5154\\u5b50\",\n",
       "                \"\\u718a\\u732b\",\n",
       "                \"\\u72ee\\u5b50\"\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Line-MarkPoint\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_b96799090a864c3bb858e3f2f39e67b5.setOption(option_b96799090a864c3bb858e3f2f39e67b5);\n",
       "                var chart_90b087b8bbb54c628859eb6e1f5276c8 = echarts.init(\n",
       "                    document.getElementById('90b087b8bbb54c628859eb6e1f5276c8'), 'white', {renderer: 'canvas'});\n",
       "                var option_90b087b8bbb54c628859eb6e1f5276c8 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"clockwise\": true,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u53ef\\u4e50\",\n",
       "                    \"value\": 68\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u96ea\\u78a7\",\n",
       "                    \"value\": 26\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6a59\\u6c41\",\n",
       "                    \"value\": 64\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u7eff\\u8336\",\n",
       "                    \"value\": 80\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5976\\u8336\",\n",
       "                    \"value\": 20\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u767e\\u5a01\",\n",
       "                    \"value\": 110\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u9752\\u5c9b\",\n",
       "                    \"value\": 43\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"30%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"25%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"roseType\": \"radius\",\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"pie\",\n",
       "            \"clockwise\": true,\n",
       "            \"data\": [\n",
       "                {\n",
       "                    \"name\": \"\\u53ef\\u4e50\",\n",
       "                    \"value\": 84\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u96ea\\u78a7\",\n",
       "                    \"value\": 66\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u6a59\\u6c41\",\n",
       "                    \"value\": 37\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u7eff\\u8336\",\n",
       "                    \"value\": 64\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u5976\\u8336\",\n",
       "                    \"value\": 84\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u767e\\u5a01\",\n",
       "                    \"value\": 142\n",
       "                },\n",
       "                {\n",
       "                    \"name\": \"\\u9752\\u5c9b\",\n",
       "                    \"value\": 107\n",
       "                }\n",
       "            ],\n",
       "            \"radius\": [\n",
       "                \"30%\",\n",
       "                \"75%\"\n",
       "            ],\n",
       "            \"center\": [\n",
       "                \"75%\",\n",
       "                \"50%\"\n",
       "            ],\n",
       "            \"roseType\": \"area\",\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u53ef\\u4e50\",\n",
       "                \"\\u96ea\\u78a7\",\n",
       "                \"\\u6a59\\u6c41\",\n",
       "                \"\\u7eff\\u8336\",\n",
       "                \"\\u5976\\u8336\",\n",
       "                \"\\u767e\\u5a01\",\n",
       "                \"\\u9752\\u5c9b\"\n",
       "            ],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Pie-\\u73ab\\u7470\\u56fe\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_90b087b8bbb54c628859eb6e1f5276c8.setOption(option_90b087b8bbb54c628859eb6e1f5276c8);\n",
       "                var chart_d9a31a7404174a7d9e2109252bc0c303 = echarts.init(\n",
       "                    document.getElementById('d9a31a7404174a7d9e2109252bc0c303'), 'white', {renderer: 'canvas'});\n",
       "                var option_d9a31a7404174a7d9e2109252bc0c303 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#5793f3\",\n",
       "        \"#d14a61\",\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"yAxisIndex\": 0,\n",
       "            \"legendHoverLink\": true,\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",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"bar\",\n",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"yAxisIndex\": 1,\n",
       "            \"legendHoverLink\": true,\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",
       "            \"showBackground\": false,\n",
       "            \"barMinHeight\": 0,\n",
       "            \"barCategoryGap\": \"20%\",\n",
       "            \"barGap\": \"30%\",\n",
       "            \"large\": false,\n",
       "            \"largeThreshold\": 400,\n",
       "            \"seriesLayoutBy\": \"column\",\n",
       "            \"datasetIndex\": 0,\n",
       "            \"clip\": true,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"line\",\n",
       "            \"name\": \"\\u5e73\\u5747\\u6e29\\u5ea6\",\n",
       "            \"connectNulls\": false,\n",
       "            \"yAxisIndex\": 2,\n",
       "            \"symbolSize\": 4,\n",
       "            \"showSymbol\": true,\n",
       "            \"smooth\": false,\n",
       "            \"clip\": true,\n",
       "            \"step\": false,\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",
       "            \"hoverAnimation\": true,\n",
       "            \"label\": {\n",
       "                \"show\": false,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8\n",
       "            },\n",
       "            \"lineStyle\": {\n",
       "                \"show\": true,\n",
       "                \"width\": 1,\n",
       "                \"opacity\": 1,\n",
       "                \"curveness\": 0,\n",
       "                \"type\": \"solid\"\n",
       "            },\n",
       "            \"areaStyle\": {\n",
       "                \"opacity\": 0\n",
       "            },\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 0\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                \"\\u84b8\\u53d1\\u91cf\",\n",
       "                \"\\u964d\\u6c34\\u91cf\",\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\"\n",
       "            ],\n",
       "            \"selected\": {\n",
       "                \"\\u84b8\\u53d1\\u91cf\": true,\n",
       "                \"\\u964d\\u6c34\\u91cf\": true,\n",
       "                \"\\u5e73\\u5747\\u6e29\\u5ea6\": true\n",
       "            },\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"axis\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"cross\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"xAxis\": [\n",
       "        {\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"inverse\": false,\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\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",
       "            \"name\": \"\\u964d\\u6c34\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#5793f3\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 80,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u84b8\\u53d1\\u91cf\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#d14a61\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} ml\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"right\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 250,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": false,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"value\",\n",
       "            \"name\": \"\\u6e29\\u5ea6\",\n",
       "            \"show\": true,\n",
       "            \"scale\": false,\n",
       "            \"nameLocation\": \"end\",\n",
       "            \"nameGap\": 15,\n",
       "            \"gridIndex\": 0,\n",
       "            \"axisLine\": {\n",
       "                \"show\": true,\n",
       "                \"onZero\": true,\n",
       "                \"onZeroAxisIndex\": 0,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\",\n",
       "                    \"color\": \"#675bba\"\n",
       "                }\n",
       "            },\n",
       "            \"axisLabel\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"top\",\n",
       "                \"margin\": 8,\n",
       "                \"formatter\": \"{value} \\u00b0C\"\n",
       "            },\n",
       "            \"inverse\": false,\n",
       "            \"position\": \"left\",\n",
       "            \"offset\": 0,\n",
       "            \"splitNumber\": 5,\n",
       "            \"min\": 0,\n",
       "            \"max\": 25,\n",
       "            \"minInterval\": 0,\n",
       "            \"splitLine\": {\n",
       "                \"show\": true,\n",
       "                \"lineStyle\": {\n",
       "                    \"show\": true,\n",
       "                    \"width\": 1,\n",
       "                    \"opacity\": 1,\n",
       "                    \"curveness\": 0,\n",
       "                    \"type\": \"solid\"\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Grid-\\u591a Y \\u8f74\\u793a\\u4f8b\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"left\": \"5%\",\n",
       "            \"right\": \"20%\",\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_d9a31a7404174a7d9e2109252bc0c303.setOption(option_d9a31a7404174a7d9e2109252bc0c303);\n",
       "                var chart_6eacb32984f34fdfafc0c002dd9b5757 = echarts.init(\n",
       "                    document.getElementById('6eacb32984f34fdfafc0c002dd9b5757'), 'white', {renderer: 'canvas'});\n",
       "                var option_6eacb32984f34fdfafc0c002dd9b5757 = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\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",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3254\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50,\n",
       "                \"formatter\": function (param) {                        return (Math.floor(param.value * 10000) / 100) + '%';                    }\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-\\u6570\\u636e\\u7cbe\\u5ea6\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_6eacb32984f34fdfafc0c002dd9b5757.setOption(option_6eacb32984f34fdfafc0c002dd9b5757);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x7f0c10398358>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie\n",
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.components import Table\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "\n",
    "def bar_datazoom_slider() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis(Faker.days_attrs)\n",
    "        .add_yaxis(\"商家A\", Faker.days_values)\n",
    "        .set_global_opts(\n",
    "            title_opts=opts.TitleOpts(title=\"Bar-DataZoom（slider-水平）\"),\n",
    "            datazoom_opts=[opts.DataZoomOpts()],\n",
    "        )\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def line_markpoint() -> Line:\n",
    "    c = (\n",
    "        Line()\n",
    "        .add_xaxis(Faker.choose())\n",
    "        .add_yaxis(\n",
    "            \"商家A\",\n",
    "            Faker.values(),\n",
    "            markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_=\"min\")]),\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"商家B\",\n",
    "            Faker.values(),\n",
    "            markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_=\"max\")]),\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Line-MarkPoint\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def pie_rosetype() -> Pie:\n",
    "    v = Faker.choose()\n",
    "    c = (\n",
    "        Pie()\n",
    "        .add(\n",
    "            \"\",\n",
    "            [list(z) for z in zip(v, Faker.values())],\n",
    "            radius=[\"30%\", \"75%\"],\n",
    "            center=[\"25%\", \"50%\"],\n",
    "            rosetype=\"radius\",\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "        .add(\n",
    "            \"\",\n",
    "            [list(z) for z in zip(v, Faker.values())],\n",
    "            radius=[\"30%\", \"75%\"],\n",
    "            center=[\"75%\", \"50%\"],\n",
    "            rosetype=\"area\",\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Pie-玫瑰图示例\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def grid_mutil_yaxis() -> Grid:\n",
    "    x_data = [\"{}月\".format(i) for i in range(1, 13)]\n",
    "    bar = (\n",
    "        Bar()\n",
    "        .add_xaxis(x_data)\n",
    "        .add_yaxis(\n",
    "            \"蒸发量\",\n",
    "            [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",
    "            yaxis_index=0,\n",
    "            color=\"#d14a61\",\n",
    "        )\n",
    "        .add_yaxis(\n",
    "            \"降水量\",\n",
    "            [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",
    "            yaxis_index=1,\n",
    "            color=\"#5793f3\",\n",
    "        )\n",
    "        .extend_axis(\n",
    "            yaxis=opts.AxisOpts(\n",
    "                name=\"蒸发量\",\n",
    "                type_=\"value\",\n",
    "                min_=0,\n",
    "                max_=250,\n",
    "                position=\"right\",\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#d14a61\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "            )\n",
    "        )\n",
    "        .extend_axis(\n",
    "            yaxis=opts.AxisOpts(\n",
    "                type_=\"value\",\n",
    "                name=\"温度\",\n",
    "                min_=0,\n",
    "                max_=25,\n",
    "                position=\"left\",\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#675bba\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} °C\"),\n",
    "                splitline_opts=opts.SplitLineOpts(\n",
    "                    is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)\n",
    "                ),\n",
    "            )\n",
    "        )\n",
    "        .set_global_opts(\n",
    "            yaxis_opts=opts.AxisOpts(\n",
    "                name=\"降水量\",\n",
    "                min_=0,\n",
    "                max_=250,\n",
    "                position=\"right\",\n",
    "                offset=80,\n",
    "                axisline_opts=opts.AxisLineOpts(\n",
    "                    linestyle_opts=opts.LineStyleOpts(color=\"#5793f3\")\n",
    "                ),\n",
    "                axislabel_opts=opts.LabelOpts(formatter=\"{value} ml\"),\n",
    "            ),\n",
    "            title_opts=opts.TitleOpts(title=\"Grid-多 Y 轴示例\"),\n",
    "            tooltip_opts=opts.TooltipOpts(trigger=\"axis\", axis_pointer_type=\"cross\"),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    line = (\n",
    "        Line()\n",
    "        .add_xaxis(x_data)\n",
    "        .add_yaxis(\n",
    "            \"平均温度\",\n",
    "            [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",
    "            yaxis_index=2,\n",
    "            color=\"#675bba\",\n",
    "            label_opts=opts.LabelOpts(is_show=False),\n",
    "        )\n",
    "    )\n",
    "\n",
    "    bar.overlap(line)\n",
    "    return Grid().add(\n",
    "        bar, opts.GridOpts(pos_left=\"5%\", pos_right=\"20%\"), is_control_axis_index=True\n",
    "    )\n",
    "\n",
    "\n",
    "def liquid_data_precision() -> Liquid:\n",
    "    c = (\n",
    "        Liquid()\n",
    "        .add(\n",
    "            \"lq\",\n",
    "            [0.3254],\n",
    "            label_opts=opts.LabelOpts(\n",
    "                font_size=50,\n",
    "                formatter=JsCode(\n",
    "                    \"\"\"function (param) {\n",
    "                        return (Math.floor(param.value * 10000) / 100) + '%';\n",
    "                    }\"\"\"\n",
    "                ),\n",
    "                position=\"inside\",\n",
    "            ),\n",
    "        )\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-数据精度\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "\n",
    "def table_base() -> Table:\n",
    "    table = Table()\n",
    "\n",
    "    headers = [\"City name\", \"Area\", \"Population\", \"Annual Rainfall\"]\n",
    "    rows = [\n",
    "        [\"Brisbane\", 5905, 1857594, 1146.4],\n",
    "        [\"Adelaide\", 1295, 1158259, 600.5],\n",
    "        [\"Darwin\", 112, 120900, 1714.7],\n",
    "        [\"Hobart\", 1357, 205556, 619.5],\n",
    "        [\"Sydney\", 2058, 4336374, 1214.8],\n",
    "        [\"Melbourne\", 1566, 3806092, 646.9],\n",
    "        [\"Perth\", 5386, 1554769, 869.4],\n",
    "    ]\n",
    "    table.add(headers, rows).set_global_opts(\n",
    "        title_opts=opts.ComponentTitleOpts(title=\"Table\")\n",
    "    )\n",
    "    return table\n",
    "\n",
    "\n",
    "def page_simple_layout():\n",
    "    page = Page(layout=Page.SimplePageLayout)\n",
    "    page.add(\n",
    "        bar_datazoom_slider(),\n",
    "        line_markpoint(),\n",
    "        pie_rosetype(),\n",
    "        grid_mutil_yaxis(),\n",
    "        liquid_data_precision(),\n",
    "        table_base(),\n",
    "    )\n",
    "    return page\n",
    "\n",
    "pg2 = page_default_layout()\n",
    "pg2.load_javascript()\n",
    "pg2.render_notebook()\n",
    "\n"
   ]
  },
  {
   "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
}