echarts legend 自定义icon

要完全自定义ECharts图例的HTML内容，你可以使用ECharts的API来获取图例的DOM节点，并在其中插入自定义的HTML代码。 首先，你需要在ECharts的option中设置`legend.show`为`false`，这样就可以隐藏默认的图例。然后，你可以在页面中添加一个容器元素来承载自定义的图例，比如一个`<div>`元素。最后，使用ECharts的`chart.on('legendselectchanged', callback)`方法来监听图例项的选择事件，并在回调函数中获取图例的DOM节点，并在其中插入自定义的HTML代码。 以下是一个示例代码，展示了如何使用自定义HTML代码来替换ECharts默认的图例： ``` // 隐藏默认的图例 legend: { show: false }, // 在页面中添加一个容器元素来承载自定义的图例 <div id="custom-legend"></div> // 监听图例项的选择事件，并在回调函数中获取图例的DOM节点 chart.on('legendselectchanged', function (params) { var legendHtml = ''; var legendDom = chart.getDom().querySelector('.ec-legend'); var legendItems = legendDom.getElementsByTagName('li'); for (var i = 0; i < legendItems.length; i++) { var item = legendItems[i]; var name = item.getAttribute('data-name'); var iconHtml = item.querySelector('.ec-icon').outerHTML; var textStyle = item.querySelector('.ec-legend-text').getAttribute('style'); legendHtml += '<div class="legend-item" data-name="' + name + '">' + iconHtml + '<span style="' + textStyle + '">' + name + '</span></div>'; } document.getElementById('custom-legend').innerHTML = legendHtml; }); ``` 在上面的代码中，我们首先隐藏了默认的图例。然后，在页面中添加了一个`<div>`元素来承载自定义的图例。最后，我们使用`chart.getDom().querySelector('.ec-legend')`方法获取图例的DOM节点，并遍历其中的图例项，将每个图例项的名称、图标、文本样式等信息提取出来，并拼接为自定义的HTML代码。最后，我们将自定义的HTML代码插入到`<div>`元素中，以展示自定义的图例。

### 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 不仅允许开发者简单快速地更改内置样式的呈现形式，还提供了强大的工具支持高度个性化的视觉表达能力。无论是导入现有的素材还是亲手打造独一无二的设计方案都变得触手可及！