鍓嶈█鎻愬埌浜嗘暟鎹彲瑙嗗寲妗嗘灦锛屼笉杩囧緢澶氶兘鍘讳簡Echarts銆丄ntV銆丏3绛夈€備絾鏄紝杩欎簺鏁版嵁鍙鍖栨鏋舵湁涓€涓叡鍚岀偣馃樁锛屽氨鏄畠浠殑浣跨敤閮界涓嶅紑JavaScript銆傜浉鍙嶏紝Charts.css鏄竴涓函CSS瀹炵幇鐨勬暟鎹彲瑙嗗寲妗嗘灦銆傚叾鏍稿績鏄皢琛ㄦ牸鏍囩琛ㄧず涓烘煴褰㈠浘銆佹姌绾垮浘銆侀ゼ鍥剧瓑銆侰harts.css鐨勪娇鐢ㄩ潪甯哥畝鍗曪紝鏀寔浠ヤ笅涓ょ浣跨敤鏂瑰紡锛氫娇鐢╨ink鏍囩灏咰harts.css鏂囦欢瀵煎叆鍒板師鐢焪eb椤圭洰锛屽彲浠ユ槸CDN涓婄殑鍦板潃锛屼篃鍙互鏄粠GitHub涓婁笅杞絉eleased浠ｇ爜鍒版湰鍦板湪鏈夊寘绠＄悊鐨勯」鐩腑浣跨敤锛屽嵆閫氳繃npmicharts.css鎴杫arnadd娣诲姞鍒伴」鐩腑charts.css閭ｄ箞鎺ヤ笅鏉ュ氨璁╂垜浠粠濡備綍浣跨敤Charts.css瀹炵幇鏌辩姸鍥惧紑濮嬶紝璁よ瘑涓€涓嬪皬鑰岀編馃槑~浣跨敤Charts.css瀹炵幇鏌辩姸鍥句竴鑸潵璇达紝鎴戜滑瀵规煴褰㈠浘姣旇緝绠€鍗曪紝鍙渶瑕佹樉绀烘暟鎹ぇ灏忓拰鏁版嵁鍚嶇О銆傞€氳繃浣跨敤Charts.css锛屾垜浠疄鐜颁簡杩欎釜锛?tableclass="charts-csscolumnshow-labelsdata-spacing-5">
| Jan | 40鍥捐〃銆俢ss
瀵规垜鏉ヨ澶鏄撲簡銆?/span>
|---|
| 浜屾湀 | 60
|---|
| Mar | 75
|---|
| Mar | 35
|---|
鐩稿簲鍦帮紝椤甸潰涓婄殑娓叉煋浼氭槸杩欐牱鐨勶細濡備綘鎵€瑙侊紝鎴戜滑涓嶄笉闇€瑕佸啓涓€琛孞avaScript浠ｇ爜馃槡灏卞彲浠ュ疄鐜颁竴涓畝鍗曠殑鐩存柟鍥俱€傛帴涓嬫潵锛屾垜浠潵浜嗚В涓€涓嬩笂闈㈡瘡娈礖TML浠ｇ爜鐨勪綔鐢細.charts-css鏂囩珷寮€澶翠粙缁嶄簡Charts.css锛岀敤鏉ュ皢琛ㄦ牸鏍囩鏄剧ず涓哄悇绉嶅浘琛ㄣ€傚洜姝ら渶瑕佸湪table鏍囩涓坊鍔?charts-css绫婚€夋嫨鍣紝灏嗘櫘閫氭暟鎹〃鏍艰浆鎹负鍥捐〃锛?tableclass="charts-css">.column鍥捐〃绫诲瀷杞崲涓烘櫘閫氭暟鎹〃鏍煎垱寤哄悗鍥捐〃锛屾偍闇€瑕侀€夋嫨鍥捐〃绫诲瀷銆傚凡鍙戝竷锛圧eleased锛夌殑鍥捐〃绫诲瀷鏈夛細bar銆乧olumn銆乤rea銆乴ine銆備笂闈㈢殑渚嬪瓙涓紝澹版槑鐨勫浘琛ㄦ槸.column锛屽畠鏄竴涓珫鐩寸殑鏌卞舰鍥撅細
.show-lables鏄剧ずlabel鐨勬瘡涓猼r鏍囩涓殑绗瑃h涓爣绛惧皢浣滀负褰撳墠涓€鏉℃暟鎹殑鏍囩锛屽嵆涓婁緥涓煴鐘跺浘鐨勬í杞淬€備絾鏄紝榛樿鎯呭喌涓嬩笉鏄剧ず銆傚洜姝わ紝闇€瑕佸湪琛ㄦ牸鏍囩涓坊鍔?show-labels閫夋嫨鍣ㄦ潵鏄剧ず鏍囩锛?tableclass="charts-csscolumnshow-labels">.data-spacing-5鏁版嵁闂磋窛榛樿鎯呭喌涓嬶紝Charts.css鏄剧ず鐨勬煴褰㈠浘涓殑姣忎竴鍒楅潬寰楀緢杩戙€傚彲浠ュ湪琛ㄦ牸涓坊鍔?data-spacing-5閫夋嫨鍣ㄦ潵淇濇寔姣忓垪涔嬮棿鐨勯棿璺濓紝杩欐牱鐪嬭捣鏉ヤ細鏇寸編瑙傦紝鍏朵腑鏈€鍚庝竴涓€间唬琛ㄤ綘闇€瑕佺殑闂磋窛澶у皬锛?tableclass="charts-csscolumnshow-labelsdata-spacing-5">.--sizedatasize鍦ㄥ浘琛ㄤ腑锛岄〉闈㈡樉绀虹殑姣忔潯鏁版嵁鐨勫ぇ灏忕敱--size灞炴€х殑鍊煎喅瀹氥€傛瘮濡備笂闈㈢殑渚嬪瓙涓紝鎸囩殑鏄瘡鏉℃暟鎹搴旂殑鍒楃殑楂樺害銆傚湪Charts.css涓紝涓€瀵箃r鏍囩浠ｈ〃涓€鏉℃暟鎹€傜浉搴旂殑锛宼r鏍囩涓殑td鏍囩鐨勬牱寮忎篃闇€瑕佸姞涓?-size灞炴€с€傛瘮濡傚綋瑕佹眰鏁版嵁灞曠ず鐨勯暱搴︽槸鍩哄噯鐨?0%鏃讹紝鍙互杩欐牱鍐欙細60.tooltipdisplays濡傛灉浠呭皢鏁版嵁鏄剧ず涓哄浘琛ㄧ殑闄勫姞淇℃伅锛屾湁鏃跺彲鑳芥棤娉曟弧瓒虫垜浠殑闇€姹傘€傚湪涓婇潰鐨勪緥瀛愪腑锛屾垜浠湪绗竴涓爮涓婃坊鍔犱簡涓€涓偓鍋滄潵鏄剧ず闄勫姞淇℃伅锛圕harts.css瀵规垜鏉ヨ澶畝鍗曚簡銆傦級銆傝€岃繖涓晥鏋滄槸閫氳繃鍦╰d鏍囩涓坊鍔爏pan鏍囩锛屽湪span鏍囩涓坊鍔?tooltip閫夋嫨鍣ㄦ潵瀹炵幇鐨勶細| Jan | 40Charts.css
瀵规垜鏉ヨ澶畝鍗曚簡銆?/span>
|---|
缁撹铏界劧鐩墠Charts.css鍙敮鎸?涓浘琛紝浣嗚繕鏈?涓浘琛ㄦ鍦ㄥ紑鍙戜腑銆備絾鏄紝涓嶅彲鍚﹁Charts.css鍙互姣棤绮剧璐熸媴鍦颁娇鐢ㄣ€傚湪Charts.css鏇村姞瀹屽杽涔嬪悗锛屾垜瑙夊緱鍦ㄤ竴浜涚畝鍗曠殑鍥捐〃鍦烘櫙涓婥harts.css涔熸槸闈炲父鍊煎緱鎺ㄨ崘鐨勯€夋嫨锛佺偣璧烉煈嶇湅瀹岃繖绡囨枃绔狅紝濡傛灉鏈夋敹鑾凤紝鍙互鐐逛釜璧烇紝杩欎細鎴愪负鎴戠户缁垎浜殑鍔ㄥ姏锛岃阿璋鎴戞槸浜斿叚锛屽枩娆㈠垱鏂帮紝榧撴崳婧愮爜锛屽叧娉ㄦ簮鐮佷唬鐮侊紙Vue3銆乂ite锛夈€佸墠绔伐绋嬨€佽法绔瓑鎶€鏈涔犲垎浜€傚彟澶栵紝鎴戞墍鏈夌殑鏂囩珷閮戒細鏀跺綍鍦╤ttps://github.com/WJCHumble/Blog锛屾杩庡叧娉ㄦ垨Star锛?/p>
