echarts的title添加图标
时间: 2023-10-24 22:10:42 浏览: 103
可以使用ECharts中的title和textStyle属性来添加图标:
```javascript
option = {
title: {
text: '标题',
textStyle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
fontFamily: 'Arial',
textAlign: 'left',
padding: [0, 30, 0, 0], // 上、右、下、左
// 添加图标
rich: {
icon: {
backgroundColor: '#0070c0',
width: 20,
height: 20,
borderRadius: 10,
lineHeight: 20,
color: '#fff',
textAlign: 'center',
fontSize: 14,
textPadding: 2,
textBorderColor: '#0070c0',
textBorderWidth: 1,
}
},
// 使用富文本格式化标题
formatter: '{icon| } {value}'
}
},
series: [{
// 系列配置
}],
// 其他配置项
}
```
在textStyle属性中,使用rich属性定义一个名为icon的富文本标记,然后在formatter属性中使用`{icon| }`插入图标,通过`{value}`插入标题文本。
这里的图标使用了一个圆形背景和白色字体,可以根据需要自定义样式。
阅读全文