引子

最近做公司的数据展示项目,用的核心插件是Echarts,但在雷达图的展示案列上,需求上出现了需要单轴轮播标签和数据,在看完github上的issue后,这个Echarts3不支持,看了一下源码,似乎有点复杂,改了改,只实现了多个series的轮播,和需求还是有差距,周末反正无聊,何不自己动手撸一个。

整理一下思路

clipboard.png

想实现如上图这样一个建议雷达图,需要几步?个人总结,需要:
初始化一个canvas对象;

  1. 以画布中心,绘制三个同心圆;

  2. 根据输入的点数,计算3根轴在外径圆上的6个坐标点,并以中心点,绘制6根轴线;

  3. 根据输入的标签,集合前面6个坐标点,完成6个标签在画布的绘制;

  4. 根据输入的数据,结合前面的6个坐标,计算得输入数据的坐标点,连线完成输入数据展示;

  5. 要实现轮播,主要解决的就是根据输入数据坐标点计算此点在Dom元素的位置,然后轮播显示;

  6. 如果想触发echarts那种hover tooltip的效果,你只需要添加一个mousemove事件,获取位置,并计算其相对应的坐标点。

好像要达到的效果就完成了,似乎不难,来吧,实现它。

分布实现

初始化一块画布

首先引入一个canvas函数,并为其制定长高,然后获取这个元素,并得到一块平面画布,代码如下:

 <div id="main" >
     <canvas id="canvas" width='600px' height='400px'></canvas>
 </div>
 
 const draw = document.getElementById('canvas');
 const ctx = draw.getContext("2d");

为了后面更方便的计算,我们需要把坐标原点从画布的右上角移到画布的中心,所以我们首先获取画布的长宽,接着使用translate方法,转移坐标原点

    const offset = {
        x:draw.offsetWidth,
        y:draw.offsetHeight
    };
    ctx.translate(offset.x/2,offset.y/2);   

这样我们就初始化了一块画布,并将其坐标原点移到了画布的中心.
这里提示两点:

  • 添加canvas为其指定宽高时,需要用width和height属性直接指定,而不能用style的宽高指定其宽高,如果是样式指定,画出来的线或圆是模糊且变形的;

  • 虽然上面变换了坐标原点,但是canvas坐标系默认是向下,向右为正,所以我们改变了坐标原点,但这个特点并未改变,所以像(0,120)这个点是位于坐标原点正下方的,而非通常我们认知的正上方;

画同心圆

在echarts中,圆的个数可通过splitNum配置,其实这个实现也不难,可通过下面的代码实现:

    const m = Math; 
    const PI = m.PI;//这两个参数后面经常会用,这里提前简单申明
    
    /*
    输入参数
    *ctx 画布
    * radius 要画的最外层圆的半径
    * spiltNum 要画的圆的个数
    * */
    function drawArc(ctx,radius,splitNum){
        ctx.beginPath(); //开始画路径
        /*这个可通过stokeColor与fillColor设置圆边的颜色和圆的填充色*/
        const splitStep =radius/splitNum;
        for(let i=1;i<=splitNum;i++){ //按splitNum个数,计算并画出相应的圆
            ctx.moveTo(i*splitStep,0); //这一句很重要,你需要手动移动你的画笔,而不是任其在画布上连续移动,画出不应该出现的线;
            ctx.arc(0,0,i*splitStep,0,2*PI,false);
        }
        ctx.stroke();
    }
    drawArc(ctx,raduis,3);
    

clipboard.png

这一步就提示一点:
ctx.beginPath()与ctx.stroke();总是成对成对出现,缺一个,这线必须出不来。

计算极坐标线与外侧圆的交点

首先回忆一个高中数学知识,已知一个圆的大小,其一条线与O度角直径成x度角,求其这条线沿Y轴正方向与圆的交点,好难,有没有,久了不摸,知识瞬间回到幼儿园,答案是:(r*sin(x),r.cos(x)),答案怎么这么简单,不信,不信你可以用三个和四个点验证,我会说我就干过这事嘛。好了,进入正题,直接上函数,顺便说一句,我们在计算这个点的同时,也可以把标签的坐标点也一起算出来,直接上代码:

    let l = 6;  //极坐标点的个数,也急速雷达的维度个数;
    const single = 2*PI /l ;//计算偏转角度;
    let pointData=[],labelData=[];//声明两个数组,用于存储计算所得的坐标点;
    for(let i = 0;i<l;i++){
        let x = m.sin(i*single),y=m.cos(i*single);
        arcData.push([raduis*x,raduis*y]);
        labelData.push([(raduis+16)*x,(raduis+16)*y]); //这里的16是设置你的标签和你圆周之间的距离值,可以设成一个常量,方便修改;
    }

点计算好了,接下来我们需要连接每个点到圆心得连线

    /*输入画布,和要连接的点*/
    function drawLine(ctx,data){
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        for(let i= 0;i<data.length;i++){
            ctx.moveTo(0,0);//再次提示,你需要手动移动你的画笔,来开启你的下一次画线
            ctx.lineTo(data[i][0],data[i][1])
        }
        ctx.stroke();
    }  
    drawLine(ctx,arcData);
    

clipboard.png

提示:其实绘制这几根极坐标也可以采用坐标变换rotate API来执行,比如这样

rotate(single);
ctx.lingeTo(0,r);

