Echarts資料視覺化：圖表篇（2）—— 折線圖、堆疊面積折線圖

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

專案地址

介紹

折線圖是用折線將各個資料點連線起來的圖表，一般用於展示資料變化的趨勢。

區域圖則是在折線圖的基礎上，將指定的區域填充上顏色

通過實現折線圖、堆疊區域折線圖的兩個圖表。我們會學習到以下內容

  • 折線圖
    • 標題設定(title)
    • 圖表自定義元件(toolbox、dataZoom、visualMap)
  • 堆疊面積折線圖
    • 座標軸兩邊留白策略(boundaryGap)
    • 區域面積設定(areaStyle)

折線圖分析

折線圖繪圖順序

  1. 設定X、Y軸及其對應的維度、度量資料
  2. 設定標題
  3. 設定工具欄元件
  4. 設定區域縮放元件
  5. 設定視覺對映元件

折線圖繪圖單元配置表

X、Y軸已經在柱狀圖中學習過，在本示例中設定步驟一致，不做贅述

繪圖單元 配置項
標題 title
工具欄 toolbox
資料縮放 dataZoom
視覺對映 visualMap

折線圖繪圖單元配置表分析

標題元件包含主標題與副標題，用於描述圖表的基本資訊。對應常用屬性及說明如下：

屬性名稱 含義 說明
text 主標題文字 支援用\n換行
textStyle 主標題樣式 無

工具欄元件內建了一些對圖表的操作，分別為匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具。對應常用屬性及說明如下：

屬性名稱 含義 說明
top、right、bottom、left 工具欄距離容器各方向距離 無
feature 各工具配置項 設定工具的具體配置，還可以自定義工具

區域縮放元件，可以關注指定範圍的資料。擴充套件了圖表的可視範圍。對應常用屬性及說明如下：

屬性名稱 含義 說明
type 區域縮放元件型別 inside:可以直接操作圖表縮放；slider：只能滑動元件調整縮放
startValue 資料視窗範圍的起始數值 如果設定start，則startValue失效

視覺對映元件，用於將資料對映到視覺元素（圖元圖形類別、顏色、大小...）。對應常用屬性及說明如下：

屬性名稱 含義 說明
type 型別 continuous:連續型;piecewise:分段型
pieces 分段型的每一段的範圍 min:最小;max：最大;lt:小於;gt:大於;lte:小於等於;gte:大於等於
outOfRange 範圍外的視覺元素 可選：型別、大小、顏色、透明度、色調...

折線圖示例程式碼分析

let chart = echarts.init(this.$refs.chart);
let option = {
    title: {
        text: 'Beijing AQI'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        data: lineData.map(function (item) {
            return item[0];
        })
    },
    yAxis: {
        splitLine: {
            show: false
        }
    },
    toolbox: {
        left: 'center',
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: [{
        startValue: '2014-06-01'
    }, {
        type: 'inside'
    }],
    visualMap: {
        pieces: [{
            gt: 0,
            lte: 50,
            color: '#096'
        }, {
            gt: 50,
            lte: 100,
            color: '#ffde33'
        }, {
            gt: 100,
            lte: 150,
            color: '#ff9933'
        }, {
            gt: 150,
            lte: 200,
            color: '#cc0033'
        }, {
            gt: 200,
            lte: 300,
            color: '#660099'
        }, {
            gt: 300,
            color: '#7e0023'
        }],
        outOfRange: {
            color: '#999'
        }
    },
    series: {
        name: 'Beijing AQI',
        type: 'line',
        data: lineData.map(function (item) {
            return item[1];
        })
    }
}
chart.setOption(option);
複製程式碼

標題：title.text設定的內容為Beijing AQI，並未設定標題位置等樣式資訊。預設顯示在左上角

提示：tooltip.trigger設定為axis，當滑鼠懸浮到座標軸區域時，會顯示預設的提示資訊

X、Y軸與之前的圖表一致，不做額外分析

工具欄：toolbox.left設定為center，表示工具欄顯示位置為水平方向的居中位置。toolbox.feature中包含restore與saveAsImage選項，提供了重置圖表、儲存為圖片的功能

區域縮放：dataZoom[0].startValue設定為2014-06-01，設定了圖表範圍的起始值。dataZoom[1].type設定為inside意味著圖表可以使用滑鼠/觸控板直接縮放圖表

視覺對映：visualMap.pieces設定了pieces陣列。說明當前對映元件型別為分段式，陣列的每一項分別設定了每一段的範圍。gt、lte分別代表大於和小於等於,當前示例分別設定了5個範圍。visualMap.outOfRange設定了不在範圍內的視覺顏色為#999。

折線圖實現效果

Echarts資料視覺化：圖表篇（2）—— 折線圖、堆疊面積折線圖

堆疊面積折線圖分析

堆疊面積折線圖繪圖順序

  1. 設定標題(title)
  2. 設定提示(tooltip)
  3. 設定圖例(legend)
  4. 設定工具欄(toolbox)
  5. 設定網格(grid)
  6. 設定X、Y軸維度及度量
  7. 設定區域填充(areaStyle)
  8. 設定折線平滑(smooth)
  9. 設定座標軸留白(boundaryGap)

堆疊面積折線圖繪圖單元配置表

1-6分別在柱狀圖和折線圖中已經學習過，不做贅述。主要學習7-9

繪圖單元 配置項
區域填充 areaStyle
平滑曲線 smooth
座標軸留白 boundaryGap

堆疊面積折線圖單元配置表分析

區域填充作為折線圖的樣式補充，可以將折線圖設定為填充色。說明如下：

屬性名稱 含義 說明
color 填充顏色 支援rgb、16進位制
origin 圖形區域的起始位置 auto:座標軸線到資料間、start座標軸底部到資料間、end座標軸頂部到資料間

平滑曲線是折線圖中的特有屬性，可以將折線乖點調整為平滑曲線。說明如下：

屬性名稱 含義 說明
smooth 折線是否平滑 如果是boolean型別，表示是否開啟。如果是number型，表示平滑程度，越小表示越接近折線

座標軸留白代表座標軸兩端的留白策略。維度軸和度量軸的表現方式有所區別。說明如下：

屬性名稱 含義 說明
boundaryGap 座標軸兩邊留白策略 維度軸：座標軸為boolean指定是否有留白；度量軸：為兩個值的陣列，分別表示最小值和最大值範圍

堆疊面積折線圖示例程式碼分析

xAixs中boundaryGap屬性設定為ture，並且type為category。說明座標留白策略的設定物件為維度軸，則體現為X軸兩端存在空白區域

series[i]中存在areaStyle物件，表示折線圖設定成區域填充圖。smooth設定為true則代表折線表現形式為光滑曲線

堆疊面積折線圖實現效果

Echarts資料視覺化：圖表篇（2）—— 折線圖、堆疊面積折線圖

思考&練習

  1. 如何自定義工具欄
  2. 視覺對映元件切換為連續型
  3. 區域縮放設定為內建型
  4. 度量軸範圍留白策略如何設定

相關文章