echart坐标轴文本axisLabel.clickable，支持点击事件响应

Posted 2023-03-29

想知道在jsp中具体如何使用，不知道怎么调用这个click事件，想点击文本，然后可以链接url
yAxis : [
type : 'category',
splitLine :
show : false
,
data : staffName,
clickable: true
],
yAxis : [
type : 'category',
splitLine :
show : false
,
data : staffName,
axisLabel : clickable: true


],

参考技术A http://echarts.baidu.com/doc/example/event.html
看下这个是不是你要的效果 参考技术B var myChart=echarts.init(document.getElementById("chart"));
var option=
    xAxis:[
        axisLabel:
            clickable:true,    
        
    ]
;
myChart.setOption(option);
myChart.on('click',function(params)
console.log(params.name);
);

这里的param会自动获取到点击的标签名，里面还存有其他的东西，用console.log(params)就可以看到

题主要实现的功能应该先判断params.name是不是触发事件的标签，然后写执行动作

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

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

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

 1 formatter:function(value){
 2     return: `{img|}
{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}|}
{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:{  ...  } 
 }