掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
series[i]-line 用于表示 ECharts 圖表中的折線/面積圖，折線/面積圖是用折線將各個數(shù)據(jù)點標(biāo)志連接起來的圖表，可以用于展現(xiàn)數(shù)據(jù)的變化趨勢，在 ECharts 直角坐標(biāo)系和極坐標(biāo)系上的使用較為廣泛。ECharts 折線/面積圖屬性比較多，本節(jié)對這些屬性做出詳細講解，配合實例的使用，幫助您更好運用 ECharts 折線/面積圖。
清澗網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
Tip: 設(shè)置 areaStyle 后可以繪制面積圖；配合分段型 visualMap 組件可以將折線/面積圖通過不同顏色分區(qū)間。如下示例：
點擊編輯實例 》》
[ default: 'line' ]
設(shè)置 ECharts 系列的類型為折線/面積圖。
系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項時用于指定對應(yīng)的系列。
[ default: 'cartesian2d' ]
該系列使用的坐標(biāo)系，可選：
[ default: 0 ]
使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。
[ default: 0 ]
使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。
[ default: 0 ]
使用的極坐標(biāo)系的 index，在單個圖表實例中存在多個極坐標(biāo)系的時候有用。
[ default: 'emptyCircle' ]
標(biāo)記的圖形。
ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。
可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因為縮放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。
[ default: 4 ]
標(biāo)記的大小，可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標(biāo)記寬為20，高為10。
如果需要每個數(shù)據(jù)的圖形大小不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：
(value: Array|number, params: Object) => number|Array其中第一個參數(shù) value 為 data 中的數(shù)據(jù)值。第二個參數(shù)params 是其它的數(shù)據(jù)項參數(shù)。
標(biāo)記的旋轉(zhuǎn)角度。注意在 markLine 中當(dāng) symbol 為 'arrow' 時會忽略 symbolRotate 強制設(shè)置為切線的角度。
[ default: [0, 0] ]
標(biāo)記相對于原本位置的偏移。默認情況下，標(biāo)記會居中置放在數(shù)據(jù)對應(yīng)的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。
例如 [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數(shù)據(jù)點。
[ default: true ]
是否顯示 symbol, 如果 false 則只有在 tooltip hover 的時候顯示。
[ default: false ]
標(biāo)志圖形默認只有主軸顯示（隨主軸標(biāo)簽間隔隱藏策略），如需全部顯示可把 showAllSymbol 設(shè)為 true。
[ default: true ]
是否開啟 hover 在拐點標(biāo)志上的提示動畫效果。
[ default: true ]
是否啟用圖例 hover 時的聯(lián)動高亮。
[ default: null ]
數(shù)據(jù)堆疊，同個類目軸上系列配置相同的stack值后，后一個系列的值會在前一個系列的值上相加。
下面示例可以通過右上角 toolbox 中的堆疊切換看效果：
點擊編輯實例 》》
[ default: 'pointer' ]
鼠標(biāo)懸浮時在圖形元素上時鼠標(biāo)的樣式是什么。同 CSS 的 cursor。
[ default: false ]
是否連接空數(shù)據(jù)。
[ default: true ]
是否對超出部分裁剪，默認裁剪。
[ default: false ]
是否是階梯線圖?？梢栽O(shè)置為 true 顯示成階梯線圖，也支持設(shè)置成 'start', 'middle', 'end' 分別配置在當(dāng)前點，當(dāng)前點與下個點的中間點，下個點拐彎。
不同的配置效果如下：
點擊編輯實例 》》
圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等，label選項在 ECharts 2.x 中放置于 itemStyle.normal 下，在 ECharts 3 中為了讓整個配置項結(jié)構(gòu)更扁平合理，label 被拿出來跟 itemStyle 平級，并且跟 itemStyle 一樣擁有 normal，emphasis 兩個狀態(tài)。
折線拐點標(biāo)志的樣式。在設(shè)置該樣式的時候可以通過 normal 和 emphasis 兩個狀態(tài)設(shè)置。
線條樣式。該樣式的設(shè)置可以通過使用 normal 狀態(tài)來設(shè)置。
注： 修改 lineStyle 中的顏色不會影響圖例顏色，如果需要圖例顏色和折線圖顏色一致，需修改 itemStyle.normal.color，線條顏色默認也會取改顏色。
區(qū)域填充樣式。該樣式的設(shè)置可以通過使用 normal 狀態(tài)來設(shè)置。
[ default: false ]
是否平滑曲線顯示。
折線平滑后是否在一個維度上保持單調(diào)性，可以設(shè)置成'x', 'y'來指明是在 x 軸或者 y 軸上保持單調(diào)性。
通常在雙數(shù)值軸上使用。
下面兩張圖分別是雙數(shù)值軸中的折線圖smoothMonotone不設(shè)置以及設(shè)置為'x'的區(qū)別。
折線圖在數(shù)據(jù)量遠大于像素點時候的降采樣策略，開啟后可以有效的優(yōu)化圖表的繪制效率，默認關(guān)閉，也就是全部繪制不過濾數(shù)據(jù)點。
可選：
使用 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 數(shù)組中的每一項可以是：
值得一提的是，當(dāng)定義了 dimensions 后，默認 tooltip 中對個維度的顯示，會變?yōu)椤贺Q排』，從而方便顯示每個維度的名稱。如果沒有定義 dimensions，則默認 tooltip 會橫排顯示，且只顯示數(shù)值沒有維度名稱可顯示。
可以定義 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 支持的屬性，根據(jù)坐標(biāo)系不同而不同。 對于 直角坐標(biāo)系（cartesian2d），支持 x、y。 對于 極坐標(biāo)系（polar），支持 radius、angle。 對于 地理坐標(biāo)系（geo），支持 lng，lat。 此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中數(shù)據(jù)項名稱）。
當(dāng)使用 dimensions 給維度定義名稱后，encode 中可直接引用名稱，例如：
series: {
type: 'xxx',
dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
encode: {
x: 'date',
y: ['open', 'close', 'highest', 'lowest']
},
data: [ ... ]
}系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項通常為具體的數(shù)據(jù)項。
通常來說，數(shù)據(jù)用一個二維數(shù)組表示。如下，每一列被稱為一個『維度』。
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]
]
}]特別地，當(dāng)只有一個軸為類目軸（axis.type 為 'category'）的時候，數(shù)據(jù)可以簡化用一個一維數(shù)組表示。例如：
xAxis: {
data: ['a', 'b', 'm', 'n']
},
series: [{
// 與 xAxis.data 一一對應(yīng)。
data: [23, 44, 55, 19]
// 它其實是下面這種形式的簡化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]『值』與 軸類型 的關(guān)系：
當(dāng)需要對個別數(shù)據(jù)進行個性化定義時：
數(shù)組項可用對象，其中的 value 像表示具體的數(shù)值，如：
[
12,
34,
{
value : 56,
//自定義標(biāo)簽樣式，僅對該數(shù)據(jù)項有效
label: {},
//自定義特殊 itemStyle，僅對該數(shù)據(jù)項有效
itemStyle:{}
},
10
]
// 或
[
[12, 33],
[34, 313],
{
value: [56, 44],
label: {},
itemStyle:{}
},
[10, 33]
]空值：
當(dāng)某數(shù)據(jù)不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。
例如，無數(shù)據(jù)在折線圖中可表現(xiàn)為該點是斷開的，在其它圖中可表示為圖形不存在。
折線圖的標(biāo)注。
折線圖的標(biāo)線。
圖表標(biāo)域，常用于標(biāo)記圖表中某個范圍的數(shù)據(jù)，例如標(biāo)出某段時間投放了廣告。
[ default: 0 ]
折線圖所有圖形的 zlevel 值。
zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設(shè)置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
[ default: 2 ]
折線圖組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
[ default: false ]
圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。
[ default: true ]
是否開啟動畫。
[ default: 2000 ]
是否開啟動畫的閾值，當(dāng)單個系列顯示的圖形數(shù)量大于這個閾值時會關(guān)閉動畫。
[ default: 1000 ]
初始動畫的時長，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：
animationDuration: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}[ default: linear ]
初始動畫的緩動效果。不同的緩動效果可以參考緩動示例。
[ default: 0 ]
初始動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。
如下示例：
animationDelay: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
[ default: 300 ]
數(shù)據(jù)更新動畫的時長。
支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：
animationDurationUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}[ default: cubicOut ]
數(shù)據(jù)更新動畫的緩動效果。
[ default: 0 ]
數(shù)據(jù)更新動畫的延遲，支持回調(diào)函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。
如下示例：
animationDelayUpdate: function (idx) {
// 越往后的數(shù)據(jù)延遲越大
return idx * 100;
}也可以看該示例
本系列特定的 tooltip 設(shè)定。
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動版官網(wǎng)