原创 在git上創建項目(最簡單上手)
一、前言 開發過程中,時常會自己寫個小的demo,一直處於懶癌晚期,索性就在當前開發的項目中寫了,等提交代碼時,revert就好了,這樣雖然很方便,但有很大的弊端:無法保存demo。後來,說服自己,另起一個自己的項目,平時學習或
原创 Bizchart圖表封裝之分組箱型圖(自定義圖例、設置Slider)
一、分組箱型圖的封裝 先吐槽下官網分組箱形圖的demo。 讓人凌亂的數據結構 。第一次使用分組箱形圖,差一點就被官網demo的數據結構嚇退,在羣裏面問了好久,慢慢的才反應過來,官網的數據居然是最原始的數據—
原创 Bizchart圖表封裝之基礎箱型圖(自定義圖例、設置Slider)
一、基礎箱形圖的封裝 根據數據的類型,也可以將基礎箱型圖分爲兩種: ①、"數組型":即其每天item對應的數值爲數組([number,number,number,number,number]), e
原创 bizcharts圖表封裝之基礎(單)面積圖(帶Slider)
一、可設置滾動條的基礎面積圖(單)組件封裝 組件功能設置說明: 1、對於連續性圖表(折線圖、面積圖等)建議爲圖表橫座標設置range屬性(詳見代碼); 2、連續性圖表建議設置 shape=“smooth”(實際情況看需求)
原创 bizcharts圖表封裝之百分比堆疊柱狀圖(可設置Slider)
一、百分比堆積柱狀圖(可設置Slider) 需求: 統計出x年下,人民年收入(收入:1萬以下、1萬-10萬、10萬-20萬、20萬以上)所佔比例 要求: 使用堆積柱狀圖;保留小數點後兩位小數 遇到問題:
原创 bizchart圖表封裝之多條折線圖
多條折線圖: 顧名思義,有多條折線 封裝: 數據源、座標軸、是否顯示座標軸標題、橫縱座標範圍限定、自定義圖例及顏色 注意: 1、代碼使用TypeScript實現 2、本次代碼實現的均是曲線折線圖
原创 Bizcharts 之不常用API學習記錄
1前言 日常開發過程中,使用bizcharts組件時,習慣了從官網複製代碼,改改直接放入項目中或者將組件需要的數據以參數的形式傳入到組件, 一旦遇到官網沒有的組件類型(一般是組合形式)或者是官網沒有的組件樣式(目前
原创 你可能不知道的children(React)
一、我以爲的children children嘛,child的複數形式,所以顧名思義,某個組件的children(this.props.children/props.children)其實就是這個組件的子組件,表現在代碼中,無非
原创 bizcharts圖表封裝之基礎餅圖
一、基礎餅圖“分類”及不同分類後的封裝 1.1分類 基礎餅圖表現形式一樣,但是按照使用上的不同,基礎餅圖封裝分爲兩類:組件(前端)計算所佔百分比和接口(後端計算百分比)。區別如下: 組件計算百分比(百分比餅圖):①、
原创 bizcharts之分組箱形圖
一、所謂前言 公司某個項目後期優化,分組區間柱狀圖改成分組箱形圖,因爲這兩天剛好用到箱形圖,就想着分組箱形圖與箱型圖之間應該和柱狀圖與分組柱狀圖一樣,想着,就去查找官網,結果,就4個橫座標、3個圖例,源數據居然有150條,3(圖例)
原创 bizcharts圖表封裝之多面積圖(帶Slider)
一、可設置滾動條Slider的多面積圖圖表 組件功能設置說明: 1、對於連續性圖表(折線圖、面積圖等)建議爲圖表橫座標設置range屬性(詳見代碼); 2、連續性圖表建議設置 shape=“smooth”(實際情況看需求)
原创 bizcharts圖表封裝之基礎雷達圖
一、基礎雷達圖的封裝 從官網的demo發現,基礎的雷達圖有兩種,一種是線,一種是面,兩者區別僅僅是線的圖中沒有<Goem type="area"/>,不過此次封裝還做了兩種的。 基礎雷達圖-面 import React f
原创 bizcharts圖表封裝之基礎環圖
一、基礎環圖組件封裝 說明: 建議接口(後端)直接返回每個item對應的value(不需要計算出百分比),此次封裝也只是基於後端不處理百分比處理的 import React from "react"; im
原创 bizchart之使用總結
最近做前端開發,幾乎全部都是統計圖表,從基本的折線圖、柱狀圖、餅圖再到分別加滾動條,再到不怎麼常用的桑基圖、熱力圖以至於後面的雙軸圖,反正呢,你能想到的你想不到的我們公司的產品都可以幫你想出來,雖說是一把辛酸淚,但也是學到了好多
原创 bizcharts圖表封裝之熱力圖(可設置Slider)
一、熱力圖-色塊圖組件封裝 第一次熱力圖中的色塊圖時,差點被官網demo的數據格式嚇退了。但是既然產品選擇了,作爲開發,只能盡最大努力來實現了。於是和同事討論這個數據格式,照着官網處理後的數據格式,感覺每個數據都要給定具