|
Smartbi基础设置搞不定的图表效果？扩展属性才是真·外挂！
今天带你看透可视化配置VS扩展属性（又称自定义属性）的区别与联系，带你从“工具的操作者”，蜕变为“图表的定义者”！
一、可视化配置的本质：图形化封装的 ECharts option
核心理念：视化配置 ≠ 黑箱操作 —— 它是 ECharts option 对象的图形化封装，每一步点击，都在生成一段 JSON 代码。
ECharts 的 option 对象是一个庞大而复杂的 JavaScript 对象，option 描述了图表的一切：数据、样式、交互、动画等等。理解了它的核心构成，就等于掌握了 ECharts 的精髓。
在 Smartbi 中，当你在图表属性面板中：
- 选择“柱状图”
- 拖拽“销售额”到 Y 轴
- 设置颜色为“蓝色”
- ”调整“图例位置”到底部
……这些操作并非直接 “修改图表样式”，而是 Smartbi 在动态生成或者修改一个 ECharts option 对象中某一项的值。
当我们希望图表从"状态A"进化到"状态B"时，我们其实无需关注当前的状态到底是什么样，我们只需要组装好"状态B"的配置，并将它交付给 Echarts 即可。
配置项固然简单，但首先需要知道 “我要实现某个效果，应该去寻找什么样的配置” 。因此，学习的核心不在于死记硬背每个按钮的位置，而在于建立一种映射关系：“我想实现的效果” 对应 “ECharts option中的哪个配置项”。而ECharts的官方配置项手册，正是我们寻找这些对应关系的最佳地图。
通过图中相关对照，我们可以在官方文档的配置项手册中快速浏览相关内容的支持选项及用法。
参考链接： https://echarts.apache.org/zh/cheat-sheet.html
二、可视化配置与 ECharts option 配置项的映射
Smartbi 的可视化配置，是如何对应这些配置项的？
1.type：可视化语义的基石 —— 图表类型的本质是数据关系的编码
“type”是对数据关系的数学假设，用视觉语言做出的声明。
在 ECharts 的配置体系中，type 是 series 对象中唯一决定“图形如何被绘制”的核心指令。
它不是可选参数，而是语义的起点——没有 type，数据就只是数组；有了 type，数据才成为可被人类直觉理解的视觉符号。
当你面对一组数据，问自己三个问题：
Q1:数据是离散的，还是连续的？
→ 离散（发货区域、产品类型）→ 用 bar / pie
→ 连续（时间、数量）→ 用 line / scatter
Q2:你想表达的是“大小”、“趋势”、“占比”还是“关系”？
→ 大小 → bar
→ 趋势 → line
→ 占比 → pie
→ 关系 → scatter / graph
Q3:有多少个类别？
→ ≤7 → pie 可接受
→ >7 → 改用 bar，避免视觉失真
|
在 Smartbi 中，当你从“组件-图形”中选择“柱状图”，本质是在说：
“这些数据是按离散类别组织的，它们之间没有因果或时序依赖，我关心的是它们的绝对大小差异。”
当你从“组件-图形”中选择“折线图”，本质是在说：
“这些数据是按时间或有序序列排列的，我关心的是它们之间的变化路径。”
常见误解：type 是“图表外观”
误解
|
正解
|
“我选柱状图是因为它看起来更漂亮。”
|
❌ 错误。柱状图不是因为“好看”才被选，而是因为它能准确表达类别对比。
|
“折线图和柱状图都能看趋势，随便选一个。”
|
❌ 错误。柱状图强调“瞬间值”，折线图强调“连续性”。若数据点不连续（如季度数据），用折线图会误导人认为存在中间值。
|
“饼图能放很多类别。”
|
❌ 错误。饼图超过 7个类别后，人类视觉无法分辨扇形面积差异，此时建议改用条形图。
|
我们建议您进一步阅读我们的深度指南：
https://wiki.Smartbi.com.cn/pages/viewpage.action?smt_poid=43&pageId=151789241
该文系统梳理了图表类型的适用场景及其优缺点，帮助您建立“分析驱动选图”的专业判断力。
2.series：系列—— 可视化配置的“核心骨架”
series 是 ECharts 中最重要的配置项，没有之一。它是一个数组，数组中的每一个对象都代表一个“系列”。你可以把它理解为一组相关的数据，以及这组数据如何被可视化的规则。
✅ Smartbi 可视化配置对应：
你的操作
|
对应的 option 内容
|
拖拽“销售额”到 Y 轴
|
series[0].data: [120, 200, 150, ...]（自动提取字段值）
|
拖拽“发货区域”到 X 轴
|
xAxis.data: ['东北','华北',...]（自动绑定为类目数据）
|
添加第二个系列（如“目标”）
|
series[1].type: 'line', series[1].data: [...]（自动新增 series 对象）
|
Smartbi 中你拖拽到X轴/Y轴的字段，就是 series.data 的来源。再加上您第一步选择“柱图” → type: 'bar'三者合一，即构成一个完整的 series 对象。
一个图表中可以包含多个系列，Smartbi 配图建议里的“多度量”功能，正是 series 数组的图形化体现。这里Smartbi提供了单/双Y联合图的类型，实现每个系列会按照自己的规则（即 type）绘制成图。
3.xAxis & yAxis：坐标轴 —— 可视化配置的“空间框架”
对于绝大多数图表（如折线图、柱状图、散点图），坐标轴是必不可少的。ECharts 通过xAxis (X 轴) 和 yAxis (Y 轴) 来进行配置。它们通常成对出现，共同定义了一个「直角坐标系 (Grid)」。
坐标轴主要由「轴线、刻度、刻度标签、轴名称」等部分组成。
坐标轴的 type 是一个关键属性，它决定了坐标轴如何解析数据：
- 'value': 「数值轴」。适用于连续数据，会自动根据 series.data 的最大最小值来生成刻度。
- 'category': 「类目轴」。适用于离散的类目数据，类目数据需要通过 xAxis.data 来指定。
- 'log': 「对数轴」。适用于数据跨度非常大的情况。
✅ Smartbi 可视化配置对应：
你的操作
|
对应的 option 内容
|
拖拽“发货区域”到 X 轴
|
xAxis.type: 'category', xAxis.data: ['东北','华北',...]
|
拖拽“销售额”到 Y 轴
|
yAxis.type: 'value'（自动识别为数值轴）
|
设置“Y 轴标题”为“销售额”
|
yAxis.name: '销售额'
|
设置“X 轴刻度为“倾斜”
|
xAxis.axisLabel.rotate: 45（实际是旋转45度）
|
设置“Y 轴刻度值自定义最小值为0”
|
yAxis.min: 0
|
设置“Y 轴 开启 对数轴”
|
yAxis.type: 'log'
|
设置“X 轴分割线 显示”
|
xAxis.splitLine.show: true
|
Smartbi的“组件设置-X轴/Y轴”，就是你在直接编辑 xAxis 和 yAxis 的属性。
所有“刻度”、“标签”、“轴线”、“名称”、“范围”——全部来自您提供的 xAxis / yAxis 结构。
4.legend：图例 —— 可视化配置的“系列标识”
当图表包含多个系列时，legend (图例) 组件用于区分不同的系列。
legend 和 series 是通过 name 属性关联的。及 legend.data 需要与 series.name 对应。
✅ Smartbi 可视化配置对应：
你的操作
|
对应的 option 内容
|
图例位置设为“无图例”
|
legend.show: false
|
图例位置设为“底部”
|
legend.top: 'bottom'
|
图例名称自动匹配
|
legend.data: [series[0].name, series[1].name]（Smartbi 自动同步）
|
点击图例项，可以控制对应系列的显示和隐藏，这是 ECharts 内置的交互行为。Smartbi 完整保留了这一能力。
5.tooltip：提示框 —— 可视化配置的“交互窗口”
当鼠标悬浮到图表的数据项上时，tooltip 组件可以显示详细的数据信息，这是图表交互的重要一环。
✅ Smartbi 可视化配置对应：
你的操作
|
对应的 option 内容
|
开启/关闭提示框显示
|
tooltip.show: true / false
|
设置提示框背景颜色
|
tooltip.backgroundColor: ' rgba(144,19,254,1)'
|
设置边框宽度
|
tooltip.borderWidth: 1
|
Smartbi 不仅封装了 ECharts 的 tooltip，更进行了扩展，允许用户引用非 series.data 的额外数据字段（如维度聚合值、计算字段、总和、占比等），并支持样式级自定义（颜色、字体、边框等）。及可以拖拽字段到标记区的提示区域，拖入的字段无法在option中获取到。
三、扩展属性：直接书写 option
当Smartbi为你隐藏复杂性，它也悄悄收起了部分自由。当你在“组件设置”里反复尝试却找不到某些选项时或者 “选项灰色”无法点击时，不要怀疑自己，而是意识到：你已触达 Smartbi 的可视化边界。
打开「自定义属性」，直接书写 ECharts 的 option 原生结构。在这里，你可以直接覆盖或补充 ECharts 的 option 对象，以任何形式注入原生配置项——哪怕 Smartbi 的图形界面从未暴露过它。
示例：Tooltip —— 不只是“显示数据”，而是“重构信息叙事”
Smartbi 的提示（tooltip）默认仅能配置一些背景，字体，边框等，默认的提示框样式无法满足业务信息的传达需求时，可以通过 扩展属性 使用 tooltip.formatter 来自定义提示框的显示内容，从而使其能够展示更丰富、更具业务含义的信息。
formatter 是 ECharts 中最强大的 tooltip 配置项之一——它允许你用函数完全控制提示框的输出内容。
✅ 场景 1：使用字符串模板（简单场景）
在 ECharts 的 tooltip.formatter 中，如果你传入的是字符串（而非函数），ECharts 会自动使用其内置模板引擎进行变量替换。
占位符
|
含义
|
对应数据来源
|
示例值
|
{a}
|
系列名称（series.name）
|
series[i].name
|
"销售额"
|
{b}
|
数据项名称（类目名）
|
xAxis.data[i] 或 series.data[i].name
|
"华北"
|
{c}
|
数据项的数值
|
series.data[i]
|
12000
|
{d}
|
百分比（仅对饼图、环图有效）
|
value / total * 100
|
35.7%
|
注意：这些是 ECharts 的“标准模板变量”，不是 Smartbi 新增的语法！
场景 2：使用函数模板（推荐，完全控制）
无论你用字符串模板还是函数模板，底层数据结构都是相同的。
✅ 等价关系：
字符串模板
|
函数模板
|
{a}
|
params.seriesName
|
{b}
|
params.name
|
{c}
|
params.value
|
{d}
|
params.percent（仅饼图）
|
Smartbi 的可视化配置，让你学会操作工具；而扩展属性，让你学会创造工具的逻辑。
四 结语：从工具使用者，到数据叙事的设计师
Smartbi 的可视化配置，是通往数据世界的高速公路——它让你快速抵达目的地。
而 扩展属性，是你手里的地图与指南针——它让你在没有路的地方，也能走出自己的路径。
你能用 formatter 把一个普通的提示框，变成一份业务洞察摘要时——你不再是在“做图表”，而是在用数据讲故事。
这才是真正的“降维打击”：
你已不再是一个“操作图表的人”，
而是一名用数据讲出洞察力的故事设计师。
真正的降维打击，不是技术有多深，而是你理解了数据背后的业务逻辑，并能用视觉语言精准表达它。
恭喜你已阅读完全文，来做做题巩固下学习内容，答题可赢取麦豆哦——>点击领取任务 | 
