Vue在echarts tooltip中添加点击事件案例详解

2024-04-02 19:04:59 567人浏览独家记忆

摘要

目录需求解决方法1、设置tooltip2、定义hookToolTip变量3、在methods中添加方法4、完整代码需求需要在echarts tooltip点击学校的名称，跳转到详情

需求

需要在echarts tooltip点击学校的名称，跳转到详情页面；项目是从上海市---> 某个区----> 具体的学校（在最后一级的tooltip中绑定一个点击事件）

项目是用Vue和echarts实现的，echarts是新版本（^5.0.2），并不能把点击事件绑定在window上

解决方法

1、设置tooltip

enterable: true, //允许鼠标进入提示悬浮层中，triggeron:'click',//提示框触发的条件 mousemove鼠标移动时触发 click鼠标点击时触发 'mousemove|click'同时鼠标移动和点击时触发


tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 出发条件
          //   fORMatter: "名称:{b}<br/>坐标:{c}",
          enterable: true, //允许鼠标进入提示悬浮层中
          showContent: true,
          triggerOn: "click", //提示框触发的条件  mousemove鼠标移动时触发 click鼠标点击时触发  'mousemove|click'同时鼠标移动和点击时触发
          //   confine: true, //把toolTip限制在图表的区域内
          className: "areaTool",
          // hideDelay: 100000, //延时消失时间
          formatter: (item) => {
            this.hookToolTip = item;
            // 经纬度太长需要对位数进行截取显示，保留七位小数
            // 需要绑定点击事件
            var tiphtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer">' +   
              item.name +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "经度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "纬度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "考场数" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "监考教师" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>";

            return tipHtml;
          },
        },

2、定义hookToolTip变量

在formatter中给hookToolTip赋值，添加一个id，然后通过watch去检测dom元素，可以通过onclick去绑定事件，也可以通过addEventListerner去注册事件


watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //通过onclick注册事件 querySelectorAll获取的元素是一个数组
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // 通过addEventListener注册事件
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      //   immediate: true,
      //   deep: true,
    },
  },

3、在methods中添加方法

4、完整代码


data(){
       hookToolTip: {},     
},

  watch: {
    hookToolTip: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "---------watch");
        let tooltipButton = document.querySelectorAll("#btn-tooltip");
        //通过onclick注册事件 querySelectorAll获取的元素是一个数组
        if (tooltipButton.length > 0) {
          tooltipButton[0].onclick = this.pointNameClick;
        }
        // 通过addEventListener注册事件
        for (let i = 0; i < tooltipButton.length; i++) {
          tooltipButton[i].addEventListener("click", this.chartClick);
        }
      },
      //并不需要进入页面就检查
      //   immediate: true,
      //   deep: true,
    },
  },

  methods: {
    chartClick() {
      console.log(
        this.hookToolTip,
        "-------addEventList",
        this.hookToolTip.name
      );
    },
 },

    
//echarts
      tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 出发条件
          //   formatter: "名称:{b}<br/>坐标:{c}",
          enterable: true, //允许鼠标进入提示悬浮层中
          showContent: true,
          triggerOn: "click", //提示框触发的条件  mousemove鼠标移动时触发 click鼠标点击时触发  'mousemove|click'同时鼠标移动和点击时触发
          //   confine: true, //把toolTip限制在图表的区域内
          className: "areaTool",
          // hideDelay: 100000, //延时消失时间
          formatter: (item) => {
            this.hookToolTip = item;
            console.log(item, "-----", this.hookToolTip);
            // 经纬度太长需要对位数进行截取显示，保留七位小数
            // 需要绑定点击事件
            var tipHtml = "";
            tipHtml =
              '<div style="width:2.5rem;height:80%;background:rgba(22,80,158,0.8);border:0.0125rem solid rgba(7,166,255,0.7)">' +
              '<div style="width:100%;height:0.375rem;line-height:0.375rem;border-bottom:0.025rem solid rgba(7,166,255,0.7);">' +
              '<i style="display:inline-block;width:0.125rem;height:0.125rem;background:#16d6ff;border-radius:0.5rem;">' +
              "</i>" +
              '<span id="btn-tooltip" style="margin-left:0.125rem;color:#fff;font-size:0.2rem;cursor:pointer" onclick="chartClick">' +
              item.name +
              "</span>" +
              "</div>" +
              '<div style="padding:0.1875rem;text-align: left;">' +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "经度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[0].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "纬度" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.value[1].substr(0, 11) +
              "</span>" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "考场数" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>" +
              '<p style="color:#fff;font-size:0.15rem;">' +
              '<i style="display:inline-block;width:0.1rem;height:0.1rem;background:#16d6ff;border-radius:0.5rem;margin:0 0.1rem">' +
              "</i>" +
              "监考教师" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "个" +
              "</p>";

            return tipHtml;
          },
        },

到此这篇关于Vue在echarts tooltip中添加点击事件案例详解的文章就介绍到这了,更多相关Vue的内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue在echarts tooltip中添加点击事件案例详解

本文链接: https://www.lsjlt.com/news/158156.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue在echarts tooltip中添加点击事件案例详解

目录需求解决方法1、设置tooltip2、定义hookToolTip变量3、在methods中添加方法4、完整代码需求需要在echarts tooltip点击学校的名称，跳转到详情...