这样也很简单,但为了后面,我们需要知道这些极坐标也圆的交点,这在后面会很有用,但不得否认canvas的translate和retate是两个很好用的方法.

根据前面标签的计算点,绘制标签

canvas文字绘制,涉及到的属性和方法有font(设置字体样式),textAlign(设置左右对齐),textBaseline(设置基线,上下对齐),fillText(文字绘制)直接上代码:

let label= ['卫生','安全','交通','住宿','景点','吃88喝'];
for(let i = 0;i<l;i++){
label[i] = {
    label:label[i],
    position:labelData[i]
    }
}
function drawText(ctx,data,style) {
    const max = data.length;
    ctx.font = 'bold 14px Arial';
    ctx.textBaseline ='middle'; //这个和textAlign都很重要,决定了整个图的美丑
    ctx.fillStyle ='red';  //style.backgroundColor
    console.log(ctx);
    /*下面这些很重要,至于为什么,自己体会*/
    for(let i=0;i<max;i++){
        let x= data[i].position[0];
        if((x>=-1)&&(x<=1)){  //由于single值的问题,所以很多时候没有x=0的出现,都是0.000001这种浮点数出现;
            ctx.textAlign ='center';
        }else if(x>1){
            ctx.textAlign ='left';
        }else{
            ctx.textAlign ='right';
        }
        ctx.fillText(data[i].label,...data[i].position);
    }
}     
drawText(ctx,label);

clipboard.png

提示:strokeText与fillText都可以为文本描边,但strokeText使用效果更好;另外使用fillText时,是使用fillStyle为文字设置颜色属性,而strokeText是采用strokeStyle设置文字颜色属性,很重要

根据输入的点,绘制雷达闭合区域

其实这一步也相当简单,就是根据点计算在响应极坐标上的落点,然后一一连线,然后为封闭区域着色,直接上代码:

    let data = [120,50,150,80,100,140];
    for(let i = 0;i<l;i++){
        let ratio = data[i]/raduis;
        pointData.push([arcData[i][0]*ratio,arcData[i][2]*ratio]);
    }
    function drawRegion(ctx,data) {
        const max = data.length;
        ctx.strokeStyle = 'yellowgreen';
        ctx.fillStyle='rgba(10,50,200,0.5)'; //设置了透明度,这样显得更美观
        ctx.beginPath();
        ctx.moveTo(...data[0]);
        for(let i=0;i<max;i++){
            ctx.lineTo(...data[i]);
        }
        ctx.lineTo(...data[0]);
        ctx.fill()
        ctx.stroke();
    }  
    drawRegion(ctx,pointData);      
    

clipboard.png

也许拐点区域特殊处理,更有味道

Echarts怎么做的,Echarts可以配置拐点样式,那我们也为我们的雷达图加上拐点吧。
如果你想用绘制一个线,并根据拐点圆的大小和切入角度,然后计算出这条线的长度,再绘制这个拐点,然后再接着画线,这样真的很难,有没有简单点的,有,就是投机取巧,绘完线后再绘制拐点,并将这个拐点圆填充,这样看起来就像是我们连着画的啦,但这样也有bug,如果我们没有填充颜色,或者填充的颜色有透明度,那么拐点下两条线相交就可见了,我们的连续绘制假象也就被自己拆穿了。还是上代码把:

    function drawPoint(ctx,data) {
        const max = data.length;
        const r= 3;
        ctx.fillStyle='white'; //rgba(10,50,200,0.5)
        ctx.beginPath();
        for(let i=0;i<max;i++){
            ctx.moveTo(data[i][0]+r,data[i][3]);
            ctx.arc(...data[i],r,0,2*PI);
            ctx.fill();
        }
        ctx.stroke();
        drawPoint(ctx,pointData);
    } 
    

clipboard.png

至此,我们基础的图形就画完了,现在我们要做最重要的一步,也就是轮播了。

做一个简单的自动轮播

还是直接上代码吧,下一篇文章再详说:

    let step =-1;
    function removeLabel(dom) {
        (dom.querySelectorAll('label').length)&&(dom.removeChild(dom.querySelector('label')));
    }
    function autoLabel(point){
        removeLabel();
        let label =document.createElement('label');
        label.innerHTML ='show:0999'; //这里先写成定值,后面会详述怎样定制轮播值

        label.style.position='absolute';
        label.style.top=point[1]+offset.y/2 +'px';
        label.style.left=point[0]+offset.x/2+'px' ;
        label.style.border='1px solid yellowgreen';
        label.style.background = 'gray';
        label.style.opacity = '0.5'
        label.style.zIndex = 999;

        dom.appendChild(label);
    }        
    setInterval(function(){
        step = (step+1)%6;
        autoLabel(draw,pointData[step]);
    },1000) 
    

clipboard.png

好了,至此我们就简单的实现了一个暂时没法定制的雷达轮播图,在下一篇文章我们将会根据这里提到的思想,开发一个与简易版的echarts radar插件。
如果发现有任何叙述不正确之处或有更好的想法,还请指正。
源码地址

本文系列:
从0开始撸一个支持单轴轮播的雷达图(Ehcarts的单轴显示问题)之中篇
从0开始撸一个支持单轴轮播的雷达图(Ehcarts的单轴显示问题)之末篇
本文首发于:http://closertb.site ,转载请注明

你可能感兴趣的文章

载入中...
Planets
Denzel Denzel

944 声望

发布于专栏

地铁上的小前端

生命不息,奋斗不止

3 人关注