从0开始撸一个支持单轴轮播的雷达图之中篇(解决Echarts单轴轮播问题)

写于：2018-08-30

在线示例
如果你还不了解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

closertb / closertb.github.io