{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# ECharts 图表\n",
    "\n",
    "使用 [ECharts](https://echarts.apache.org/) 创建图表的元素。通过更改 `options` 属性可以向图表推送更新。数据变更后，调用 `update` 方法刷新图表。\n",
    "\n",
    "- `options`: EChart 选项的字典\n",
    "- `on_click_point`: 点击点时调用的回调函数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x27d3834a9d0>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "from random import random\n",
    "\n",
    "echart = ui.echart({\n",
    "    'xAxis': {'type': 'value'},\n",
    "    'yAxis': {'type': 'category', 'data': ['A', 'B'], 'inverse': True},\n",
    "    'legend': {'textStyle': {'color': 'gray'}},\n",
    "    'series': [\n",
    "        {'type': 'bar', 'name': 'Alpha', 'data': [0.1, 0.2]},\n",
    "        {'type': 'bar', 'name': 'Beta', 'data': [0.3, 0.4]},\n",
    "    ],\n",
    "})\n",
    "\n",
    "def update():\n",
    "    echart.options['series'][0]['data'][0] = random()\n",
    "    echart.update()\n",
    "\n",
    "ui.button('Update', on_click=update)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 可点击的点\n",
    "\n",
    "您可以注册回调函数，用于处理点击序列点时的事件。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.echart.EChart at 0x27d25184b50>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.echart({\n",
    "    'xAxis': {'type': 'category'},\n",
    "    'yAxis': {'type': 'value'},\n",
    "    'series': [{'type': 'line', 'data': [20, 10, 30, 50, 40, 30]}],\n",
    "}, on_point_click=ui.notify)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 动态属性\n",
    "\n",
    "可以将动态属性传递给图表元素以自定义它们，例如应用轴标签格式。要使属性动态化，请在属性名称前加上冒号`\":\"`。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.echart.EChart at 0x27d24010dd0>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.echart({\n",
    "    'xAxis': {'type': 'category'},\n",
    "    'yAxis': {'axisLabel': {':formatter': 'value => \"$\" + value'}},\n",
    "    'series': [{'type': 'line', 'data': [5, 8, 13, 21, 34, 55]}],\n",
    "})\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `EChart` 元素\n",
    "\n",
    "您可以使用`from_pyecharts`方法从`pyecharts`对象创建`EChart`元素。要定义动态选项，如格式化函数，可以使用`pyecharts.commons.utils`中的`JsCode`类。或者，您可以使用冒号`\":\"`前缀属性名称，表示该值是JavaScript表达式。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```python\n",
    "from nicegui import ui\n",
    "from pyecharts.charts import Bar\n",
    "from pyecharts.commons.utils import JsCode\n",
    "from pyecharts.options import AxisOpts\n",
    "\n",
    "ui.echart.from_pyecharts(\n",
    "    Bar()\n",
    "    .add_xaxis(['A', 'B', 'C'])\n",
    "    .add_yaxis('ratio', [1, 2, 4])\n",
    "    .set_global_opts(\n",
    "        xaxis_opts=AxisOpts(axislabel_opts={\n",
    "            ':formatter': r'(val, idx) => `group ${val}`',\n",
    "        }),\n",
    "        yaxis_opts=AxisOpts(axislabel_opts={\n",
    "            'formatter': JsCode(r'(val, idx) => `${val}%`'),\n",
    "        }),\n",
    "    )\n",
    ")\n",
    "\n",
    "ui.run()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 运行方法\n",
    "\n",
    "您可以使用`run_chart_method`方法运行EChart实例的方法。这个演示展示了如何显示和隐藏加载动画，如何获取图表的当前宽度，以及如何使用自定义格式化器添加提示工具。\n",
    "\n",
    "方法名`\"setOption\"`前面的冒号`\":\"`表示该参数是一个JavaScript表达式，在传递给方法之前会在客户端进行求值。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```python\n",
    "from nicegui import ui\n",
    "\n",
    "echart = ui.echart({\n",
    "    'xAxis': {'type': 'category', 'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},\n",
    "    'yAxis': {'type': 'value'},\n",
    "    'series': [{'type': 'line', 'data': [150, 230, 224, 218, 135]}],\n",
    "})\n",
    "\n",
    "ui.button('Show Loading', on_click=lambda: echart.run_chart_method('showLoading'))\n",
    "ui.button('Hide Loading', on_click=lambda: echart.run_chart_method('hideLoading'))\n",
    "\n",
    "async def get_width():\n",
    "    width = await echart.run_chart_method('getWidth')\n",
    "    ui.notify(f'Width: {width}')\n",
    "ui.button('Get Width', on_click=get_width)\n",
    "\n",
    "ui.button('Set Tooltip', on_click=lambda: echart.run_chart_method(\n",
    "    ':setOption', r'{tooltip: {formatter: params => \"$\" + params.value}}',\n",
    "))\n",
    "\n",
    "ui.run()\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 任意图表事件\n",
    "\n",
    "您可以使用`on`方法以及`\"chart:\"`前缀为图表注册任意事件监听器。这个演示展示了如何为`\"selectchanged\"`事件注册回调函数，该事件在用户选择点时触发。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.echart({\n",
    "    'toolbox': {'feature': {'brush': {'type': ['rect']}}},\n",
    "    'brush': {},\n",
    "    'xAxis': {'type': 'category'},\n",
    "    'yAxis': {'type': 'value'},\n",
    "    'series': [{'type': 'line', 'data': [1, 2, 3]}],\n",
    "}).on('chart:selectchanged', lambda e: label.set_text(\n",
    "    f'Selected point {e.args[\"fromActionPayload\"][\"dataIndexInside\"]}'\n",
    "))\n",
    "label = ui.label()\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "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.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}