vue使用highcharts自定义图例点击事件

这篇文章主要为大家详细介绍了vue使用highcharts自定义图例点击事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue使用highcharts自定义图例点击事件的具体代码，供大家参考，具体内容如下

highcharts图表自带的图例点击事件是：点击某个显示/隐藏的图例，该图例对应的series就隐藏/显示。

需求方这边的需求是：

1、默认全部展示所有分类
2、点击某一个分类，则隐藏其他分类
3、如果再次点击这个分类，则全部显示
4、如果点击了A，再点击了B，则显示A和B

于是乎只能自定义图例点击事件。

// 数据列展示/隐藏的逻辑函数 getVisibleMode(series, serieName) {     var allVisible = true     var allHidden = true     for (let i = 0; i  {                                 serie.hide()                             })                             this.show()                         } else if (mode === 'all-hidden') {                             series.forEach((serie, k) => {                                 serie.show()                             })                         } else {                             enableDefault = true                         }                         return enableDefault                     }                 }             }         }     }) }

代码在vue环境下运行，需要注意图例点击事件方法中this指向问题。

预览效果图：