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];

有興趣的小夥伴試試，寫這個真的不容易有些沒說明白的地方請在下邊留言， 都看到這裏了點個讚唄！ 謝謝！