echarts legend 自定义icon

### ECharts 图例 Legend 自定义 Icon 示例

在 ECharts 中，可以通过设置 `legend` 组件中的 `icon` 属性来自定义图例项的图标。这允许开发者根据需求调整图例外观。

对于简单的图形定制，可以直接指定内置形状名称作为字符串：

- 圆形："circle"
- 方形："rect"
- 线条："line"

如果需要更复杂的样式，则可以使用 SVG 路径数据或图像 URL 来创建独特的图标效果[^1]。

下面是一个具体的例子展示如何通过配置 JSON 数据来实现这一功能：

option = {
    legend: {
        data: ['销量'],
        icon: 'path://M328.7...z' // 这里放置SVG路径编码后的字符串或者图片链接地址
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

在这个案例中，`icon` 的值被设为了一个以 "path://" 开头并跟随具体 SVG Path Data 字符串的形式，这样就可以显示任意复杂度的矢量图形作为图例标记了；当然也可以直接给定网络上的 PNG/JPEG 格式的静态资源链接[^2]。

当希望进一步优化用户体验时，还可以考虑结合 HTML 和 CSS 实现更加丰富的交互逻辑以及视觉呈现方式[^3]。

相关问题

echarts legend 自定义html

要完全自定义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 的icon

Echarts 是一款开源的数据可视化库，它提供了各种图表类型，包括折线图、柱状图、饼图、散点图等等。在 Echarts 中，图例（legend）是用来标识不同系列的数据，通常位于图表的右上角或者下方。Echarts 的图例支持自定义图标，常用的图标有以下几种：

1. 'circle': 圆形
2. 'rect': 矩形
3. 'roundRect': 圆角矩形
4. 'triangle': 三角形
5. 'diamond': 菱形
6. 'pin': 图钉
7. 'arrow': 箭头

同时，Echarts 还支持自定义图标，可以通过设置 legend.icon 属性来实现。例如：

legend: {
    data: ['销量'],
    icon: 'path://M512 64l-32 32-224 224-224-224-32-32 256-256z',
}

以上设置会将图例的默认图标改为一个自定义的路径。当然，除了上述常用的图标类型，Echarts 还支持更多的图标类型，可以通过设置 icon 属性来进行自定义。