資料視覺化：圖表篇（1）—— 基本柱狀圖、堆疊柱狀圖

嗨呀豆豆呢發表於2019-04-15
視覺化

專案地址

介紹

柱狀圖作為最常見的視覺化圖表，用於展示一些比較基礎的資料，其中分為基本柱狀圖、堆疊柱狀圖。通過實現這兩種圖表，我們將學習到以下內容

  • 基本柱圖
    • 座標軸X、Y軸繪製
    • 維度、度量設定
  • 堆疊柱狀圖
    • 座標軸指示器
    • 圖例切換
    • 堆疊定義
    • 標記線

基本柱圖分析

假設我們需要在白紙上畫出一個柱狀圖，首先我們會繪製座標軸，然後再去繪製對應的柱子。這也符合大多數情況下我們使用Echarts繪製圖表的流程。柱狀圖使用的是直角座標系，包含X、Y軸，柱狀圖的X軸一般表示的文字型別的值，Y軸則是數量型別的值。為了方便我們之後的理解，文字型別的稱為 維度 ；數值型別的稱為 度量

柱狀圖繪圖順序

所以我們現在的基本柱狀圖的繪圖順序可以理解為

    1. 設定X軸及其對應的維度
    1. 設定Y軸及其對應的度量

在Echarts中，基本柱狀圖的繪圖單元對應的配置項關係表如下

柱狀圖繪圖單元配置表

繪圖單元 配置項
X軸 xAxis
X軸對應維度 xAxis.data
Y軸 yAxis
Y軸對應度量 series[i].data

柱狀圖繪圖單元配置表分析

為什麼維度與度量的配置項不同？我們來結合Echarts提供的配置項手冊以及基本柱狀圖的程式碼來分析一下

在Echarts配置項手冊中，xAxis與yAxis除了配置名稱不一樣，其餘都是一樣的。示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
type 座標軸型別 category：維度軸 value：度量軸
data 維度資料 只有在維度軸才有效

在設定了x、y軸及x軸的維度後。圖表會出現基本的座標軸。然後需要設定y軸的度量資料。

柱狀圖/條形圖 通過柱形的高度/條形的寬度來表現資料的大小。當設定了維度軸後，另外一個軸對應的就是度量軸。度量軸的資料需要在series裡進行設定，series代表的是資料系列陣列。陣列裡的每個元素都代表了一組度量資料。示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
type 資料系列型別 bar:柱狀/條形圖
data 度量資料 只有在度量軸才有效

柱狀圖示例程式碼分析

那麼現在結合基本柱狀圖的程式碼再來分析一下，程式碼如下

let chart = this.$refs.chart;
echarts.init(chart).setOption({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
});
複製程式碼

X軸：xAxis的type為category，說明x軸為維度軸。xAxis的data就是指的維度軸的資料

Y軸：yAxis的type為value，說明y軸為度量軸。而度量軸的資料需要在series配置中進行設定。

series[i]的type為bar時，代表此係列圖表為柱狀/條形圖，而data則對應著度量資料

柱狀圖實現效果

資料視覺化：圖表篇（1）—— 基本柱狀圖、堆疊柱狀圖

堆疊柱狀圖分析

堆疊柱狀圖指的是同一個柱形上，可能有多個細分子類的資料。我們在柱狀圖的基礎上，繼續配置提示框、圖例、網格、標記線。生成可配置性更高的堆疊柱狀圖。

堆疊柱狀圖繪圖順序

    1. 設定提示框
    1. 設定圖例
    1. 設定網格
    1. 設定X軸及維度資料
    1. 設定Y軸
    1. 設定資料系列度量資料
      1. 設定堆疊
      1. 設定標記線
      1. 設定柱條寬度

堆疊柱狀圖繪圖單元配置表

繪圖單元 配置項
提示框 tooltip
圖例 legend
網格 grid
X軸 xAxis
X軸對應維度 xAxis.data
Y軸 yAxis
堆疊 series[i].stack
圖表標線 markLine
柱條寬度 barWidth

