自定义事件中调用ECharts数据视图关闭事件

5 篇文章 0 订阅

自定义事件中调用ECharts数据视图关闭事件


原本用的是echarts自带的数据视图样式,点击转换成数据视图后会有样式的问题,如图:

正常的折线图
在这里插入图片描述
点击数据视图后显示数据会讲原本的title给遮盖掉,但是还会露出一部分,右侧还有多余的滚动条,改样式的话,获取不到这个动态生成的数据视图的父元素div
在这里插入图片描述
在这里插入图片描述
所以想到了自己写组件,写一个table将自带的那个数据视图给覆盖掉
在这里插入图片描述

但是echarts没有提供直接关闭数据视图的api,所以换种思路,可以调用echarts中那个关闭按钮事件,配置中

lang :['数据视图', '关闭', '刷新']

可以传个标签进去(同理,刷新按钮也可)

 lang: [' ', '<span id="closeData">关闭</span>', '<span id="refreshData">刷新</span>'],

在自定义关闭按钮中去获取配置中的关闭的dom,然后调用其点击事件即可

 closeTable() {
      console.log(222)
      const domId = document.getElementById('closeData')
      if (domId !== null) {
        const domParent = domId.parentNode
        domParent.click()
        this.showTableData = false // 自定义table数据视图关闭
      }
    }

最后非常感谢https://blog.csdn.net/py1215/article/details/106351928,解决了我的问题。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值