bricks/docs/ai.old/pie.md

ChartPie

ChartPie 是一个基于 ECharts 的饼图控件，用于可视化展示分类数据的占比情况。属于普通控件，继承自 EchartsExt 控件。

---

主要方法

• setup_options(data)
  根据传入的数据 data 和控件配置项（如 nameField, valueFields 等）生成符合 ECharts 饼图格式的图表选项对象（options），供底层 ECharts 渲染使用。

• render()
  （继承自 EchartsExt）调用 setup_options 生成配置，并初始化或更新 ECharts 实例进行图表渲染。

• loadData()
  （继承自 JsWidget 基类）从 data_url 指定的接口加载数据，成功后触发 render 方法重新绘制图表。

---

主要事件

• element_click
  当用户点击饼图中的某个扇形区域时触发，携带被点击项的数据信息（如 name, value）作为事件参数，可用于联动其他组件或弹窗提示。

示例：点击某分类扇形后，通过事件绑定刷新表格内容，显示该分类的详细数据。

---

源码例子

{
  "id": "chart_pie_sales",
  "widgettype": "ChartPie",
  "options": {
    "title": "销售类别占比",                   // 图表标题
    "description": "各产品类别的销售额分布",     // 描述信息（可选）
    "legend": {                               // 图例配置
      "orient": "vertical",
      "left": "right"
    },
    "nameField": "category",                  // 数据中表示名称的字段
    "valueFields": ["sales"],                 // 数据中表示值的字段数组（饼图只支持一个）
    "pie_options": {                          // 自定义饼图系列配置
      "radius": "70%",
      "center": ["50%", "50%"],
      "label": {
        "show": true,
        "formatter": "{b}: {d}%"
      }
    },
    "data_url": "/api/report/sales-by-category",  // 获取数据的API地址
    "data_params": {                            // 请求参数
      "period": "Q3"
    },
    "width": "600px",
    "height": "400px"
  },
  "binds": [
    {
      "actiontype": "event",
      "wid": "chart_pie_sales",
      "event": "element_click",
      "target": "table_detail_panel",
      "dispatch_event": "refresh_data",
      "params": {
        "source": "chart_pie_sales"
      },
      "datawidget": "chart_pie_sales",
      "datamethod": "getValue",
      "dataparams": {},
      "rtdata": {
        "action": "filter_by_category"
      }
    },
    {
      "actiontype": "urlwidget",
      "wid": "chart_pie_sales",
      "event": "init",
      "target": "Popup",
      "options": {
        "url": "/views/popup/loading.ui",
        "method": "GET"
      },
      "mode": "replace",
      "rtdata": {
        "message": "正在加载饼图数据..."
      }
    }
  ]
}

✅ 注释说明：

• 此控件在初始化时会从 /api/report/sales-by-category?period=Q3 加载数据；
• 使用 nameField 和 valueFields 映射数据字段，构建饼图数据结构；
• 用户点击某个扇区时，派发 refresh_data 事件给 ID 为 table_detail_panel 的控件，实现联动；
• 同时绑定了 init 事件，在初始化阶段弹出一个加载提示窗口（通过 Popup 目标）；
• 支持国际化、动态参数和远程模板加载，体现 bricks 框架的模块化能力。