zoukankan      html  css  js  c++  java
  • 两个echarts地图联动高亮区域

    项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动,曾尝试了connect不好使,所以自己写了这段代码。代码思路为:

    1. 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮;
    2. 鼠标移入地图时,根据鼠标在地图的坐标位置,使另一侧的地图tooltip悬浮于获取的坐标位置,保证两张地图的tooltip的位置相同。

    图片描述
    遇见的坑:

    1. 使用dispatchAction引发showTip,会发现tooltip只能显示很短的时间,所以我鼠标移入地图时,给另一个地图设置tooltip[0].alwaysShowContent=truetooltip[0].triggerOn="none"。官网要求使用dispatchAction引发showTip需要设置triggerOn="none",但是我试了有没有都行,有alwaysShowContent=true就行;
    2. 在设置tooltip的时候,使用的是对象。而获取的时候tooltip会成为数组,也许echarts是为了满足多个tooltip的需求。

    函数只要传进去echarts实例就行,代码如下:

    //前面的代码省略直接调用,传入echarts实例对象
    connectMap(chart1,chart2);
    
    function connectMap(chart1,chart2){
        //当鼠标移入左侧的地图上
            chart1.on("mouseover",function(target){
                
                var option=chart2.getOption();
                option.tooltip[0].alwaysShowContent=true;
                option.tooltip[0].triggerOn="none";
                chart2.setOption(option,true);
                chart2.dispatchAction({
                    type:'downplay',
                    seriesName:'rightmap'
                })
                chart2.dispatchAction({
                    type:'highlight',
                    name:target.name,
                })
            
        })
        chart1.on("mousemove",function(target){
            
            chart2.dispatchAction({
                type:'showTip',
                name:target.name,
                x:target.event.offsetX,
                y:target.event.offsetY
            })
        })
        chart1.on("mouseout",function(){
            var option=chart2.getOption();
            option.tooltip[0].alwaysShowContent=false;
            option.tooltip[0].triggerOn="mousemove";
            chart2.setOption(option,true);
            chart2.dispatchAction({
                type:'hideTip'
            })
        })
    
        //当鼠标移到右边的地图
        chart2.on("mouseover",function(target){
            var option=chart1.getOption();
            option.tooltip[0].alwaysShowContent=true;
            option.tooltip[0].triggerOn="none";
            chart1.setOption(option,true);
            chart1.dispatchAction({
                type:'downplay',
                seriesName:'rightmap'
            })
            chart1.dispatchAction({
                type:'highlight',
                name:target.name,
            })
            
        })
        chart2.on("mousemove",function(target){
            
            chart1.dispatchAction({
                type:'showTip',
                name:target.name,
                x:target.event.offsetX,
                y:target.event.offsetY
            })
        })
        chart2.on("mouseout",function(){
            var option=chart1.getOption();
            option.tooltip[0].alwaysShowContent=false;
            option.tooltip[0].triggerOn="mousemove";
            chart1.setOption(option,true);
            chart1.dispatchAction({
                type:'hideTip'
            })
        })
    }
  • 相关阅读:
    通讯录封装实现
    简单通讯录的实现 main..h .m文件全部
    iOS 开发 OC编程 字典和集合 排序方法
    iOS 开发 OC编程 数组冒泡排序.图书管理
    iOS 开发 OC编程 属性和字符串练习
    iOS 开发 OC编程 属性和字符串
    iOS 开发 OC编程 便利构造器以及初始化方法
    iOS 开发 OC编程 方法的书写
    IOS 开发 OC编程 类和对象
    iOS 开发 c语言阶段考试题
  • 原文地址:https://www.cnblogs.com/10manongit/p/12836654.html
Copyright © 2011-2022 走看看