欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue在echarts?tooltip中添加點擊事件案例詳解

 更新時間：2021年11月23日 15:59:32   作者：靜水思流  
本文主要介紹了Vue項目中在echarts?tooltip添加點擊事件的案例詳解，代碼具有一定的價值，感興趣的小伙伴可以來學習一下

需求

需要在echarts tooltip點擊學校的名稱，跳轉到詳情頁面；項目是從上海市---> 某個區(qū)----> 具體的學校（在最后一級的tooltip中綁定一個點擊事件）

?項目是用vue和echarts實現(xiàn)的，echarts是新版本（^5.0.2），并不能把點擊事件綁定在window上

解決方法

1、設置tooltip

enterable: true, //允許鼠標進入提示懸浮層中，triggeron:'click',//提示框觸發(fā)的條件? mousemove鼠標移動時觸發(fā) click鼠標點擊時觸發(fā)? 'mousemove|click'同時鼠標移動和點擊時觸發(fā)

tooltip: {
          // 提示框組件
          show: true, // 顯示提示框組件
          trigger: "item", // 觸發(fā)類型
          triggerOn: "mousemove", // 出發(fā)條件
          //   formatter: "名稱:<br/>坐標:{c}",
          enterable: true, //允許鼠標進入提示懸浮層中
          showContent: true,
          triggerOn: "click", //提示框觸發(fā)的條件  mousemove鼠標移動時觸發(fā) click鼠標點擊時觸發(fā)  'mousemove|click'同時鼠標移動和點擊時觸發(fā)
          //   confine: true, //把toolTip限制在圖表的區(qū)域內(nèi)
          className: "areaTool",
          // hideDelay: 100000, //延時消失時間
          formatter: (item) => {
            this.hookToolTip = item;
            // 經(jīng)緯度太長需要對位數(shù)進行截取顯示，保留七位小數(shù)
            // 需要綁定點擊事件
            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>" +
              "經(jīng)度" +
              '<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>" +
              "考場數(shù)" +
              '<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>" +
              "監(jiān)考教師" +
              '<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獲取的元素是一個數(shù)組
        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獲取的元素是一個數(shù)組
        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", // 觸發(fā)類型
          triggerOn: "mousemove", // 出發(fā)條件
          //   formatter: "名稱:<br/>坐標:{c}",
          enterable: true, //允許鼠標進入提示懸浮層中
          showContent: true,
          triggerOn: "click", //提示框觸發(fā)的條件  mousemove鼠標移動時觸發(fā) click鼠標點擊時觸發(fā)  'mousemove|click'同時鼠標移動和點擊時觸發(fā)
          //   confine: true, //把toolTip限制在圖表的區(qū)域內(nèi)
          className: "areaTool",
          // hideDelay: 100000, //延時消失時間
          formatter: (item) => {
            this.hookToolTip = item;
            console.log(item, "-----", this.hookToolTip);
            // 經(jīng)緯度太長需要對位數(shù)進行截取顯示，保留七位小數(shù)
            // 需要綁定點擊事件
            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>" +
              "經(jīng)度" +
              '<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>" +
              "考場數(shù)" +
              '<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>" +
              "監(jiān)考教師" +
              '<span style="color:#11ee7d;margin:0 0.075rem;">' +
              item.componentIndex +
              "</span>" +
              "個" +
              "</p>";

            return tipHtml;
          },
        },

到此這篇關于Vue在echarts tooltip中添加點擊事件案例詳解的文章就介紹到這了,更多相關Vue的內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Vue中computed、methods與watch的區(qū)別總結

    Vue中computed、methods與watch的區(qū)別總結

    這篇文章主要給大家介紹了關于Vue中computed、methods與watch區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-04-04
  • vue雙花括號的使用方法 附練習題

    vue雙花括號的使用方法 附練習題

    這篇文章主要為大家詳細介紹了vue雙花括號的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • Vue?vant-ui框架實現(xiàn)上拉加載下拉刷新功能

    Vue?vant-ui框架實現(xiàn)上拉加載下拉刷新功能

    功能需求——獲取后端接口返回的數(shù)據(jù)，實現(xiàn)列表數(shù)據(jù)上滑加載更多下一頁數(shù)據(jù)，下拉數(shù)據(jù)刷新功能，結合vant-ui框架實現(xiàn)。可直接參考使用
    2022-09-09
  • Vue通過ref獲取dom元素屬性的方法

    Vue通過ref獲取dom元素屬性的方法

    這篇文章主要介紹了Vue通過ref獲取dom元素屬性的方法,文中有詳細的方法介紹,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
    2023-11-11
  • Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決

    Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決

    這篇文章主要為大家介紹了Vue組件傳值異步中子組件拿到數(shù)據(jù)較慢的問題解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-08-08
  • 推薦VSCode 上特別好用的 Vue 插件之vetur

    推薦VSCode 上特別好用的 Vue 插件之vetur

    這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue中子組件調用兄弟組件方法

    vue中子組件調用兄弟組件方法

    這篇文章主要介紹了vue中子組件調用兄弟組件方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法

    vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法

    本篇文章主要介紹了vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue3頁面跳轉的兩種方式

    vue3頁面跳轉的兩種方式

    vue3的頁面跳轉有兩種方式，第一種是標簽內(nèi)跳轉，第二種是編程式路由導航，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
    2023-05-05
  • Vue中Axios的封裝與接口管理詳解

    Vue中Axios的封裝與接口管理詳解

    在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關于Vue中Axios的封裝與接口管理的相關資料,需要的朋友可以參考下
    2022-03-03

最新評論