在线示例
如果你还不了解canvas，还不知道要讲啥，建议从首篇看起：从0开始写一个支持单轴轮播的雷达图
在首篇我们已经讲了怎么实现轮播，在这里我们将要用这一篇文章来说一下雷达图的单轴hover效果的实现，也是我写这篇文章的原因，因为echarts只支持单个series的hover。而我想要的是支持下面的效果:单轴hover。如果你只想知道怎么解决Echarts单轴轮播问题，并且你足够机智，你可以直接看最后一节。
理清思路
如果你用过Echarts的radar图，如果你去看过生成雷达图形成的dom结构,你hover后会发现如下图所示
有没有一种恍然大悟的感觉，其实就是在这画布的容器（我们称其为target）里里，添加了一个dom元素，来显示提示词。而这个dom元素的定位是绝对定位，定位点是根据hover捕获点在画布上的left和top计算值，然后显示生成的tooltip值；所以我们可以思考，要达到前面这几句话，我们需要提前做以下几步：
1、绑定一个鼠标移动事件，并试图捕捉画布上的拐点；
2、根据捕捉的点，获取相应的数据（标签，数值）；
3：生成一个div元素（也可以是label这些元素），并设定位置，样式，及显示值，并添加到容器中，大功告成；
step by step
原谅我用了个英文单词，我确实不知道该用个什么标题。
如果你细心看过首篇的每一个实现步骤，并且理解整体思路，那接下来，事情会简单很多。因为无论哪个js插件画雷达图，前面的几步都是必须的,其核心除了canvas，其实就是计算和坐标转换，即将一块高为width，宽为height的dom元素变成一张拥有直角坐标系的画布，就像下面这个简图：
绑定事件，并获取相对位置坐标点
我们为这个target元素绑定一个click事件，然后
<div id="main" >
<canvas id="canvas" width='600px' height='400px'></canvas>
</div>
const draw = document.getElementById('canvas');
const ctx = draw.getContext("2d");
/*获取鼠标在canvas画布上的位置(**不是浏览器窗口的鼠标位置)
* clientX获取的相对浏览器窗口左上角的位置，适用于所有浏览器
* 在chrome浏览器中，有一个zrX属性，是相对于元素本身的相对位置
* getBoundingClientRect()函数是获取元素边框相对于浏览器窗口的位置
* */
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left ,
y: event.clientY - rect.top
}
}
draw.addEventListener('click',function(event){
console.log(getMousePos(draw,event)); //打印得到的，就是鼠标点击位置相对于canvas容器元素左上角的坐标值，而不是相对于浏览器窗口。
});如果你还不明白，你可以试着拷贝代码，建立一个html页面尝试一下
根据获取的坐标点，判断是不是需要捕捉的点
你有可能会疑问，就算捕捉了这个点，那怎么才能判断这个点是不是需要捕捉的拐点呢？答案是，前面绘制这个拐点的时候，我们已经记录下了这个拐点在坐标位置，所以我们只需要将点击获取到的像素（px）值，转化为建立的坐标系坐标，我们就能轻易判断是不是拐点了，当然为了实现的灵敏度，我们需要给其配一个误差值，保证在拐点某个面积内都能触发这个hover。代码中有较多注释，具体看代码实现：
function addListener(dom,canvas,pointData){
//获取鼠标在canvas画布上的位置(**不是浏览器窗口的鼠标位置)
function getMousePos(canvas, evt) { //canvas就是dom中的canvas元素
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left * (canvas.width / rect.width),
y: evt.clientY - rect.top * (canvas.height / rect.height)
}
}
dom.addEventListener('click',function (evt) { //开始测试建议用点击，后面弄清楚了改成mousemove事件就ok
const mouse = getMousePos(canvas, evt);
let point={};
let text = '';
let index =-1;
const r =5; //这个r就是那个允许的误差值，值越大，越容易触发hover
point.x=mouse.x-offset.x/2; //offset的值就是画布的长和宽值，利用他们的中心点，可以计算鼠标点击位置在坐标系中的坐标值；
point.y=mouse.y-offset.y/2;//同上
for(let i=0;i<pointData.length;i++) { //pointData中存储的就是前面我们计算出来的拐点的坐标值
let item = pointData[i];
if (point.x > (item[0] - r) && point.x < (item[0] + r) && point.y > (item[1] - r) && point.y < (item[1] + r)) {
index = i; //满足条件，就记录下这个值，用于后面单轴显示
break;
}
}
if(index!==-1){
hoverLabel(dom,mouse,index); //在下一步，我们将实现这个方法
}else{
removeLabel(dom);//当然，我们也将顺便实现这个方法
}
})生成一个div元素，显示相应展示的轮播值
当我们生成一个div，并试图定位将其添加到画布容器中显示出来时，你需要明白下面两点：
1：这个div需要绝对定位，装他的容器需要一个非static定位；
2：装这个div的元素是装canvas容器的元素，而不是canvas，添加到canvas中 ，你将什么也看不到；
这个实现较简单，就直接看源码吧
/*dom 即要添加div的容器，point即触发hover事件的位置，是位置，不是变换后的坐标，text即要显示的值*/
function hoverLabel(dom,point,text){
removeLabel(dom)；//生成前先判断有无，有就移除这个显示标签
let label =document.createElement('div');
label.style.position='absolute';
label.style.top=point.y+'px';
label.style.left=point.x+'px';
label.style.border='1px solid yellowgreen';
label.style.background = 'gray';
label.style.zIndex = 999;
label.innerHTML ='show:0999'+text;
dom.appendChild(label);
}
function removeLabel(dom) { //移除这个显示标签
(dom.querySelectorAll('label').length)&&(dom.removeChild(dom.querySelector('label'))); //有就删除，没有就不动作
}提示，我们也可以提前生成一个标签元素，将其添加到画布容器中，并不显示它，后面我们只需动态改变它的位置和内容。
至此，我们已经完成了单轴的hover，也就是下面这种效果图
到这里，似乎该告一段落了，但好戏才要真正开始，我们的标题是解决Echarts单轴轮播，我不是一个标题党，所以接下来，将要讨论这个有趣的话题。
解决Echarts单轴轮播问题
通过上面我们已经自己实现了一个Radar图，并对其实现了单轴轮播和hover，我们已经明白了其中的坐标变换，所以我们可否用Echarts生成一个radar图，自己为其写一个tooltip呢,答案是必须的，但前提是，这是个Radar图只有一个系列，而且最好半径是设定好的。其实现的核心思想就是，通过我们option中的设置，获取画布大小，获取标签和值，生成坐标系，算出目标点的坐标，然后添加上面说的hover事件，我们还是直接看他的具体实现，直接上源码：
/*target 添加画布的容器，option即为setOption中的Option，autoOption用于设定是否自动轮播，是否hover触发，*/
function addHover(target,option,autoOption={autoShow:false,hoverEnable:true,time:1000}){
const m =Math;
var center ={ //获取画布的中心偏离比，因为echarts支持百分数控制radar图在画布中的位置，所以我们需要计算这个点，当然我们也可以为了方便，不在option中设置，这样我们就可以直接用画布的中心点,即（0.5,0.5）；
pointx:(option.radar.center&&Number(option.radar.center[0].substr(0,option.radar.center[0].length-1))/100)||0.5, //计算X轴的偏离比例
pointy:(option.radar.center&&Number(option.radar.center[1].substr(0,option.radar.center[1].length-1))/100)||0.5, //计算y轴的偏离比例
};
var x=target.offsetWidth*center.pointx,y=target.offsetHeight*center.pointy; //计算radar中心点x的值，计算radar中心点x的值
var indicator = option.radar.indicator; //获取option中radar的标签
var data = option.series[0].data[0].value;//获取option中radar的值，我们在这里只去第一个series的值；
var length = indicator.length; //获取标签的长度，即雷达的拐点数，这个很重股
var step =-1; //轮播要用到的参数
var hovering =false ; //这个参数是控制轮播与hover同时触发，显示hover值，暂停轮播显示
var radius=option.radar.radius,pointData=[]; //获取radar的半径
var style ={ //hover显示的样式
color:'#fff',
border:'1px solid rgb(51,51,51)',
borderRadius:'4px',
backgroundColor:'rgba(50,50,50,0.7)'
};
const single = 2*m.PI /length*(-1);
for(let i = 0;i<length;i++){
let ratio = data[i]/indicator[i].max;
pointData.push([radius*m.sin(i*single)*ratio,radius*m.cos(i*single)*ratio]);
}
/*获取鼠标在canvas画布上的位置(**不是浏览器窗口的鼠标位置)
* clientX获取的相对浏览器窗口左上角的位置，适用于所有浏览器
* 在chrome浏览器中，有一个zrX属性，是相对于元素本身的相对位置
* getBoundingClientRect()函数是获取元素边框相对于浏览器窗口的位置
* */
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left ,
y: event.clientY - rect.top
}
}
let label =document.createElement('label');
label.style.position='absolute';
label.style.display='none';
target.appendChild(label);
function hoverLabel(label,point,text,style){
label.style.display ='none';
label.style.top=point.y+'px';
label.style.left=point.x+'px';
label.style.border=style.border;
label.style.color =style.color;
label.style.borderRadius=style.borderRadius;
label.style.backgroundColor = style.backgroundColor;
label.style.transition ='left 0.4s cubic-bezier(0.23,1,0.32,1),top 0.4s cubic-bezier(0.23,1,0.32,1)';
label.style.zIndex = 999;
label.innerHTML =text;
label.style.display ='inline';
}
function removeLabel(dom) {
dom.style.display ='none';
}
autoOption.autoShow&&(setInterval(function () { //控制轮播
step = (step+1)%length;
var showPoint={
x:pointData[step][0]+x,
y:y-pointData[step][3]
}
var tag =indicator[step];
var text = tag.name+':'+m.round(data[step]*100/tag.max)+"%";
(!hovering)&&hoverLabel(label,showPoint,text,style);
},autoOption.time||1000));
target.addEventListener('click',function(event){
console.log(event);
});
autoOption.hoverEnable&&(target.addEventListener('mousemove',function(event){ //控制hover
const canvas= target.querySelector('canvas');
const mouse = getMousePos(canvas, event);
let point={};
let index =-1;
const r =5;
point.x=mouse.x-x;
point.y=y-mouse.y;
for(let i=0;i<pointData.length;i++) {
let item = pointData[i];
if (point.x > (item[0] - r) && point.x < (item[0] + r) && point.y > (item[1] - r) && point.y < (item[1] + r)) {
index = i;
break;
}
}
if(index!==-1){
var tag =indicator[index]
var text = tag.name+':'+m.round(data[index]*100/tag.max)+"%";
hovering =true;
hoverLabel(label,mouse,text,style);
}else{
hovering =false;
removeLabel(label);
}
}))
}
至于调用，那就简单了
第一步：
var ele = document.getElementById('chart');
var draw = echarts.init(ele);
第二步：
配置你的option
var option ={};
第三步画出你的雷达图
draw.setOption(option);
第四步：绑定事件：
addHover(ele,option,{autoShow:true,hoverEnable:true});
至此，我们就 完全解决了Echarts单轴轮播问题。
如果你嫌上面太琐碎，可以直接取github看我的试验源码，文件是mouse.html,欢迎star
本文后续：从0开始撸一个支持单轴轮播的雷达图之末篇
本文首发于：http://closertb.site
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
