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全都是手绘的,