echarts雷达图的indicator上面添加点击事件

echarts雷达图的indicator上面添加点击事件,第1张

解决办法:

myChart.on("click", function (params) {

   圆瞎     if (params.componentType === "radar") {

          // 点击到了 radar坐标轴标签 上

          console.log("点击磨运的瞎腔梁名称", params.name)

        } else if (params.componentType === "series") {

          //   console.log("不确定的位置")

        }

      })

注意:要添加triggerEvent: true,

我们在做echarts图表的时候经常会出现需要点击图表打开d窗或者打开新的页面,而如果图表是柱状图的话,可能会出现最大值和最小值差距过大的情况,比如普通的值大小都在1000上下,然后有几个值的大小只有个位数,这种情况下我们首先就需要将坐标轴指示器的type改为'shadow',这样首先鼠标移入当前数据那一列就能选中并显示tooltip了,然后更进一步,我们想要点击坐标轴指示器的阴影区域从而获取当前列的内容该怎么做呢,这个时候我们就需要echarts内部的 getZr() 方法了。

由于我项目中使用的是 vue-echarts ,可以通过 @zr:click="xxx" 直接绑定zr事件

如果是常规流程的话就是使用echarts实例调用 getZr() ,最好是先解绑click事件

理论上来说直角坐迅大标系里面的图都可以应用这个方法,只是说柱状图最有应用价值。

这个点是几个月前的项目里用到过的,现在写这篇文章找资料的时拍昌塌候发现了一篇不错的文章,里面介绍的挺详细,留作以后备用袭圆。 在Echarts区域的任何位置精准触发事件

超链接中javascript:开头代表着执行一段js代码,刚好echarts的title就是一个超链接。根据这个原理,就可以简单的实现title的点击事件了配岩。

title: {

  text: '标题',

  link: "javascript: alert('a')",

  target: "self"// 保证不会在虚碧新的窗培誉御口d出

}


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11968670.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-20
下一篇2023-05-20

发表评论

登录后才能评论

评论列表(0条)

    保存