ECharts折線/面積圖屬性大全

series[i]-line 用于表示 ECharts 圖表中的折線/面積圖，折線/面積圖是用折線將各個數據點標志連接起來的圖表，可以用于展現數據的變化趨勢，在 ECharts 直角坐標系和極坐標系上的使用較為廣泛。ECharts 折線/面積圖屬性比較多，本節(jié)對這些屬性做出詳細講解，配合實例的使用，幫助您更好運用 ECharts 折線/面積圖。

Tip: 設置 areaStyle 后可以繪制面積圖；配合分段型 visualMap 組件可以將折線/面積圖通過不同顏色分區(qū)間。

如下示例：

點擊編輯實例 》》

series[i]-line.type   |   string

[ default: 'line' ]

設置 ECharts 系列的類型為折線/面積圖。

series[i]-line.name   |   string

系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用于指定對應的系列。

series[i]-line.coordinateSystem   |   string

[ default: 'cartesian2d' ]

該系列使用的坐標系，可選：

• 'cartesian2d'使用二維的直角坐標系（也稱笛卡爾坐標系），通過 xAxisIndex, yAxisIndex指定相應的坐標軸組件。

• 'polar'使用極坐標系，通過 polarIndex 指定相應的極坐標組件

series[i]-line.xAxisIndex   |   number

[ default: 0 ]

使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。

series[i]-line.yAxisIndex   |   number

[ default: 0 ]

使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。

series[i]-line.polarIndex   |   number

[ default: 0 ]

使用的極坐標系的 index，在單個圖表實例中存在多個極坐標系的時候有用。

series[i]-line.symbol   |   string

[ default: 'emptyCircle' ]

標記的圖形。

ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導出。

series[i]-line.symbolSize   |   number, Array, Function

[ default: 4 ]

標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。

如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數：

(value: Array|number, params: Object) => number|Array

其中第一個參數 value 為 data 中的數據值。第二個參數params 是其它的數據項參數。

series[i]-line.symbolRotate   |   number

標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。

series[i]-line.symbolOffset   |   Array

[ default: [0, 0] ]

標記相對于原本位置的偏移。默認情況下，標記會居中置放在數據對應的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。

