码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-01 12:28:36      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:title   自定义   nbsp   round   code   参数   标题   charts   dex   

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

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

 1 formatter:function(value){
 2     return: `{img|}\n{value|${value}}`
 3 }
 4 rich:{
 5     value:{fontsize:20},
 6     img:{
 7         height:15,
 8         backgroundColor:{ image:‘图片路径‘ }
 9      } 
10 }            

 

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

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

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

 1 formatter:function(value,index){
 2     return: `{img${index}|}\n{value|${value}}`
 3 } 
 4 rich:{ 
 5     value:{fontsize:20},
 6     img0:{
 7         height:15,
 8         backgroundColor:{ image:‘图片路径‘ } 
 9     },
10     img1:{
11         height:15, backgroundColor:{ image:‘图片路径‘ } 
12     },
13     img2:{
14         height:15, backgroundColor:{ image:‘图片路径‘ } 
15     }
16  } 

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

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

 

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

标签:title   自定义   nbsp   round   code   参数   标题   charts   dex   

原文地址:https://www.cnblogs.com/flashing-magic/p/12247852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!