工作中遇到在页面绘制图表,需要根据UI设计图实现不同的图表标题加上各自小图标进行共同展示。
实现重点是利用富文本标签rich,将图标与标题一起展示。
如下代码的标题文本以及图片是封装后传的变量,在此做下记录,具体需求需要具体分析。
title: {
show:true,
text: ` {titleIcon|} ${titleText}`,//主副标题文本,都支持使用 \n 换行。
subtext: "Sub Title",
left: "center",
top: "center",
textStyle: {
color:'#999',
fontSize: 30,
lineHeight: 14,//rich 中如果没有设置 lineHeight,则会取父层级(此处)的 lineHeight
fontStyle:'normal',
fontWeight: 700,
// 在许多地方(如图、轴的标签等)都可以使用富文本标签。
rich: {
titleIcon:{
backgroundColor:{
image: titleIcon
//'./data/asset/img/weather/sunny_128.png'
//文本片段的 backgroundColor 可以指定为图片后,就可以在文本中使用图标了
},
height: 15,// 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。
width:16,
}
}
},
subtextStyle: { // 副标题样式设置
fontSize: 20
}
}
富文本标签详情参见教程:
Documentation - Apache ECharts
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
},