echarts自定义legend怎么保留左侧的icon
时间: 2023-10-24 18:23:17 浏览: 36
要保留左侧的icon,需要在自定义legend时,添加一个图标元素。具体操作如下:
1. 在legend.data中添加一个空的图标元素,如下所示:
```
legend: {
data: [
{
name: '',
icon: 'circle',
textStyle: {
color: '#333',
fontSize: 14
}
},
{
name: '图例1',
icon: 'rect',
textStyle: {
color: '#333',
fontSize: 14
}
},
{
name: '图例2',
icon: 'triangle',
textStyle: {
color: '#333',
fontSize: 14
}
}
]
}
```
2. 在tooltip.formatter中将空的图标元素替换为实际需要显示的图标,如下所示:
```
tooltip: {
formatter: function(params) {
var content = '';
if (params.length > 0) {
content += params[0].name + '<br/>';
for (var i = 0; i < params.length; i++) {
var icon = '';
if (params[i].seriesName === '') {
icon = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#fff;border:1px solid #ccc;"></span>';
} else {
icon = params[i].marker;
}
content += icon + params[i].seriesName + ': ' + params[i].value + '<br/>';
}
}
return content;
}
}
```
这样就可以保留左侧的icon,并且在tooltip中也能正确显示每个图例的图标。