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 下边上代码；
代码结构
代码上可以看到主要是三大块；主要原因是我把中间的合二为一了；
简单介绍下每个节点的属性；
常用的属性基本就是这样，group使用的时候直接包裹在子节点组成的数组外边就可以了；
这里主要说下折现的计算，后端给的数据是不能直接用来展示节点的位置的，
这里需要我们手动计算把数据的大小转换成页面展示需要的[x, y];
有兴趣的小伙伴试试，写这个真的不容易有些没说明白的地方请在下边留言， 都看到这里了点个赞呗！ 谢谢！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。