图表组件
图表组件的外壳与皮肤、配色、数据呈现，以及「图表配置」对话框中 27 种图表样式和 10 个配置页签的说明。
概述
图表组件用于趋势、对比、占比等可视化。它复用报表设计器的图表配置能力：右栏管组件外壳、皮肤、配色和数据呈现，图表本身的数据字段、系列、坐标轴等在「图表配置」对话框里编辑，数据来源统一是大屏数据集。
功能入口
- 添加：左栏「资源库」>「基础组件」>「图表」分组，预设有趋势折线、柱状对比、环形占比、横向排行、仪表盘、雷达画像、漏斗转化、玫瑰占比、辉光折线、3D 柱状、晶体柱状。
- 组件属性：选中图表 > 右栏「组件」>「内容设置」。
- 图表本身：「内容设置」里的「图表配置」段，点击「编辑图表配置（数据 / 系列 / 样式）」打开「图表配置」对话框。
操作步骤
给图表接数据
- 选中图表，在「内容设置」点击「编辑图表配置（数据 / 系列 / 样式）」。
- 在对话框「数据」页签的「图表类型」里选类型，「数据集」里选大屏数据集。
- 按图表类型填字段：折线与柱状选「类别字段(X轴)」；在「系列配置模式」选「字段值」（系列名来自某个字段的取值，适合动态系列）或「字段名」（手工指定系列名，每个系列对应一个数据字段）。
- 「字段名」模式下在「系列配置」里逐行添加：系列名称、数据字段、汇总方式。「字段值」模式下选「系列名称字段」「数据字段」「汇总方式」。
- 关闭对话框，修改会自动回写到组件（有 300 毫秒防抖）。
用变量过滤图表数据
- 在「内容设置」>「颜色与其他」的「变量过滤」里添加一条：「数据字段」选数据集中的列，「变量」选页面变量，比较符选「等于」或「不等于」。
- 变量有值时，图表只显示满足条件的行；变量无值时显示全部数据。
属性/参数说明
组件属性
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 组件标题、副标题、头部标记 | 图表头部文案，可绑定数据 | 文本 |
| 标题对齐 | 头部文案对齐 | 左对齐、居中、右对齐 |
| 外观样式 | 组件外壳风格 | 玻璃、面板、极简、驾驶舱 |
| 图表皮肤 | 渲染时叠加的图表风格，不修改图表配置 | 发光、3D 柱、真3D柱、真3D散点、经典 |
| 配色方案 | 图表系列配色 | 跟随主题、海洋蓝、极光绿、暖阳橙、紫罗兰、多彩、智能配色（应用智能配色后出现） |
| 显示图例 | 是否显示图例 | 显示/隐藏 |
| 图例位置 | 仅显示图例时可选 | 上、下、左、右 |
| 数据轮播 | 自动循环高亮各数据点并弹出提示框 | 开启/关闭 |
| 数值标签 | 在柱、折线系列上显示数值 | 显示/隐藏 |
| 网格线 | 直角坐标系网格线，饼图等无轴图表自动跳过 | 显示/隐藏 |
| X 轴标签角度 | 类目标签旋转，缓解重叠 | 0°、30°、45°、60° |
| Y 轴单位 | Y 轴名称 | 文本，例如 万元、% |
| 内边距 | 组件内留白 | 数值 |
| 背景色、边框色、辉光色、标题色、副标题色 | 外壳与文字颜色 | 颜色 |
| 空状态文案 | 没有数据时显示的文字 | 文本 |
| 变量过滤 | 用页面变量筛选已取回的数据行，前端过滤，不参与取数 | 见上文 |
说明：「真3D柱」「真3D散点」基于 WebGL，WebGL 不可用时自动降级；「3D 柱」基于 Three.js 立体柱。
图表类型
「图表配置」>「数据」>「图表类型」下拉共 27 种样式，分三组：
| 分组 | 样式 |
|---|---|
| 基础图表 | 基础折线图、堆叠折线图、面积折线图、堆叠面积折线图；基础柱状图、堆叠柱状图、基础条形图、堆叠条形图；基础饼图、环形图、南丁格尔玫瑰图；散点图、气泡图、涟漪散点图 |
| 统计图表 | 多边形雷达图、圆形雷达图；基础仪表盘、进度仪表盘；漏斗图；箱型图 |
| 其他图表 | 树图、矩形树图、旭日图、K线图、热力图、平行坐标、主题河流 |
「图表配置」页签
对话框的页签按图表类型显示，最多 10 个：
| 页签 | 内容 |
|---|---|
| 数据 | 图表类型、数据集、字段与系列配置。汇总方式可选：求和、计数、平均值、最大值、最小值、首个、最后一个、去重计数 |
| 图例 | 显示图例、图例位置（顶部、底部）、布局方向（水平、垂直）、图标宽高与间距、文字大小与颜色 |
| 标签 | 显示标签、标签位置（顶部、左侧、右侧、底部、内部、内部左侧、内部右侧、内部顶部、内部底部、中心）、字体大小、颜色、粗细、标签格式、旋转、偏移、对齐、背景 |
| 系列 | 按图表类型分组：折线（平滑曲线、标记点、线条宽度、阶梯线图、连接空数据、堆叠标识、采样方式）、柱状（柱子宽度与间距、类目间距、圆角半径等）、饼图（内外半径、起始角度）、散点、漏斗（排序、对齐、间距）、仪表盘（最小值、最大值、半径）、箱线图、K线图（上涨与下跌颜色）等 |
| 坐标轴 | 显示 X 轴、X 轴名称、标签旋转角度、显示 Y 轴、Y 轴名称，以及轴线、刻度、标签的样式 |
| 网格 | 显示网格，上、右、下、左边距 |
| 提示框 | 触发方式（坐标轴触发、数据项触发、不触发）、背景与边框颜色、文字 |
| 动画 | 启用动画、动画时长（毫秒） |
| 雷达 | 半径、起始角度、分割段数，仅雷达图 |
| 热力 | 最小值与最大值颜色、坐标系类型（直角坐标系、地理坐标系、日历坐标系），仅热力图 |
示例
做一张「各科室就诊量」柱状图，数据集 科室就诊 含 dept、visits 两列：
- 拖入「柱状对比」预设，打开「图表配置」。
- 「数据集」选
科室就诊，「类别字段(X轴)」选dept。 - 「系列配置模式」选「字段名」，添加一行：系列名称
就诊量，数据字段visits，汇总方式「求和」。 - 回到右栏，「配色方案」选「暖阳橙」，打开「数值标签」，「Y 轴单位」填
人次。
预期：五根柱子按科室排列，柱顶显示数值，Y 轴单位为「人次」。预览时点击柱子，本屏按 dept 过滤；右键柱子有「查看「内科」的明细」。
注意事项
注意：图表的数据源类型在大屏中固定为「数据集」，没有单元格数据源。
提示：选中图表后颜色不好统一时，用「画布」页签的「智能配色」一次改全屏图表配色，见主题与套件。
提示：图表发出「点击数据项」事件，可用于联动与交互蓝图，见交互与联动。
