一、学前须知：

1.什么是ECharts？

ECharts 是一款由百度开源的数据可视化图表库，基于 JavaScript 实现，能够帮助开发者快速生成交互式、动态化的图表与数据大屏。它支持多种主流浏览器及移动端设备，凭借丰富的图表类型、灵活的配置项和强大的数据处理能力，成为数据可视化领域的热门工具之一。

官网：https://echarts.apache.org/

核心特点：

1. 图表丰富：涵盖折线图、柱状图、饼图、散点图、地图等 30+ 常见图表类型，支持三维可视化及复杂关系图（如桑基图、树图）。

2. 交互性强：提供数据缩放、拖拽、动态更新、提示框等交互功能，便于用户探索数据细节。

3. 高度定制：通过简洁的 JSON 配置即可调整样式、主题、动画效果，满足个性化需求。

4. 兼容性强：适配主流框架（Vue/React/小程序等），并支持服务端渲染（Node.js）。

2.如何获取当前Smartbi使用的ECharts版本？

首先我们要明白Smartbi中的图表组件是大多是使用的ECharts图形来做的（仪表盘，电子表格）。

查看当前Smartbi中ECharts的版本信息可在浏览器的控制台输入以下脚本获取：

 jsloader.resolve("thirdparty.echarts.min.echarts",true); //加密时加载完整版echarts.js
 echarts;
 echarts.version;

(如果浏览器不支持粘贴会警告，在控制手动输入：allow pasting打开可复制功能)

注：在扩展属性的编辑界面也会有相应的echarts版本信息。

3.JSON结构是什么？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，采用文本格式存储和传输数据，易于人阅读和编写，也便于机器解析和生成。其核心结构包含两种形式：

对象（Object） 用花括号 {} 表示，由键值对组成，键为字符串，值可以是字符串、数字、布尔值、数组、对象或 null。

 {
   "name": "张三",
   "age": 30,
   "isStudent": false,
   "hobbies": ["读书", "运动"]
 }

数组（Array） 用方括号 [] 表示，是由有序的值组成的列表，值可以是任意类型。

 ["苹果", "香蕉", 123, true]

特点

• 语法简洁，层级清晰。

• 独立于编程语言，广泛用于Web API、配置文件等场景。

• 键名必须用双引号包裹，值之间用逗号分隔。

二、什么是扩展属性？

扩展属性（又称自定义属性）是Smartbi提供的一种功能，用于调整ECharts图形的配置项。由于ECharts的配置项非常丰富且灵活，Smartbi的可视化配置界面无法完全覆盖所有配置需求。因此，扩展属性允许用户通过手动添加或修改配置项来实现更复杂的图形效果。

在Smartbi中，扩展属性主要用于以下场景：

1. 调整图形元素：例如修改标题、系列、坐标轴等元素的样式或行为。

2. 实现高级效果：当可视化配置界面无法满足需求时，可以通过扩展属性直接修改ECharts的底层配置项。

3. 自定义图形：通过扩展属性，用户可以根据具体需求自定义图形的显示效果。

扩展属性在Smartbi的ECharts图形中广泛应用，尤其是在需要实现复杂或个性化图形效果时。

三、案例：图表图例默认不选中状态（仪表盘）

需求：如何实现打开仪表盘的时候某些图例默认不选中的状态？

思考：通过组件设置可以实现吗？不可以的话要如何实现呢？

经研究发现通过组件设置不可以实现，那么可以通过扩展属性（自定义属性）可以实现吗？(可以)

我们在组件设置中打开自定义属性如下界面：

我们所添加的配置就是在option={}中进行添加，格式为JSON格式。

注：在较低版本（SmartbiV10.5.15以下的版本）打开的时候可能会没有option=而是直接一个{}，直接在{}里添加即可。

当组件的属性配置，我们不熟悉或不知道的时候可以借助ECharts的使用文档来进行帮助搜索（https://echarts.apache.org/zh/option.html）：

注：当搜索的时候有多个结果不知道是哪个属性，可以直接点击属性右边的试一试，进行设置预览。

确认好属性为所需的属性设置后，在【自定义属性】中添加相应的设置：

进阶：现在看到未选中的时候图例颜色是灰色的，这个可以调整吗？（可以）

补充：如果我们设置相应的扩展属性后不生效又找不到该如何调试呢？

我们可以在浏览器按f12打开开发者工具中的控制台，选中相应的图表使用鼠标点击鼠标中间的滑轮，此时就会有相应图表的ECharts属性，可以将相应的属性复制至ECharts官网进行调试。

四、结论

使用扩展属性可以帮助我们实现图表的许多高级效果，这些效果在组件设置中无法直接实现。通过扩展属性的自定义性，能够提供更灵活的调整空间。在平常开发中可灵活使用扩展属性来实现组件图表的自定义效果。

五、视频教学

图形扩展属性入门：https://my.smartbi.com.cn/edu/course-126