大四畢業生，畢業之後裝正在之前實習的公司，部門總監給了一個任務叫我寫一個可配置的可視化react組件，但是這個可配置的理解是什麼，不是很理解，我目前是打算利用Three.js作為核心，來做一個類似echarts那樣的配置類型的react元件，不過我還是感到迷茫，最近幾天寫程式碼都是寫了刪，刪了寫，對於可配置的理解還不是很明確。
簡單一點說吧，可視化最常見的媒介就是圖形圖表，無論是基於canvas（比如echart）還是svg（比如d3）或是WebGL（比如Three.js），創建圖表最主要的工作就是傳遞合適的數據和參數。
牽扯到React，那自然是說要把各種圖表類型封裝成元件來使用了，而元件都是狀態驅動的，也就是說傳遞的狀態變化可以讓元件重新渲染，在視覺上的表現就是所謂的“即時更新”。
於是，「可設定」的意思無非是資料和參數不能寫死在元件裡，而是能夠合理的設計元件讓這些東西透過參數傳遞的方式來渲染這些圖表元件。所要打到的效果就是元件內部的實作（圖表的組裝和渲染過程）是隱藏的，而決定元件具體呈現的資料是可以透過參數傳遞的，從而達到更高的擴展性、維護性、可讀性、可重複使用性等等。
照這個思路去做就不會有問題了，不過中間要處理的細節會很多，也很考驗設計能力（我指的是程式碼和介面設計），先從最簡單的做起吧，比如說繪製一個最基本的Bar/Column 圖，基本的屬性，諸如series data, x/y axis, label, unit, scale, legend 等等都可以透過參數傳遞，並且當參數變化的時候元件可以自動更新之類的。
需求就只有總監一句話嘛？其它什麼文檔都沒有？
簡單一點說吧，可視化最常見的媒介就是圖形圖表，無論是基於canvas（比如echart）還是svg（比如d3）或是WebGL（比如Three.js），創建圖表最主要的工作就是傳遞合適的數據和參數。
牽扯到React，那自然是說要把各種圖表類型封裝成元件來使用了，而元件都是狀態驅動的，也就是說傳遞的狀態變化可以讓元件重新渲染，在視覺上的表現就是所謂的“即時更新”。
於是，「可設定」的意思無非是資料和參數不能寫死在元件裡，而是能夠合理的設計元件讓這些東西透過參數傳遞的方式來渲染這些圖表元件。所要打到的效果就是元件內部的實作（圖表的組裝和渲染過程）是隱藏的，而決定元件具體呈現的資料是可以透過參數傳遞的，從而達到更高的擴展性、維護性、可讀性、可重複使用性等等。
照這個思路去做就不會有問題了，不過中間要處理的細節會很多，也很考驗設計能力（我指的是程式碼和介面設計），先從最簡單的做起吧，比如說繪製一個最基本的Bar/Column 圖，基本的屬性，諸如series data, x/y axis, label, unit, scale, legend 等等都可以透過參數傳遞，並且當參數變化的時候元件可以自動更新之類的。
需求就只有總監一句話嘛？其它什麼文檔都沒有？