一、老板要的"大屏"，其实是入门题

几乎每个新手都会遇到这个需求："给领导做个数据看板，有图表、有数字、能刷新。"传统做法要先选一个图表库，研究它的引入方式、容器尺寸、自适应缩放，再手写数据接口和刷新逻辑。而对于刚入行的你来说，这套东西每一环都能卡半天。

geejing WebBuilder 快速开发平台的答案是：图表就是一个组件（Wb.Chart），往页面里一放，把 ECharts 的配置粘进去，图就出来了。平台「示例 → basic → dashboard」就是一个现成的仪表盘。

二、先看效果：一张仪表盘长什么样

打开示例，你会看到一张深色背景的数据看板：面积图、折线图、柱状图、环形百分比图、仪表盘、玫瑰图、饼图，中间还嵌着一张可以翻页的员工数据表格。

这不是设计稿，是真实运行界面。重点在于：这一整屏由一个模块（dashboard.xwl）描述，每个图格就是一个 Wb.Chart 组件，中间的表格就是你在第一篇文章学过的 Wb.Grid。组件拼装的思路，和做表单、做列表完全一致。

三、核心三步：容器、option、数据

1. 图表组件的骨架

每个图表在模块里就是这样一段配置：

cls: Wb.Chart
properties:
  cid: stackedAreaChart
  option: |
    ({
      color: ['#80FFA5', '#00DDFF', ...],
      tooltip: { trigger: 'axis' },
      xAxis: [{ type: 'category',
        data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] }],
      yAxis: [{ type: 'value' }],
      series: [{ name: 'Line 1', type: 'line', ... }]
    })

option 的内容就是标准的 ECharts 配置——你在 ECharts 官网示例库看到的任何一段配置，几乎都可以原样粘进来。平台做了三件事：替你引入了 ECharts 库、替你管好了容器尺寸（窗口缩放图表自动重绘）、把 option 从字符串解析成对象（所以两边各包了一层括号）。

2. 好看的颜色不是玄学，是渐变

示例里面积图为什么那么"高级"？因为用了 ECharts 的渐变填充：

areaStyle: {
  opacity: 0.8,
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: 'rgb(128, 255, 165)' },
    { offset: 1, color: 'rgb(1, 191, 236)' }
  ])
}

这段代码也是从 ECharts 官方示例直接搬来的。用 WebBuilder 快速开发平台做图表，你的知识投资全部落在 ECharts 这个通用技能上，不会被平台私有语法锁死。

3. 图表和表格混排

仪表盘中间那张 Staff List 表格，配置和你已经学会的 Grid 一模一样：url 指向数据接口，服务端分页自动生效。图表负责"看趋势"，表格负责"看明细"，两者摆进同一个 Viewport，用布局属性排好位置，一张看板就成了。

四、进阶：让图表动起来

静态图表只能交作业，会刷新的图表才算产品。思路很简单：定时（或事件触发）重新请求接口，然后更新 option 再重绘：

Wb.ajax({
  url: xpath + '/data',
  success(resp) {
    let chart = app.stackedAreaChart;
    chart.option.series[0].data = resp.today;
    chart.update();
  }
});

• app.xxx：在设计器里给组件起了 cid，脚本里就能拿到它；

• option 是普通对象，想改哪个数据就改哪个；

• update() 通知图表重绘。

配合窗口组件做"钻取"也很自然：给图表加一个点击事件，用户点了饼图的某一块，就弹窗显示那部分的明细表格——事件、窗口、表格

五、动手练习：十五分钟做出你的第一块看板

1. 打开「示例 → basic → dashboard」，把每个图表的 option 和运行效果对照看一遍；

1. 打开「开发套件 → 集成开发环境」，新建自己的模块，拖入 Viewport 和 Wb.Chart；

1. 去 ECharts 官网示例库挑一个喜欢的图，复制 option 粘进来，运行看效果；

1. 把 option 里的假数据换成一个服务端接口返回的真实数据（先用 dashboard 的接口练习）；

1. 加入一张 Grid，和图表并排，完成你的第一块图文并茂的看板。

你会发现：难的部分（绘图、缩放、兼容）平台和 ECharts 都替你做完了，你只剩"数据长什么样"这一件事。这正是 geejing WebBuilder 快速开发平台对新手最友好的地方——每一层复杂度都有人替你兜底，你只需要一层一层往下剥。