例如 [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數據點。

series[i]-line.showSymbol   |   boolean

[ default: true ]

是否顯示 symbol, 如果 false 則只有在 tooltip hover 的時候顯示。

series[i]-line.showAllSymbol   |   boolean

[ default: false ]

標志圖形默認只有主軸顯示（隨主軸標簽間隔隱藏策略），如需全部顯示可把 showAllSymbol 設為 true。

series[i]-line.hoverAnimation   |   boolean

[ default: true ]

是否開啟 hover 在拐點標志上的提示動畫效果。

series[i]-line.legendHoverLink   |   boolean

[ default: true ]

是否啟用圖例 hover 時的聯動高亮。

series[i]-line.stack   |   string

[ default: null ]

數據堆疊，同個類目軸上系列配置相同的stack值后，后一個系列的值會在前一個系列的值上相加。

下面示例可以通過右上角 toolbox 中的堆疊切換看效果：

點擊編輯實例 》》

series[i]-line.cursor   |   string

[ default: 'pointer' ]

鼠標懸浮時在圖形元素上時鼠標的樣式是什么。同 CSS 的 cursor。

series[i]-line.connectNulls   |   boolean

[ default: false ]

是否連接空數據。

series[i]-line.clipOverflow   |   boolean

[ default: true ]

是否對超出部分裁剪，默認裁剪。

series[i]-line.step   |   string, boolean

[ default: false ]

是否是階梯線圖?？梢栽O置為 true 顯示成階梯線圖，也支持設置成 'start', 'middle', 'end' 分別配置在當前點，當前點與下個點的中間點，下個點拐彎。

不同的配置效果如下：

點擊編輯實例 》》    

series[i]-line.label   |   Object

圖形上的文本標簽，可用于說明圖形的一些數據信息，比如值，名稱等，label選項在 ECharts 2.x 中放置于 itemStyle.normal 下，在 ECharts 3 中為了讓整個配置項結構更扁平合理，label 被拿出來跟 itemStyle 平級，并且跟 itemStyle 一樣擁有 normal，emphasis 兩個狀態(tài)。

series[i]-line.itemStyle   |   Object

折線拐點標志的樣式。在設置該樣式的時候可以通過 normal 和 emphasis 兩個狀態(tài)設置。

series[i]-line.lineStyle   |   Object

線條樣式。該樣式的設置可以通過使用 normal 狀態(tài)來設置。

注： 修改 lineStyle 中的顏色不會影響圖例顏色，如果需要圖例顏色和折線圖顏色一致，需修改 itemStyle.normal.color，線條顏色默認也會取改顏色。

series[i]-line.areaStyle   |   Object

區(qū)域填充樣式。該樣式的設置可以通過使用 normal 狀態(tài)來設置。

series[i]-line.smooth   |   false

[ default: false ]

是否平滑曲線顯示。

series[i]-line.smoothMonotone   |   string

折線平滑后是否在一個維度上保持單調性，可以設置成'x', 'y'來指明是在 x 軸或者 y 軸上保持單調性。

通常在雙數值軸上使用。

下面兩張圖分別是雙數值軸中的折線圖smoothMonotone不設置以及設置為'x'的區(qū)別。

• 不設置smoothMonotone:

• 設置為 'x':

series[i]-line.sampling   |   string

折線圖在數據量遠大于像素點時候的降采樣策略，開啟后可以有效的優(yōu)化圖表的繪制效率，默認關閉，也就是全部繪制不過濾數據點。

可選：

• 'average' 取過濾點的平均值
• 'max' 取過濾點的最大值
• 'min' 取過濾點的最小值
• 'sum' 取過濾點的和

series[i]-line.dimensions   |   Array

使用 dimensions 定義 data 每個維度的信息。例如：

series: {
    type: 'xxx',
    // 定義了每個維度的名稱。這個名稱會被顯示到默認的 tooltip 中。
    dimensions: ['date', 'open', 'close', 'highest', 'lowest']
    data: [
        // 有了上面 dimensions 定義后，下面這五個維度的名稱分別為：
        // 'date', 'open', 'close', 'highest', 'lowest'
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

series: {
    type: 'xxx',
    dimensions: [
        null,                // 如果此維度不想給出定義，則使用 null 即可
        {type: 'ordinal'},   // 只定義此維度的類型。
                             // 'ordinal' 表示離散型，一般文本使用這種類型。
                             // 如果類型沒有被定義，會自動猜測類型。
        {name: 'good', type: 'number'},
        'bad'                // 等同于 {name: 'bad'}
    ]
}

dimensions 數組中的每一項可以是：

• string，如 'someName'，等同于 {name: 'someName'}
• Object，屬性可以有：
  • name: string。
  • type: string，支持
    • number
    • float，即 Float64Array
    • int，即 Int32Array
    • ordinal，表示離散數據，一般指字符串。
    • time，表示時間類型，時間類型的支持參見 data

值得一提的是，當定義了 dimensions 后，默認 tooltip 中對個維度的顯示，會變?yōu)椤贺Q排』，從而方便顯示每個維度的名稱。如果沒有定義 dimensions，則默認 tooltip 會橫排顯示，且只顯示數值沒有維度名稱可顯示。

series[i]-line.encode   |   Object

可以定義 data 的哪個維度被編碼成什么。比如：

series: {
    type: 'xxx',
    encode: {
        x: [3, 1, 5],      // 表示維度 3、1、5 映射到 x 軸。
        y: 2,              // 表示維度 2 映射到 y 軸。
        tooltip: [3, 2, 4] // 表示維度 3、2、4 會在 tooltip 中顯示。
        label: 3           // 表示 label 使用維度 3。
    },
    data: [
        // 每一列稱為一個『維度』。
        // 這里分別是維度 0、1、2、3、4。
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

encode 支持的屬性，根據坐標系不同而不同。 對于 直角坐標系（cartesian2d），支持 x、y。 對于 極坐標系（polar），支持 radius、angle。 對于 地理坐標系（geo），支持 lng，lat。 此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中數據項名稱）。

當使用 dimensions 給維度定義名稱后，encode 中可直接引用名稱，例如：

series: {
    type: 'xxx',
    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
    encode: {
        x: 'date',
        y: ['open', 'close', 'highest', 'lowest']
    },
    data: [ ... ]
}

series[i]-line.data[i]   |   Object

系列中的數據內容數組。數組項通常為具體的數據項。

通常來說，數據用一個二維數組表示。如下，每一列被稱為一個『維度』。

series: [{
    data: [
        // 維度X   維度Y   其他維度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

• 在 直角坐標系 (grid) 中『維度X』和『維度Y』會默認對應于 xAxis 和 yAxis。
• 在 極坐標系 (polar) 中『維度X』和『維度Y』會默認對應于 radiusAxis 和 angleAxis。
• 后面的其他維度是可選的，可以在別處被使用，例如：
  • 在 visualMap 中可以將一個或多個維度映射到顏色，大小等多個圖形屬性上。
  • 在 series.symbolSize 中可以使用回調函數，基于某個維度得到 symbolSize 值。
  • 使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來。

特別地，當只有一個軸為類目軸（axis.type 為 'category'）的時候，數據可以簡化用一個一維數組表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 與 xAxis.data 一一對應。
    data: [23,  44,  55,  19]
    // 它其實是下面這種形式的簡化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

『值』與 軸類型 的關系：

• 當某維度對應于數值軸（axis.type 為 'value' 或者 'log'）的時候：
  其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）
• 當某維度對應于類目軸（axis.type 為 'category'）的時候：
  其值須為類目的『序數』（從 0 開始）或者類目的『字符串值』。例如： xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此點位于 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此點位于 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此點位于 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ] }]雙類目軸的示例可以參考 Github Punchcard 示例。
• 當某維度對應于時間軸（type 為 'time'）的時候，值可以為：
  • 一個時間戳，如 1484141700832，表示 UTC 時間。
  • 或者字符串形式的時間描述：
    • ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時區(qū)，否則均表示本地時間，與 moment 一致）：
      1. 部分年月日時間: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
      2. 使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
      3. 時區(qū)設定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
    • 其他的時間字符串，包括（均表示本地時間）: '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
  • 或者用戶自行初始化的 Date 實例：
    • 注意，用戶自行初始化 Date 實例的時候，瀏覽器的行為有差異，不同字符串的表示也不同。
    • 例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')這種表示方法。
    • 所以，使用 new Date(dataString) 時，可使用第三方庫解析（如 moment），或者使用 echarts.number.parseDate，或者參見 這里。

當需要對個別數據進行個性化定義時：

數組項可用對象，其中的 value 像表示具體的數值，如：

[
    12,
    34,
    {
        value : 56,
        //自定義標簽樣式，僅對該數據項有效
        label: {},
        //自定義特殊 itemStyle，僅對該數據項有效
        itemStyle:{}
    },
    10
]
// 或
[
    [12, 33],
    [34, 313],
    {
        value: [56, 44],
        label: {},
        itemStyle:{}
    },
    [10, 33]
]

空值：

當某數據不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

例如，無數據在折線圖中可表現為該點是斷開的，在其它圖中可表示為圖形不存在。

series[i]-line.markPoint   |   Object

折線圖的標注。

series[i]-line.markLine   |   *

折線圖的標線。

series[i]-line.markArea   |   Object

圖表標域，常用于標記圖表中某個范圍的數據，例如標出某段時間投放了廣告。

series[i]-line.zlevel   |   number

[ default: 0 ]

折線圖所有圖形的 zlevel 值。

zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

series[i]-line.z   |   number

[ default: 2 ]

折線圖組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。

z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

series[i]-line.silent   |   boolean

[ default: false ]

圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。

series[i]-line.animation   |   boolean

[ default: true ]

是否開啟動畫。

series[i]-line.animationThreshold   |   number

[ default: 2000 ]

是否開啟動畫的閾值，當單個系列顯示的圖形數量大于這個閾值時會關閉動畫。

series[i]-line.animationDuration   |   number

[ default: 1000 ]

初始動畫的時長，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果：

animationDuration: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

series[i]-line.animationEasing   |   string

[ default: linear ]

初始動畫的緩動效果。不同的緩動效果可以參考緩動示例。

series[i]-line.animationDelay   |   number, Function

[ default: 0 ]

初始動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的初始動畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

也可以看該示例

series[i]-line.animationDurationUpdate   |   number, Function

[ default: 300 ]

數據更新動畫的時長。

支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

series[i]-line.animationEasingUpdate   |   string

[ default: cubicOut ]

數據更新動畫的緩動效果。

series[i]-line.animationDelayUpdate   |   number, Function

[ default: 0 ]

數據更新動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現更戲劇的更新動畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

也可以看該示例

series[i]-line.tooltip   |   *

本系列特定的 tooltip 設定。