使用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:{  ...  } 
 }