鍓嶈█锛氬ぇ鏁版嵁鏃朵唬锛屼互澶у睆涓鸿浇浣撶殑鏁版嵁鍙鍖栭渶姹備笌鏃ヤ勘澧烇紝鏁版嵁澶у睆瓒婃潵瓒婂浠ュ強鏇村浼佷笟涓氱哗灞曠ず銆佹姤琛ㄥ睍绀恒€佷笟鍔＄洃鎺х瓑褰㈠紡锛屽ぇ灞忕殑涓婄嚎甯︽潵渚垮埄锛屾棤闇€缂栫爜锛岀敤鎴峰彲浠ョ洿鎺ュ皢瑕佸睍绀虹殑缁勪欢鎷栨斁鍒扮敾甯冧笂锛岀劧鍚庤繘琛岄厤缃拰閰嶇疆闅忔剰甯冨眬锛屾墍瑙佸嵆鎵€寰椼€傚墠娈垫椂闂达紝鎴戜滑鎺ㄥ嚭浜嗚嚜宸辩殑鍐呴儴鍙鍖栨暟鎹ぇ灞忔祴璇曠増1銆傚湪涔嬪墠鐨勮皟鐮斾腑锛屽悇涓簯鏈嶅姟鍟嗕篃鎺ㄥ嚭浜嗚嚜宸辩殑鏁版嵁澶у睆鏁翠綋瑙ｅ喅鏂规锛屾瘮濡傞樋閲屼簯鐨刣atav锛岃吘璁簯鐨勮吘璁簯鍦板浘锛屽拰缃戞槗鐨勭綉鏄擄紝鐧惧害鐨凷ugar锛岄兘鍦ㄤ负鑷繁鐨勪骇鍝佽祴鑳藉悗鎺ㄥ嚭浜嗚嚜宸辩殑鍙鍖栨柟妗堬紝浣犲彲鑳戒細鏈夌枒鎯戰煠旓紝浜哄閮芥湁鎴愮啛鐨勬柟妗堬紝鎴戜滑涓轰粈涔堣鑷繁閫犺疆瀛愶紵鏃犻潪鏄竴鏂归潰鑰冭檻涓嶅悓鐨勪笟鍔″満鏅€傝櫧鐒舵湇鍔″晢宸茬粡閽堝涓氬姟鍦烘櫙鎻愪緵浜嗗緢澶氬ぇ灞忔ā鏉夸緵鐢ㄦ埛閫夋嫨锛屼絾鍏舵鏄鏈夊寲閮ㄧ讲鎴愭湰楂樼瓑闂銆?.1鐮旂┒瀵硅薄鐩墠鍥藉唴宸叉湁浼樼鐨勬暟鎹ぇ灞忚В鍐虫柟妗堣В鍐虫柟妗堟彁渚涘晢闃块噷浜?DataV)馃敆鑵捐浜戯紙鑵捐浜戝浘锛圖ataV锛夝煍楃綉鏄撲紭瑙嗭紙EasyScreen锛夝煍楃櫨搴︽櫤鑳戒簯锛堢硸锛夝煍楀鐜板湪鐨勮鎯呭ソ濂囩殑锛屼互涓嬫槸鐧惧害绯?.2鍔熻兘鍒嗘瀽鐮旂┒鍙婁箣鍚庣殑琛屾儏缁忓巻杩囦笂闈㈡彁鍒扮殑瑙ｅ喅鏂规锛屾垜瀵规暟鎹ぇ灞忕殑鍔熻兘杩涜浜嗘媶瑙ｏ紝澶ц嚧姊崇悊浜嗕竴涓畝鍗曠殑鏁版嵁澶у睆鍙鍖栫紪杈戞墍闇€瑕佺殑鍔熻兘锛屽寘鎷互涓?.3寮€婧愮幇鏈夊彲瑙嗗寲缂栬緫鏂规鐨勬湰璐ㄧぞ鍖烘暟鎹ぇ灞廳ashboardH5鍜學eb绛夊湪绾块〉闈㈢殑鍙鍖栫紪杈戦€昏緫鏄竴鏍风殑锛屾湰璐ㄤ笂杩樻槸鎷栨嫿锛宑ontrol绠＄悊銆乧anvas銆佺粍浠跺睘鎬х鐞嗐€侀瑙堢瓑锛屼絾鏄暟鎹ぇ灞忔洿寮鸿皟鏁版嵁鍙鍖栥€傚浘琛ㄦ槸閫氳繃鏁版嵁鍛堢幇鐨勩€備互涓嬫槸鏉ヨ嚜寮€婧愮ぞ鍖虹殑涓€浜涘彲瑙嗗寲缂栬緫瑙ｅ喅鏂规銆傛湁闇€瑕佺殑绔ラ瀷鍙互鍙傝€冮瞾鐝紙椴佺彮H5锛夝煍梙5-Dooring馃敆2.鍦ㄤ笂涓€鑺傚紑鍙戜腑锛屾垜浠媶瑙ｄ簡澶ф暟鎹睆鐨勫姛鑳芥ā鍧椾富瑕佸垎涓烘帶鍒跺尯锛岀敾甯冨尯锛屾帶鍒跺睘鎬ч厤缃尯銆佸浘灞傚尯绠＄悊绛夋ā鍧椼€傚洜涓烘秹鍙婂埌鍐呴儴闅愮锛岃繖閲屽氨浠ョ綉鏄撴湁涔︿负鍙傝€冭繘琛屽睍绀恒€傞€氱敤妯″潡濡備笅2.1鎺у埗鍖烘帶浠跺尯鍩熷寘鎷ぇ灞忔帶浠剁殑鏄剧ず锛屾帶浠剁粍浠剁殑娉ㄥ唽鍜屽垵濮嬪寲锛屾帶浠舵敮鎸佹嫋鎷藉埌鐢诲竷绛夊姛鑳姐€備笅闈㈡槸鎺т欢鍖哄彲瑙嗗寲鎼缓鐨勪氦浜掓紨绀哄浘锛屽彂鐜伴瞾鐝娇鐢╡chart浣滀负鍥捐〃鎺т欢鐨勬覆鏌撳浘琛ㄥ簱锛屽彲浠ョ湅鍒伴摼鎺ワ紝鎴戜滑鍦ㄥ浘琛ㄥ簱涓€夋嫨鐨勬槸浣跨敤铓傝殎閲戞湇鐨刟ntv鐨凣2Plot馃敆锛宎ntv涔熸帹鍑轰簡鍩轰簬G2PlotchartCube馃敆鐨凙ntV鍦ㄧ嚎鍥捐〃鍒朵綔宸ュ叿锛屽彲浠ュ湪绾挎紨绀哄拰棰勮涓嶅悓鐨勫浘琛ㄦ暟鎹覆鏌撴晥鏋溿€傚叾浠栨帶浠跺鏂囨湰妗嗐€佸浘鐗囥€佸畾鏃跺櫒绛夐兘鏄嚜瀹氫箟鐨勩€傛兂鐪嬫簮鐮佺殑绔ラ瀷鍙互鍙傝€冮瞾鐝環5鐨勬彃浠娥煍?.1.2缁勪欢娉ㄥ唽鍜屽垵濮嬪寲姣斿娉ㄥ唽涓€涓枃鏈帶浠讹紝浣犲彲鑳戒細璇存垜鍙互涓€涓€閰嶇疆锛屽涓嬪鍥攫煈囦絾鏄鏋滆繖涓柟娉曞悗鏈熺淮鎶ょ殑鎺т欢姣旇緝澶氾紝鍦ㄦ牴鎹被鍨嬪垽鏂敾甯冧腑鐨勬覆鏌撶粍浠剁殑鏃跺€欏氨浼氭湁寰堝鍐椾綑鐨勪唬鐮併€傝繖鏃跺€欐垜浠彲浠ヤ娇鐢╲ue鐨刬s灞炴€у姩鎬佹覆鏌撶粍浠舵搷浣滐紝濡備笅鍥?.1.3鍏充簬鎷栧姩鍒扮敾甯冨叧浜庢帶浠剁殑鎷栧姩锛屼娇鐢╲uedraggable[閾炬帴馃敆](https://github.com/SortableJS...)锛屽畠鏄熀浜巚ue瀹炵幇鐨凷ortable.js鎷栨嫿鎻掍欢锛屽疄鐜板涓嬸煂插欢浼搁槄璇?.2Canvas妯″潡Canvas鐢ㄤ簬鏀剧疆鎺т欢锛屼綔涓烘帶浠舵潵鎷栨嫿鍜屾媺浼稿尯鍩熼檺鍒剁敾甯冩ā鍧楄缃儗鏅浘鐗囨垨鑳屾櫙棰滆壊璁剧疆銆佹帶浠舵帓鍒椼€佺敾甯冩瘮渚嬭缃€佸搷搴斿紡鐢诲竷銆佸叏灞忔樉绀虹瓑銆?.2.1鍝嶅簲寮忕敾甯冣湉锔忕紪杈戞ā寮忓綋鎴戜滑鎷変几璋冩暣娴忚鍣ㄧ獥鍙ｈ鍥剧殑澶у皬鏃讹紝鎴戜滑鐩戝惉onresize浜嬩欢銆俹nresize浜嬩欢灏嗗湪绐楀彛鎴栨鏋惰皟鏁村ぇ灏忔椂鍙戠敓銆備竴鑸敾甯冪殑姣斾緥璁剧疆涓?6:9鎴?:3杩欎袱绉嶆瘮渚嬪眳澶氥€備笅闈㈡潵鐪嬬湅鏁堟灉缂栬緫妯″紡涓嬬殑鐢诲竷銆傝繖閲屾垜浠互16:9鐨勬瘮渚嬩负渚嬶紝鏍规嵁鐢诲竷鍖哄煙鐨勫搴︽洿鏂版潵璁＄畻锛屼絾鏄繖涓晥鏋滃苟涓嶅ソ銆俻s锛氭垜浠€氳繃鍒ゆ柇鏄惁鏄叏灞忔樉绀烘ā寮忥紝濡傛灉涓嶆槸锛屽垯涓篶anvasview棰勭暀涓€閮ㄥ垎绌虹櫧鍖哄煙馃摵鍦ㄩ瑙堟ā寮忓拰缂栬緫妯″紡涓嬶紝鎴戜滑鍏佽鍑虹幇婊氬姩鏉★紝浣嗘槸棰勮妯″紡涓嬬殑dashboard鐢ㄤ簬鏄剧ず锛岄€氬父涓嶅厑璁稿嚭鐜版粴鍔ㄦ潯銆傞偅涔堟垜浠浣曞疄鐜拌繖绉嶅満鏅憿锛熸垜鐨勭悊鎯虫晥鏋滄槸涓嶇绐楀彛鎬庝箞鍙樺寲锛屾垜浠殑鍐呭閮戒細淇濇寔鍘熸潵鐨勬瘮渚嬶紝灏介噺濉弧绐楀彛銆傛垜鍙傝€冧簡杩欎釜瑙ｅ喅鏂规锛欰daptive閫傞厤澶у睆椤甸潰鍏ㄥ睆鐨勮В鍐虫柟妗?.2.2鏁版嵁鍏ㄥ睆鏄剧ず澶у睆鏄剧ず鐨勬渶缁堝舰寮忔槸鍏ㄥ睆鏄剧ず锛屾湰璐ㄤ笂鍙樉绀篶anvas鍖哄煙锛岄殣钘忔墍鏈夌紪杈戝尯鍜岄厤缃尯銆傛垜浠娇鐢╥sEdit鏉ユ帶鍒舵槸鍚︽樉绀虹敾甯冧互澶栫殑鍏朵粬鍖哄煙銆傚浣曞搷搴斿叏灞忎簨浠剁洃鍚€氳繃鐩戝惉fullscreenchange浜嬩欢锛岄€€鍑哄叏灞忎細閲嶆柊璁＄畻鐢诲竷瑙嗗浘鐨勫ぇ灏忋€俻s锛氫负浜嗗畨鍏ㄨ捣瑙侊紝鍏ㄥ睆鍙兘鐢辩敤鎴锋搷浣滅殑浜嬩欢瑙﹀彂锛屼笉鑳介€氳繃浠ｇ爜鐩存帴瑙﹀彂锛屼細鎶ラ敊銆?.2.3澶у睆鎴浘鐢熸垚涓€寮犲浘鐗囷紝浣跨敤domtoimage馃敆鐢熸垚鎴浘锛屽彲浠ュ皢浠ｇ爜杞浘鐗囥€傜被浼肩殑宸ュ叿鍖呮嫭html2canvas銆傜浉姣斾箣涓嬶紝domtoimage鍦ㄧ敾璐ㄥ拰鎵╁睍鎬т笂鏇磋儨涓€绛广€備笅闈㈡槸鍏蜂綋鐨勪娇鐢?.2.4鎺т欢澶у皬鎷栨斁姝ｅ鎴戜滑鍦ㄤ笂涓€鑺備腑鎻愬埌鐨勶紝鐢诲竷瀹為檯涓婃槸鐢辨嫋鏀炬帶浠剁粍鎴愮殑鍖哄煙銆傜敾甯冮噷闈㈡湁鎴戜滑鑷畾涔夌殑鎺т欢锛岃繖浜涙帶浠跺簲璇ュ彲浠ヨ嚜瀹氫箟鎷栨嫿鐨勫ぇ灏忋€傛垜浠琭ork浜唙ue-draggable-resizable馃敆锛岀劧鍚庡湪瀹冪殑鍩虹涓婂仛涓€浜涜皟鏁达紝褰撶劧浣犱篃鍙互鑷繁閫犺疆瀛愩€備娇鐢ㄥ涓嬸煈囷紝鍖呮嫭閮ㄥ垎API鐨勪娇鐢ㄣ€俤raggable:鐢ㄤ簬鏍囪瘑鏄惁澶勪簬缂栬緫妯″紡锛岀紪杈戞ā寮忔帶浠朵笉鑳界Щ鍔╠ragstop:鐩戝惉鎺т欢鎷栧姩缁撴潫锛屾鏃舵垜浠敾甯冧腑鎺т欢鐨勪綅缃俊鎭彂鐢熶簡鍙樺寲锛岃繖涓椂鍊欐垜浠渶瑕佽窡闅忓彸渚oolbar鏁版嵁鍚屾锛屼綔涓烘洿鏂板伐鍏锋潵闃绘琛ㄥ崟鏁版嵁resizstop锛氱缉鏀惧悗锛岀晫闈㈣姹傛洿鏂版暟鎹甦elete锛氭垜浠湪鍘熸湁vue-draggable-resizable鍩虹涓婂鍔犵殑keyEvent浜嬩欢锛岀敤浜庡垽鏂殑鍒犻櫎浜嬩欢thekeyboardactivated:鐩戝惉click鎺т欢锛岄€変腑骞跺鐞?.2.5canvas缂╂斁鎺т欢鏀寔缂╂斁锛宑anvas搴旇涔熸敮鎸佺缉鏀俱€傛垜浠畾涔変簡scale锛屽彲浠ユ搷浣滃畠鏉ユ敼鍙樺畠鐨勭缉鏀惧€硷紝鐒跺悗閫氳繃璁＄畻涓€涓獄oomstyle鏉ユ敼鍙榗anvas鐨勫睘鎬?.1鎺т欢閰嶇疆鍖烘帶浠堕厤缃尯鍒嗕负涓や釜妯″潡銆?涓ā鍧楃敤浜庣鐞嗙敾甯冧腑鎺т欢鐨勫睘鎬э紝鍖呮嫭楂樺害銆佸搴︺€佸ぇ灏忋€佸瓧浣撳ぇ灏忋€佸瓧浣撶被鍨嬬瓑鍩烘湰灞炴€с€傚拰鍏朵粬鎺т欢涓€鏍凤紝鏂囧瓧鏈夊榻愭柟寮忥紝鍥剧墖鏈夊浘鐗囦笂浼犳ā鍧楋紝濉厖鏃堕挓鐨勬ā寮忋€佹椂闂存牸寮忛€夐」绛夛紝姝ゅ鏈垪鍑恒€傛湰璐ㄤ笂鏄姩鎬佽〃鍗曠殑閰嶇疆3.1.1鏁版嵁绠＄悊閫氬父鎴戜滑鐨勬暟鎹鐞嗘槸鐢ㄦ潵閰嶇疆鍥捐〃绛夋帶浠剁殑鏁版嵁锛屼竴鑸敮鎸乯son闈欐€佹暟鎹紝csv琛ㄦ牸鏁版嵁瀵煎叆锛孉PI鎺ュ彛鍔ㄦ€侀厤缃€備笅涓€鏈燂紝鎴戜細鍜屽ぇ瀹惰亰鑱婃暟鎹鐞嗘槸濡備綍瀹炵幇鐨勶紝灞傛槸濡備綍绠＄悊鐨勶紝浠ュ強涓€浜涗娇鐢ㄤ笂鐨勫績寰椼€傝鍠濅竴鏉煃佃寰椾笁杩炶繛~1.鐪嬪畬璁板緱缁欚煂查叡鐐逛釜璧烇紝璧烉煈嶆湁鍔ㄥ姏2.鍏虫敞鍏紬鍙峰墠绔叮浜嬶紝鍜屼綘鑱婅亰鍓嶇瓒ｄ簨3.閭ｄ釜鏂囩珷鏀跺綍鍦℅ithubfrontendThingsThanksStar鉁?/p>
