使用echarts富文本标签为坐标轴添加图片

富文本主要用到formatter和rich，formatter用于自定义格式，rich负责样式。

想要在轴上加图片，先定义格式，比如我想给x轴上每一个标签文本上方加同样的图片

formatter:function(value){
    return: `{img|}\n{value|${value}}`
}
rich:{
    value:{fontsize:20},
    img:{
        height:15,
        backgroundColor:{ image:'图片路径' }
     } 
}            

 

formatter中的｛|｝表示自定义，img相当于html中的标签，在rich中为img设置样式。rich中的value是设置文本的样式。

formatter有两个参数，一个是value，代表x轴上的默认标签文本，另一个是index，代表标签文本的索引，从0开始。

所以如果想给每个文本前加不同的图片，只需这样

formatter:function(value，index){
    return: `{img${index}|}\n{value|${value}}`
} 
rich:{ 
    value:{fontsize:20},
    img0:{
        height:15,
        backgroundColor:{ image:'图片路径' } 
    },
    img1:{
        height:15, backgroundColor:{ image:'图片路径' } 
    },
    img2:{
        height:15, backgroundColor:{ image:'图片路径' } 
    }
 } 

如果想为标题加图片也是差不多的，甚至不需要用到formatter，直接在title下的text中写：｛a|｝标题内容

 title:{ 
    text:'{a|}标题文本' ,
    rich:{  ...  } 
 }