echarts legend自定义图标

### ECharts 自定义 Legend 图标 在 ECharts 中，可以通过多种方法实现图例（Legend）图标的自定义。以下是详细的说明以及代码示例。 #### 默认的图例项 Icon ECharts 提供了默认的图例图标样式，这些图标可以满足基本需求。如果需要更复杂的定制化效果，则需采用其他方式来修改图标样式[^2]。 #### 使用图片链接或 Base64 图片作为图例图标 通过 `legend.icon` 属性，可以直接指定一个 URL 或者 Base64 编码的图片地址作为图例项的图标。这种方式适合于使用现成的图像资源进行替换。 ```javascript option = { legend: { data: ['系列A'], icon: 'image://https://example.com/icon.png' }, series: [{ name: '系列A', type: 'line', data: [10, 20, 30] }] }; ``` 此代码片段展示了如何利用外部图片替代默认的图例图标。 #### 使用矢量路径自定义图例图标 除了静态图片外，还可以借助 SVG 的 Path 数据来自定义更加灵活多变的图形。这通常用于绘制几何形状或其他复杂图案。 ##### 方法一：单个矢量路径 对于简单的图形设计，可直接输入对应的 path 字符串到配置中： ```javascript option = { legend: { data: ['系列B'], icon: 'path://M384.795 224c-80.721 0-146.117 65.396-146.117 146.117s65.396 146.117 146.117 146.117S530.912 456.834 530.912 370.117c0-80.721-65.396-146.117-146.117-146.117zm0 256c-61.864 0-112-50.136-112-112s50.136-112 112-112 112 50.136 112 112-50.136 112-112 112z' }, series: [{ name: '系列B', type: 'bar', data: [50, 60, 70] }] }; ``` 上述代码实现了基于特定路径数据构建的独特图例外观[^4]。 ##### 方法二：多个矢量路径组合 当存在多个序列时，可通过分号分割不同序列所使用的路径字符串完成批量设定。 ```javascript let paths = [ 'path://M384.795 224...Z', // 替换为实际的第一条路径 'path://M100 10L200...' ]; option = { legend: { data: ['系列C', '系列D'], icon: paths.join(';') }, series: [{ name: '系列C', type: 'scatter', data: [[1, 2]] }, { name: '系列D', type: 'pie', data: [{value: 30}] } ] }; ``` 这里演示了一个场景下同时应用两种不同的矢量路径给两个独立的数据集。 #### 监听图例交互事件 为了增强用户体验，在某些情况下可能还需要捕获用户的操作行为并对页面做出响应调整。比如切换显示隐藏状态等功能都可以通过绑定回调函数轻松达成目标。 ```javascript myChart.on('legendselectchanged', function(params){ console.log(params); }); ``` 这段脚本注册了一个针对 “legendselectchanged” 类型触发的动作处理器，每当用户改变某个选项卡的选择状况都会被记录下来以便进一步处理逻辑[^3]。 --- ### 总结 综上所述，ECharts 不仅允许开发者简单快速地更改内置样式的呈现形式，还提供了强大的工具支持高度个性化的视觉表达能力。无论是导入现有的素材还是亲手打造独一无二的设计方案都变得触手可及！