堆疊柱狀圖單元配置表分析

提示框（tooltip）作為圖表輔助元件，也稱為指示器，可以展示資料的更多指標資訊。有不同型別：分別為全域性、座標系、系列、資料項。示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
trigger 提示觸發型別 item：資料項圖形觸發； axis：座標軸觸發 ；none：不觸發
axisPointer 座標軸指示器配置項 在座標軸指示器中生效
axisPointer.type 指示器型別 line:直線型; shadow:陰影型; none:無; cross:十字準星型

圖例（legend）元件使用在存在多個資料系列的場景下，可以點選圖例控制該系列資料的顯示情況，示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
data 資料陣列 每一項代表一個系列的name，如果沒有指定會從當前系列中自動獲取

網格（grid）在圖表容器內的元件，用於設定圖表網格的位置、樣式等狀態，示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
left、right、bottom、top 離容器各方向距離 可以為具體畫素值、百分比、居中格式（left、center、right）
containLabel 網格是否包含座標軸的刻度標籤 可用於防止標籤溢位

堆疊（stack）應用於柱狀圖的圖表時，會使柱形的高度進行堆疊。示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
無 設定柱形堆疊 相同維度軸擁有相同stack值的柱形會進行堆疊擺放

圖表標線（markLine）可以在圖表上進行繪製直線。示例程式碼對應屬性及說明如下：

屬性名稱 含義 說明
lineStyle 標線的樣式 可設定標線顏色、寬度、型別等屬性
lineStyle.type 標線型別 solid：實線；dashed：虛線；dotted：點
data 標線的資料陣列 每個陣列項可以是兩個值的陣列，代表線的、終點

堆疊柱狀圖示例程式碼分析

let option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            
            type : 'shadow'        
        }
    },
    legend: {
        data:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎','百度','谷歌','必應','其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['週一','週二','週三','週四','週五','週六','週日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接訪問',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'郵件營銷',
            type:'bar',
            stack: '廣告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'聯盟廣告',
            type:'bar',
            stack: '廣告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'視訊廣告',
            type:'bar',
            stack: '廣告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'搜尋引擎',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                lineStyle: {
                    type: 'dashed'
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'百度',
            type:'bar',
            stack: '搜尋引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜尋引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必應',
            type:'bar',
            stack: '搜尋引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜尋引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
};
複製程式碼

提示框：tooltip設定在全域性option下，且trigger（觸發型別）為座標軸觸發。當懸浮到座標軸上時，會出現陰影型的提示資訊，因為axisPointer的type值為shadow，代表指示器型別為陰影型

圖例：legend的data為陣列，表示此圖表包含這些資料系列：'直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎','百度','谷歌','必應','其他'

網格：位置資訊說明網格在容器中，左邊距偏移3%，右邊距偏移4%，底部偏移3%。containLabel值為true說明網格包含了座標軸的標籤

X、Y軸分析與基本柱狀圖一致

資料系列：series陣列中，每一個陣列項對應著圖例（legend）中的每一項。其中，郵件營銷、聯盟廣告、視訊廣告系列對應的stack（堆疊屬性）均為廣告，百度、谷歌、必應、其他系列對應的stack均為搜尋引擎，所以圖表存在兩種堆疊柱形。

圖表標線：搜尋引擎系列中的markLine配置項設定了標線的樣式。lineStyle的type為dashed說明標線的格式為虛線，data陣列中type分別為特殊標註型別的最小值和最大值，所以起點為搜尋引擎系列的最小值，終點為最大值

堆疊柱狀圖實現效果

資料視覺化：圖表篇（1）—— 基本柱狀圖、堆疊柱狀圖

思考&練習

  1. 如何實現基礎條形圖？
  2. 如何實現並列柱圖？（多個資料系列的柱形組合圖表）
  3. 如何實現堆疊條形圖？
  4. 如何標線堆疊下的平均值？

相關文章