慕森卡
2018-11-22 18:15:34
大四畢業生,畢業之后裝正在之前實習的公司,部門總監給了一個任務叫我寫一個可配置的可視化react組件,但是這個可配置的理解是什么,不是很理解,我目前是打算利用Three.js作為核心,來做一個類似于echarts那樣的配置類型的react組件,不過我還是感到迷茫,最近幾天寫代碼都是寫了刪,刪了寫,對于可配置的理解還不是很明確。
1 回答

qq_花開花謝_0
TA貢獻1835條經驗 獲得超7個贊
簡單一點說吧,可視化最常見的媒介就是圖形圖表,無論是基于 canvas(比如 echart)還是 svg(比如 d3)或是 WebGL(比如 Three.js),創建圖表最主要的工作就是傳遞合適的數據和參數。
牽扯到 React,那自然是說要把各種圖表類型封裝成組件來使用了,而組件都是狀態驅動的,也就是說傳遞的狀態變化可以讓組件重新渲染,在視覺上的表現就是所謂的“實時更新”。
于是,“可配置”的意思無非就是數據和參數不能寫死在組件里,而是能夠合理的設計組件讓這些東西通過參數傳遞的方式來渲染這些圖表組件。所要打到的效果就是組件內部的實現(圖表的組裝和渲染過程)是隱藏的,而決定組件具體呈現的數據是可以通過參數傳遞的,從而達到更高的擴展性、維護性、可讀性、可重用性等等。
照這個思路去做就不會有問題了,不過中間要處理的細節會很多,也很考驗設計能力(我指的是代碼和接口設計),先從最簡單的做起吧,比如說繪制一個最基本的 Bar/Column 圖,基本的屬性,諸如 series data, x/y axis, label, unit, scale, legend 等等都可以通過參數傳遞,并且當參數變化的時候組件可以自動更新之類的。
添加回答
舉報
0/150
提交
取消