devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+echarts 实现地图tooltip点击事件；toolTip数据动态渲染；同时鼠标滑过涟漪点时实现地图多区域联动_vue echarts tooltip

作者：小丑西瓜9 | 2024-03-25 09:29:42

赞

踩

vue echarts tooltip

最终做出来的效果是这样的：

最近做项目时，遇到这样的需求：

        1、toolTip上的数据根据后台动态渲染

        2、鼠标移入地图涟漪点时显示tootTip，点击toolTip上的文字，携带动态数据id进行路由跳转

        3、鼠标移入地图涟漪点，与涟漪点相关的省份多区域联动高亮

   这么多问题，不要慌，办法都是人想出来的，我们先从第一个问题来开整：

一、众所周知，echart的toolTip有自己的显示样式，但是在实际开发中需要自定义html结构才能满足需求，如我遇到的动态渲染，于是我这样做：

  1. let initOption = {
  2. tooltip: {
  3.           show: false, // 提示框
  4.           triggerOn: "mousemove|click", //必须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
  5.           extraCssText: "border:none;",//清除tooltip自带的边框颜色
  6.           // alwaysShowContent: true,//提示框不消失
  7.           hideDelay: 2000, //提示框移出或点击2秒后消失
  8.      },
  9.        //使用这种方式添加tooltip的formatter，便于点击事件的获取
  10.       initOption.tooltip.formatter = function (params) {
  11.         if (params.seriesType === `effectScatter`) {
  12.           this.proviesName = [];
  13.           const theData = params.data?.theData;
  14.           //省份集合value
  15.           let provies = [];
  16.           theData.map((item) => {
  17.             provies.push(...item.businessArea.split(","));
  18.           });
  19.           //遍历匹配得到省份合集
  20.           provies?.map((item) => {
  21.             mapCenterData.map((ite) => {
  22.               if (item == ite.value) this.proviesName.push(ite.name);
  23.             });
  24.           });
  25.           //数组去重
  26.           this.proviesName = Array.from(new Set(this.proviesName));
  27.  
  28.           let before = "";
  29.           let center = "";
  30.           // 格式化提示框信息
  31.           theData.map((item) => {
  32.             item.recruitmentInfoList.map((ite) => {
  33.               center += `
  34.                       <div style="width: 15vw;display: flex;justify-content: space-between;padding: 0 10px; font-size: 14px; margin: 10px 0;">
  35.                           ${ite.title}
  36.                       </div> 
  37.                 `;
  38.             });
  39.             before +=
  40.               `
  41.                   <div style="position: relative;z-index: 100000000000000000000000;">
  42.                     <div style="font-weight: bold;display: flex;padding: 0 5px;justify-content: space-between;margin-bottom: 20px;">
  43.                       <div style="font-weight: bold;color: #348df2;font-size: 16px;z-index:100;">${item.shortName}</div>
  44.                       </div>` +
  45.               center +
  46.               `
  47.                       <div style="width: 15vw;display: flex;justify-content: flex-end;padding: 0 10px; font-size: 14px;" >
  48.                           <div style="align-items: flex-end;display: flex;align-items: center;color:#3da2ff;pointer-events: auto;" class="toJoin-${
  49.                             item.id
  50.                           }">
  51.                             <p οnclick="${this.getMoreJob(item.id)}">更多</p>
  52.                             <svg style="width:20px;height:20px;margin-left: 10px;" t="1672020296882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2518" width="200" height="200"><path d="M1024.2048 512c0 6.656-2.4576 13.2608-7.5264 18.2784l-325.8368 325.8368a25.6 25.6 0 1 1-36.1984-36.1984l282.5216-282.5216H25.8048a25.6 25.6 0 1 1 0-51.2h910.9504l-282.112-282.112a25.6 25.6 0 1 1 36.1984-36.1984l325.8368 325.8368c4.608 4.608 7.5264 11.008 7.5264 18.0736V512z" fill="#3ca1fe" p-id="2519"></path></svg>
  53.                           </div>
  54.                         </div>
  55.                       </div>
  56.                         `;
  57.           });
  58.  
  59.           return before;
  60.         }
  61.       }.bind(this);
  62. }

tooTip对象是放在初始化的echart对象中，相信聪明的你肯定知道。这样写就能实现toolTip中html自定义。

二、点击文字，携带参数的路由跳转，由于tooltip中不能使用vue语法，只能使用原生点击事件（onclick），大家可以参考上面代码

