echarts rich富文本标签使用

echarts 常见的富文本标签rich 位于 title, xAxis, yAxis, series中

这里着重讲解在 title 和 series中的 rich富文本标签使用

title 中的富文本标签在 textStyle属性下面

series 中的富文本标签在 label属性下面

rich富文本使用方法：

title: {
          text: [
          	 //a 代表自定义的样式集名称
            `{a| 这是标题}`,  //格式: '{a| 标题}'
          ],
          textStyle:{
            fontSize:18,
            rich: { 
              //设置a 样式集
              a:{     
                color: 'red',
              }
            }
          }
}

label: {
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    // 使用介绍同上代码块
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
    }
}

rich富文本可以使用的样式:

{ 
	color , 
	fontStyle , 
	fontWeight , 
	fontFamily , 
	fontSize , 
	align , 
	verticalAlign , 
	lineHeight , 
	backgroundColor , 
	borderColor , 
	borderWidth , 
	borderType , 
	borderDashOffset , 
	borderRadius , 
	padding , 
	shadowColor , 
	shadowBlur , 
	shadowOffsetX , 
	shadowOffsetY , 
	width , 
	height , 
	textBorderColor , 
	textBorderWidth , 
	textBorderType , 
	textBorderDashOffset , 
	textShadowColor , 
	textShadowBlur , 
	textShadowOffsetX , 
	textShadowOffsetY 
}

具体使用可以参照官方文档:

富文本标签链接: https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE