echart 中 legend标签自定义点击事件

最新推荐文章于 2024-04-23 13:17:54 发布

原创最新推荐文章于 2024-04-23 13:17:54 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在echarts中实现legend点击事件的自定义处理，特别是在用户未登录状态下，图例默认置灰并添加点击提示。通过监听事件，判断选中的图例并进行相应状态管理，确保图例再次被点击时能恢复到灰色不可选状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在`用户未登录`状态下，`‘我’`默认置灰，点击后提示 `去登录`

echart的事件
在这里插入图片描述
登录后

`Me` 未登录 `置灰色`

legend: {
	   top: 15,
	   right: 15,
	   selected: {
	      '全部': true,
	      '我': false // 未登录 置灰色
	   }
	},

监听`echart`的`legendselectchanged`事件，并根据`params.name` 判断当前选中哪个图例

注：再次将`legend`的 `selected` 设为 false（置灰）

let that = this

myChart.on('legendselectchanged', function(params) {
   if(params.name === '我' && !that.userInfo) {
        // 未登录 -- 去登录
        that.Login()
        // 未登录：再次将legend的 selected 设为 false（置灰）
        myChart.setOption({
            legend:{selected:{[params.name]: false}}
        })
    }
})