<p οnclick="${this.getMoreJob(item.id)}">更多</p> //这里可以获取到定义在vue中的方法

三、移入地图涟漪点省份区域联动，实现思路就是在initOption对象中添加：

  1. let initOption = {
  2.     // 设置高亮颜色
  3.         dataRange: {
  4.           show: false,
  5.           x: "left",
  6.           y: "bottom",
  7.           splitList: [
  8.             { start: 5, end: 5, color: "#007aff" }, //当值为5时，区域背景(值随便设置)
  9.           ],
  10.         },
  11. }

然后在ehcart的移入事件中这么写：

  1.        //移入显示区域联动
  2.       this.chart.on("mouseover", (params) => {
  3.         if (params.seriesType == "effectScatter") {
  4.           this.seriesData = [];
  5.           this.proviesName.map((item) => {
  6.             this.seriesData.push({
  7.               name: item + "省",//这里名字得与联动的省份的名字对应，不然没效果
  8.               value: 5, //随便写的值，主要是与dataRange中设置的值相对应，这样就能实现区域联动高亮
  9.             });
  10.             this.chart.setOption({ series: [{}, { data: this.seriesData }] });
  11.           });
  12.         }
  13.       });

鼠标移出还得操作一手，为了除高亮：

  1. //鼠标移出，清除联动高亮
  2.       this.chart.on("mouseout", (params) => {
  3.         if (params.seriesType == "effectScatter") {
  4.           this.seriesData = [];
  5.           this.chart.setOption({ series: [{}, { data: this.seriesData }] });
  6.         }
  7.       });

