頭條資訊 - 為您提供最新最全的新聞資訊,每日實時更新

手把手教你用ECharts畫餅圖和環形圖

科技數碼 工科男聊HTML5

導讀:餅圖也是一種常用的基本圖表,主要用來展示各項的比重。

作者:王大偉

來源:大數據DT(ID:hzdashuju)

下面製作一幅基礎的餅圖,將Echarts中series的type參數值設置為pie,如圖4-14所示。

代碼如下:

手把手教你用ECharts畫餅圖和環形圖

▲圖4-14 餅圖

在上述代碼中,將legend設置為vertical,是為了避免水平顯示後會與標題重疊。這裡將tooltip的顯示格式設置為:formatter: ' : (%)',各參數在餅圖中的具體含義為:(系列名稱),(數據項名稱),(數值),(百分比)。當鼠標懸停在某塊餅上時,該塊餅會突出顯示且按照formatter的格式顯示文字和數值。

需要注意的是,當我們點擊餅圖的legend時,如點擊C商品的legend時,C商品的圖例會變為灰色,同時,餅圖中將不再顯示C商品餅塊,且會重新計算百分比,如圖4-15所示。

手把手教你用ECharts畫餅圖和環形圖

▲圖4-15 餅圖顯示控制

除了基本的餅圖,我們也常常會用到環形圖。在ECharts中,在series中加上radius參數即可繪製環形圖,例如下面代碼中的radius: ['50%', '70%'],代表環內部半徑和外部半徑的比例分別為50%、70%。

環形圖可視化結果如圖4-16所示。

手把手教你用ECharts畫餅圖和環形圖

▲圖4-16 環形圖

關於作者:王大偉,畢業於華東理工大學,碩士學歷,目前就職於平安金融壹賬通,從事數據挖掘算法工作,擅長ECharts、Python、自然語言處理、數據分析挖掘、機器學習。曾獲微軟最有價值專家(MVP)榮譽稱號。

本文摘編自《ECharts數據可視化:入門、實戰與進階》,經出版方授權發佈。

手把手教你用ECharts畫餅圖和環形圖

轉載請超鏈接註明:頭條資訊 » 手把手教你用ECharts畫餅圖和環形圖
免責聲明
    :非本網註明原創的信息,皆為程序自動獲取互聯網,目的在於傳遞更多信息,並不代表本網贊同其觀點和對其真實性負責;如此頁面有侵犯到您的權益,請給站長發送郵件,並提供相關證明(版權證明、身份證正反面、侵權鏈接),站長將在收到郵件24小時內刪除。
加載中...