echarts中点击Y(坐标)轴,当前点击坐标值(YAxisLabel)改变颜色

本文介绍了如何在Echarts中实现点击Y轴坐标后改变坐标标签的颜色,以便突出显示所选值。通过定义全局变量,开启Y轴触发事件,设置颜色改变条件,并利用myChart.on事件接口监听点击行为,可以实现在点击后高亮显示Y轴标签,点击其他位置后恢复原色。示例代码和详细解释帮助理解实现过程。
摘要由CSDN通过智能技术生成

因为任务需要点击Y轴坐标后---->>>触发新的事件,但是过一会儿后就不知道刚才点击的是哪个YAxisLabel值了,所以需要highlight一下。

查询官网手册,试了很久最后发现逆向传参一下就好了。

先上效果图:

这里我点击的是最上面的“Sun”坐标,点击后是绿色的,未点击的时候是红色的。

思路如下:

先定义全局变量,这样在option中才可以直接使用变量值:

let indexLabel = null;

然后,检查你是否把Y轴触发打开了:

triggerEvent: true, //设置Y轴也可以触发点击事件

如果没有打开,那么你点击Y轴是不会执行动作的。

接下来给YAxisLabel设置颜色改变的条件:

axisLabel: {
        textStyle: {    //这里的str是YAxisLabel的每一个值
          color:function (str) {
              return indexLabel &#
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值