本页面介绍了 Apache ECharts 中可用的实用系统和视觉定制选项。这些实用工具提供了强大的机制，用于定制图表外观、处理不同视觉状态以及创建超越内置图表类型的自定义可视化效果。
有关特定图表类型的信息，请参阅图表类型。有关组件配置的信息，请参阅组件。
ECharts 提供了一套丰富的视觉定制实用工具，使开发者能够：
下图展示了 ECharts 中的主要实用系统及其关系：
来源：test/hoverStyle.html, test/custom.html, test/symbol2.html
ECharts 使用基于状态的视觉定制系统，允许根据用户交互或程序控制对相同数据元素进行不同的视觉呈现。
ECharts 支持以下几种主要的视觉状态：
| 状态管理 | 描述 | 触发器 |
|---|---|---|
normal | 默认外观 | 默认状态 |
emphasis | 高亮外观 | 鼠标悬停，API 高亮 |
blur | 弱化外观 | 其他元素高亮时 |
select | 选中外观 | 选中操作 |
每个图表元素在不同状态下都可以应用不同的样式，提供丰富的交互体验。
视觉状态通过系列或组件选项中的嵌套配置对象进行配置。
emphasis 状态的配置继承自 normal 状态，只需指定不同的属性即可。
来源：test/hoverStyle.html:79-101, test/hoverStyle.html:166-170
状态可以通过 ECharts 的 API 进行编程控制。
这使得除了用户交互之外，还可以通过编程方式控制视觉状态。
来源：test/hoverStyle.html:759-776, test/hoverStyle.html:969-988
ECharts 通过为强调元素使用专用悬浮层来优化渲染性能。
这种优化避免了仅有少数元素改变状态时重新渲染整个图表。
来源：test/hoverStyle.html:80-117, test/hoverStyle.html:166-187
ECharts 提供了一套全面的图形实用工具，用于创建自定义可视化和扩展内置图表。
图形实用工具包括多种基本形状和容器：
| 元素类型 | 描述 | 常见用例 |
|---|---|---|
group | 其他元素的容器 | 复杂的自定义可视化 |
rect | 矩形形状 | 条形图、背景、容器 |
circle | 圆形形状 | 点、标记、指示器 |
line | 线段 | 连接元素、误差条 |
polygon | 任意多边形 | 自定义形状、区域 |
polyline | 连接的线段 | 自定义路径、轨迹 |
text | 文本标签 | 标注、描述 |
image | 图片元素 | 自定义标记、图标 |
来源：test/custom.html:148-152, test/graphicRemove.html:70-81
图形实用工具可与自定义系列类型结合使用，以创建完全自定义的可视化效果。
“renderItem”函数是自定义可视化的核心，它接收数据参数和实用工具 API。
来源：test/custom.html:130-153, test/custom.html:277-292
图形元素支持丰富的样式属性集：
| 属性类别 | 示例 | 适用 |
|---|---|---|
| 填充 (Fill) | fill, fillOpacity | 形状 |
| 描边 | stroke, lineWidth, lineDash | 所有形状 |
| 文本 | text, fontSize, textFill | 文本元素 |
| 阴影 | shadowBlur, shadowOffsetX, shadowColor | 所有元素 |
| 组合 | opacity, blend | 所有元素 |
来源：test/legend-borderColor.html:111-114, test/hoverStyle.html:401-431
图形元素可以动态添加、更新或删除。
这使得能够构建响应用户操作或数据变化的动态交互式可视化效果。
来源：test/graphicRemove.html:87-94, test/custom-children-remove.html:152-158
ECharts 中的标志系统允许自定义散点图、折线图和其他图表类型中使用的点标志。
ECharts 提供了几种内置标志类型：
| 标志类型 | 描述 |
|---|---|
'circle' | 标准圆形 |
'rect' | 矩形 |
'triangle' | 三角形 |
'diamond' | 菱形形状 |
'pin' | 大头针/标记形状 |
'arrow' | 箭头形状 |
'none' | 无标志 |
来源：test/symbol2.html:55, test/symbol2.html:109-111
标志可以通过多种方式定制。
灵活的标志系统能够创建视觉上独特的、通过外观传达额外信息的数据点。
来源：test/symbol2.html:65-85, test/symbol2.html:108-116
不同系列类型以特定方式使用标志：
| 系列类型 | 标志使用 |
|---|---|
scatter | 用于每个数据点 |
line | 用于线上的数据点 |
graph | 用于关系图中的节点 |
custom | 如 renderItem 中所定义 |
标志可以针对整个系列进行全局定制，也可以针对每个数据点单独定制。
来源：test/hoverStyle.html:509-516, test/legend-borderColor.html:106-115
ECharts 提供了一个强大的系统，用于为视觉状态和其他属性变化之间的过渡添加动画。
动画可以在多个层级进行配置。
不同的动画设置可以应用于图表的各个部分以及不同的状态转换。
来源：test/hoverStyle.html:213-219, test/custom.html:295-320
emphasis 状态通常包括以下动画效果：
这些效果在用户交互期间提供视觉反馈。
来源：test/hoverStyle.html:595-610, test/hoverStyle.html:738-742
对于自定义可视化，动画可以明确地通过以下方式定义：
来源：test/custom.html:262-320
实用系统与 ECharts 的各种图表组件集成，以实现全面的视觉定制。
图例可以通过各种视觉属性进行定制。
图例的视觉样式遵循其关联系列的标志和颜色定义。
来源：test/legend-borderColor.html:68-78, test/legend-borderColor.html:319-324
视觉映射允许数据值自动映射到视觉属性。
VisualMap 组件提供了强大的数据驱动视觉定制功能。
来源：test/hoverStyle.html:351-366, test/hoverStyle.html:443-457
ECharts 的实用工具和视觉定制系统为创建具有视觉吸引力且交互性强的数据可视化提供了强大的工具。通过利用这些功能，开发者可以创建独特的图表设计，增强用户交互，并构建超越内置图表类型的完全自定义可视化效果。