最后，废话不多说，上完整代码：

  1.  //初始化图表
  2.     initChart() {
  3.       this.chart = echarts.init(this.$refs.map);
  4.       let initOption = {
  5.         grid: {
  6.           bottom: "0%",
  7.           top: "10%",
  8.           left: "10%",
  9.           right: "10%",
  10.         },
  11.         // 设置高亮颜色
  12.         dataRange: {
  13.           show: false,
  14.           x: "left",
  15.           y: "bottom",
  16.           splitList: [
  17.             { start: 5, end: 5, color: "#007aff" }, //当值为5时，区域背景
  18.           ],
  19.         },
  20.         tooltip: {
  21.           show: false, // 提示框
  22.           triggerOn: "mousemove|click", //必须使用这种方式，因为tooltip需要有点击事件，同时移入effectScatter点区域联动
  23.           extraCssText: "border:none;",//清除tooltip自带颜色
  24.           // alwaysShowContent: true,//提示框不消失
  25.           hideDelay: 2000, //提示框2秒后小时
  26.         },
  27.         geo: {
  28.           show: true,
  29.           map: "china",
  30.           zoom: 1.1, // 地图比例
  31.           label: {
  32.             normal: {
  33.               show: false,
  34.             },
  35.             emphasis: {
  36.               show: false,
  37.             },
  38.           },
  39.  
  40.           roam: false,
  41.           itemStyle: {
  42.             normal: {
  43.               areaColor: "#01215c",
  44.               borderWidth: 5, //设置外层边框
  45.               borderColor: "transparent",
  46.               shadowColor: "#add7ff",
  47.               shadowBlur: 30,
  48.               shadowOffsetX: 0,
  49.               shadowOffsetY: 15,
  50.             },
  51.           },
  52.         },
  53.         series: [
  54.           {
  55.             type: "effectScatter",
  56.             coordinateSystem: "geo",
  57.             showEffectOn: "render",
  58.             rippleEffect: {
  59.               brushType: "stroke",
  60.               scale: 5,
  61.               period: 2, // 秒数
  62.             },
  63.             symbolSize: 12,
  64.             hoverAnimation: true,
  65.             label: {
  66.               normal: {
  67.                 formatter: "{b}",
  68.                 position: "right",
  69.                 show: true,
  70.               },
  71.             },
  72.             zlevel: 1,
  73.             tooltip: {
  74.               show: true, // 提示框
  75.               triggerOn: "click",
  76.             },
  77.           },
  78.  
  79.           {
  80.             type: "map",
  81.             map: "china",
  82.             aspectScale: 0.75,
  83.             zoom: 1.1, // 地图比例
  84.             itemStyle: {
  85.               normal: {
  86.                 areaColor: "#ebf6fd",
  87.                 borderColor: "#a1cffb",
  88.                 shadowColor: "rgba(255, 230, 175,0.5)",
  89.                 borderWidth: 1,
  90.               },
  91.               emphasis: {
  92.                 areaColor: "#52C5F7",
  93.               },
  94.             },
  95.             emphasis: {
  96.               label: {
  97.                 show: true,
  98.               },
  99.             },
  100.           },
  101.         ],
  102.       };
  103.       //添加tooltip对象
  104.       initOption.tooltip.formatter = function (params) {
  105.         if (params.seriesType === `effectScatter`) {
  106.           this.proviesName = [];
  107.           const theData = params.data?.theData;
  108.           //省份集合value
  109.           let provies = [];
  110.           theData.map((item) => {
  111.             provies.push(...item.businessArea.split(","));
  112.           });
  113.           //遍历匹配得到省份合集
  114.           provies?.map((item) => {
  115.             mapCenterData.map((ite) => {
  116.               if (item == ite.value) this.proviesName.push(ite.name);
  117.             });
  118.           });
  119.           //数组去重
  120.           this.proviesName = Array.from(new Set(this.proviesName));
  121.  
  122.           let before = "";
  123.           let center = "";
  124.           // 格式化提示框信息
  125.           theData.map((item) => {
  126.             item.recruitmentInfoList.map((ite) => {
  127.               center += `
  128.                       <div style="width: 15vw;display: flex;justify-content: space-between;padding: 0 10px; font-size: 14px; margin: 10px 0;">
  129.                           ${ite.title}
  130.                       </div> 
  131.                 `;
  132.             });
  133.             before +=
  134.               `
  135.                   <div style="position: relative;z-index: 100000000000000000000000;">
  136.                     <div style="font-weight: bold;display: flex;padding: 0 5px;justify-content: space-between;margin-bottom: 20px;">
  137.                       <div style="font-weight: bold;color: #348df2;font-size: 16px;z-index:100;">${item.shortName}</div>
  138.                       </div>` +
  139.               center +
  140.               `
  141.                       <div style="width: 15vw;display: flex;justify-content: flex-end;padding: 0 10px; font-size: 14px;" >
  142.                           <div style="align-items: flex-end;display: flex;align-items: center;color:#3da2ff;pointer-events: auto;" class="toJoin-${
  143.                             item.id
  144.                           }">
  145.                             <p οnclick="${this.getMoreJob(item.id)}">更多</p>
  146.                             <svg style="width:20px;height:20px;margin-left: 10px;" t="1672020296882" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2518" width="200" height="200"><path d="M1024.2048 512c0 6.656-2.4576 13.2608-7.5264 18.2784l-325.8368 325.8368a25.6 25.6 0 1 1-36.1984-36.1984l282.5216-282.5216H25.8048a25.6 25.6 0 1 1 0-51.2h910.9504l-282.112-282.112a25.6 25.6 0 1 1 36.1984-36.1984l325.8368 325.8368c4.608 4.608 7.5264 11.008 7.5264 18.0736V512z" fill="#3ca1fe" p-id="2519"></path></svg>
  147.                           </div>
  148.                         </div>
  149.                       </div>
  150.                         `;
  151.           });
  152.  
  153.           return before;
  154.         }
  155.       }.bind(this);
  156.       this.chart.setOption(initOption);
  157.       //移入显示区域联动
  158.       this.chart.on("mouseover", (params) => {
  159.         if (params.seriesType == "effectScatter") {
  160.           this.seriesData = [];
  161.           this.proviesName.map((item) => {
  162.             this.seriesData.push({
  163.               name: item + "省",
  164.               value: 5,
  165.             });
  166.             this.chart.setOption({ series: [{}, { data: this.seriesData }] });
  167.           });
  168.         }
  169.       });
  170.       //鼠标移出，清除联动高亮
  171.       this.chart.on("mouseout", (params) => {
  172.         if (params.seriesType == "effectScatter") {
  173.           this.seriesData = [];
  174.           this.chart.setOption({ series: [{}, { data: this.seriesData }] });
  175.         }
  176.       });
  177.     },

        注意：初始化图表的数据都来原于后台接口请求，涟漪点的数据，与地图每个区域的数据，需要各位根据实际情况渲染到地图上，然后才会有上面的3个问题的出现

        最后：原创不易，转载请注明出处

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/308621
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号