echarts 网格属性_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全都是手绘的，