echarts-绘制网格-教你使用graphic

echarts 绘制网格 教你使用 graphic

主子镇楼

不经常使用的 echarts 的同学对于 echarts 的认识基本停留在饼图，柱形图，条形图，折线图等一系列常规图形上，对于网格基本是一脸懵，小伙伴会问了网格不都是用 canvas 或者 svg 话的吗？这一类不特殊图标一般都是 D3 定制的（不了解 D3 的小伙伴请移步：D3.js 官网）就不多解释了！我们一般不会为了一个图，而引用一个插件或者图库，代价太大，所以我想说 这个功能 echarts 也可以实现，今天就教你了解 graphic；

graphic

echarts 中满足用户对于自定义图形绘制的需求，主要属性包括 image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group；

不必多做解释了吧！
group 相对来说特殊一点它不是图形，group 是唯一的可以有子节点的容器。group 可以用来整体定位一组图形元素。相当于 D3 中的 g 组，主要作用是将节点分割成不同的图层，不管是代码上还是页面都比较清晰；但是添加 group 以后一些算距离的地方要注意，

三测单

先上一个我自己项目画的吧！这是一张医院使用的三测单，也叫体温单，主要展示病人以周为时间维度的体温、脉搏、心率以及呼吸；
接下来我们就来写以下吧！
因为 graphic 全都是手绘的，所有距离都是自己算的，再加上我需要处理后端接收过来的数据，导致代码量比较大，就不贴全部的代码了；

切割图片

建议小伙伴也这样做一张图拿过来，先看下结构，切割一下，这样写起来也比较简单明了；

具体的切割依据每个人都不一样，我的依据就是：相同的线比较多放在一起，其次同层交互的需要放一起，并且 graphic 遵循先画的在下边，后画的在上边；所以记住有交互需求的节点放在一个 group 内，一定要放在最上边，避免出现看得见点不到的问题；
ok 下边上代码；

代码结构

看的到我的图形是存在 tooltip 交互的；
代码上可以看到主要是三大块；主要原因是我把中间的合二为一了；
简单介绍下每个节点的属性；
；
常用的属性基本就是这样，group 使用的时候直接包裹在子节点组成的数组外边就可以了；

这里主要说下折现的计算，后端给的数据是不能直接用来展示节点的位置的，
这里需要我们手动计算把数据的大小转换成页面展示需要的 [x, y];

有兴趣的小伙伴试试，写这个真的不容易有些没说明白的地方请在下边留言，都看到这里了点个赞呗！谢谢！