相关文章推荐
直爽的围巾  ·  JSON_VALUE ...·  4 月前    · 
开心的保温杯  ·  Wpf 关闭当前窗体 ...·  1 年前    · 
骑白马的薯片  ·  Enforce HTTPS in ...·  1 年前    · 

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

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

遇见的坑:

  1. 使用dispatchAction引发showTip,会发现tooltip只能显示很短的时间,所以我鼠标移入地图时,给另一个地图设置​ ​tooltip[0].alwaysShowContent=true​ ​和​ ​tooltip[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'
})
})
}

2.【nc】 Trees 9/11 Construct Binary Tree from Preorder and Inorder Traversal 前序中序构建二叉树 105 3.Flowable边界事件-定时边界事件 4.游戏渲染技术:前向渲染 vs 延迟渲染 vs Forward+渲染(二) 5.Java开发专家阿里P6-P7面试题大全及答案汇总(持续更新)二十七、Ribbon和Feign的区别...