99+

2024-04-02
Android开发使用RecyclerView添加点击事件实例详解

目录引言一、RecyclerView基本使用1. 添加适配器Adapter2. 创建列表的每个项的item_layout.xml文件3. 在activity中使用二、Recycler...

99+

2024-04-02
Vue如何给组件添加点击事件 @click.native

目录给组件添加点击事件 @click.native问题结论vue中@click.native使用@click.native是给组件绑定原生事件给组件添加点击事件 @click.nat...

99+

2022-11-13

Vue组件添加点击事件 Vue @click.native Vue组件点击事件
vue中怎么给el-radio添加tooltip并实现点击跳转

本篇内容介绍了“vue中怎么给el-radio添加tooltip并实现点击跳转”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！给el-radi...

99+

2023-07-06
vue中给el-radio添加tooltip并实现点击跳转方式

目录给el-radio添加tooltip并实现点击跳转element表格(el-table)自定义复选框(添加提示el-tooltip)需求实现效果总结给el-radio添加tool...

99+

2023-05-15

vue el-radio vue点击跳转给el-radio添加tooltip
Vue中点击url下载文件的案例详解

目录代码实现使用注意封装自定义指令将url转成bold,在创建a标签下载blob 代码实现在src 下面的 directive 文件夹下新建目录 downLoadUrl ...

99+

2024-04-02
vue项目如何实现Echarts在label中获取点击事件

目录vue Echarts在label中获取点击事件vue echarts图表点击事件柱状图 vue Echarts在label中获取点击事件需要针对Echarts图像对...

99+

2022-11-13

vue Echarts label获取点击事件 vue获取点击事件
Jquery中怎么动态添加元素并添加点击事件

本文小编为大家详细介绍“Jquery中怎么动态添加元素并添加点击事件”，内容详细，步骤清晰，细节处理妥当，希望这篇“Jquery中怎么动态添加元素并添加点击事件”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。给动态...

99+

2023-06-17
Android Flutter怎么在点击事件上添加动画效果

本文小编为大家详细介绍“Android Flutter怎么在点击事件上添加动画效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“Android Flutter怎么在点击事件上添加动画效果”文章能帮助大家解决疑惑，下面跟...

99+

2023-07-05
vue动态添加元素点击事件不起作用怎么办

在Vue中，很多时候我们需要动态地添加元素到页面上。然而，有时候我们会发现这些动态添加的元素的点击事件不起作用，这是为什么呢？本文将为您介绍原因及解决方法。一、原因我们首先来了解一下为什么动态添加的元素的点击事件不起作用。这是因为Vue在页...

99+

2023-05-14
Vue中addEventListener()监听事件案例讲解

目录一、语法二、事件冒泡或事件捕获？三、拓展阅读addEventListener()事件监听一、语法 element.addEventListener(event, function...

99+

2022-12-31

vue addEventListener监听事件 addEventListener监听事件 addEventListener事件
vue中swiper开启loop后,点击事件不响应的解决方案

目录swiper开启loop后,点击事件不响应问题代码如下swiper设置loop:true时点击事件失效解决swiper开启loop后,点击事件不响应接手离职同事的项目,然后发现...

99+

2024-04-02
Android中点击事件的四种写法详解

Android中点击事件的四种写法使用内部类实现点击事件使用匿名内部类实现点击事件让MainActivity实现View.OnClickListener接口通过布局文件中控件的属性第一种方法：使用内部类基本步骤如下：新...

99+

2023-05-31

android 点击事件 roi
vue中@click绑定事件点击不生效的原因及解决方案

目录原因：解决方法：Vue中@click不生效的解决办法原因：根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想...

99+

2022-12-08

vue中@click绑定事件 vue @click不生效 vue @click @click用法
详解如何在Vue中动态添加类名

目录静态和动态类有条件的类名使用数组语法使用对象语法与自定义组件一起使用快速生成类名使用计算属性来简化类能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题，根...

99+

2024-04-02
vue如何通过点击事件实现页面跳转详解

目录前言this.$router.push()this.$router.push()中的参数规则参数的接收注意补充：VUE实现从一个页面跳转到另一个页面的指定位置总结前言页面跳转，...

99+

2024-04-02
vue中@click绑定事件点击不生效的解决

目录@click绑定事件点击不生效原因解决方法@click中不能使用三则表达式原因@click绑定事件点击不生效原因根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过pr...

99+

2022-11-13

vue @click不生效 vue中@click @click绑定事件不生效
vue如何通过点击事件弹出弹窗页面详解

目录步骤一步骤二总结步骤一创建一个弹窗页面，我们给该页面命名为dialogComponent，弹窗页面中要设置以下内容： <template> <!--1.首先，...

99+

2024-04-02
.env在mode文件中如何添加注释详解

目录前言问题分析解决（dotenv）使用测试前言 Vue-Cli 允许我们在项目根目录创建.env.[mode]文件来设置一些打包编译的启动参数，通过执行脚本的时候加mode参数，指...

99+

2024-04-02
vue-seamless-scroll实现简单自动无缝滚动且添加对应点击事件的简单整理

目录Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理一、简单介绍二、安装和使用三、效果图四、vue-seamless-scrol...

99+

2023-01-03

vue-seamless-scroll 无缝滚动 vue无缝滚动