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

目录

• 需求
• 解决方法
• 1、设置tooltip
• 2、定义hookToolTip变量
• 3、在methods中添加方法
• 4、完整代码

tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 出发条件
          //   formatter: "名称:{b}
坐标:{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 =
              "
" +
              "
" +
              "" +
              "" +
              "" +   
              item.name +
              "" +
              "
" +
              "
" +
              "
" +
              "" +
              "" +
              "经度" +
              "" +
              item.value[0].substr(0, 11) +
              "" +
              "
" +
              "
" +
              "" +
              "" +
              "纬度" +
              "" +
              item.value[1].substr(0, 11) +
              "" +
              "
" +
              "
" +
              "" +
              "" +
              "考场数" +
              "" +
              item.componentIndex +
              "" +
              "个" +
              "
" +
              "
" +
              "" +
              "" +
              "监考教师" +
              "" +
              item.componentIndex +
              "" +
              "个" +
              "
";

            return tipHtml;
          },
        },

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 

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 坐标:{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 =
              "
" +
              "
" +
              "" +
              "" +
              "" +
              item.name +
              "" +
              "
" +
              "
" +
              "
" +
              "" +
              "" +
              "经度" +
              "" +
              item.value[0].substr(0, 11) +
              "" +
              "
" +
              "
" +
              "" +
              "" +
              "纬度" +
              "" +
              item.value[1].substr(0, 11) +
              "" +
              "
" +
              "
" +
              "" +
              "" +
              "考场数" +
              "" +
              item.componentIndex +
              "" +
              "个" +
              "
" +
              "
" +
              "" +
              "" +
              "监考教师" +
              "" +
              item.componentIndex +
              "" +
              "个" +
              "
";

            return tipHtml;
          },
        },