echarts的legend 将图形与文字叠在一起
时间: 2023-11-22 17:53:35 浏览: 121
要将图形和文字叠在一起,可以使用 echarts 的 `formatter` 属性。可以在 `legend` 中设置 `formatter` 属性来自定义图例的显示内容。
例如,以下代码可以将图例的文字和相应的图形叠在一起:
```javascript
legend: {
data: ['图例1', '图例2', '图例3'],
formatter: function (name) {
return '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background-color:'
+ colorList[this.indexOfName(name)] + ';margin-right:5px;"></span>' + name;
}
},
```
在上面的代码中,`formatter` 属性是一个函数,它返回一个 HTML 字符串。这个字符串包含一个 `<span>` 元素和图例的名称。`<span>` 元素中的样式指定了图例的图形,例如圆形或方块,并将其与图例的名称分隔开。`colorList` 是一个包含图例颜色的数组,可以通过 `indexOfName` 方法获取当前图例的索引。
阅读全文