从0开始撸一个支持单轴轮播的雷达图（Ehcarts的单轴显示问题）之头篇

引子

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

整理一下思路

想实现如上图这样一个建议雷达图&＃xff0c;需要几步&＃xff1f;个人总结&＃xff0c;需要&＃xff1a;
初始化一个canvas对象&＃xff1b;

1. 以画布中心&＃xff0c;绘制三个同心圆&＃xff1b;

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

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

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

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

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

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

分布实现

初始化一块画布

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

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

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

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

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

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

画同心圆

在echarts中&＃xff0c;圆的个数可通过splitNum配置&＃xff0c;其实这个实现也不难&＃xff0c;可通过下面的代码实现&＃xff1a;

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

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

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

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

let l &＃61; 6; //极坐标点的个数&＃xff0c;也急速雷达的维度个数&＃xff1b;const single &＃61; 2*PI /l ;//计算偏转角度&＃xff1b;let pointData&＃61;[],labelData&＃61;[];//声明两个数组&＃xff0c;用于存储计算所得的坐标点&＃xff1b;for(let i &＃61; 0;i

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