<i> 标簽怎麼關閉_一起讀 ECharts 配置項手冊之 series「i」-line（上）

之前的文章寫得都比較雜，還總是想不到要寫點什麼……

是以最近打算把 ECharts 所有系列挨個聊一遍，寫一個 series 系列的簡單介紹，解決一大段時間的難選題問題- -b，順便友善比我還新的新手入門。

正文

​series[i]-line.type

series[i]-line 也就是折線圖/面積圖，要使用折線圖/面積圖時，首先需要使用 series[i]-line 的第一個配置「type」，将其設定為字元串值 'line'。

• series[i]-line.id

「id」這個配置無預設值，但實測最新的 ECharts 4.2.1 是有預設值的，規則如下(「seriesId」即「id」，「seriesIndex」即 series[i] 的 i，「seriesName」是後面的「series[i]-line.name」)

seriesId = 'series' + seriesIndex + '0'；seriesName = 'series' + seriesIndex
           

「id」可傳入字元串值作為目前 series[i] 的 ID，用途如官方所說，「可用于在 option 或者 API 中引用元件」。

舉個栗子，這樣的配置項，series 中有多個 series[i]

option = {  ...,  series: [    {      id: 'series1',      ...    }, {      id: 'series2',      ...    }, {      id: 'series3',      ...    },  ]}
           

我們想更新 series2 的資料，可以這麼寫，setOption 會自動比對。

myChart.setOption({  series: [{    id: 'series2',    data: [1, 2, 3, 4, 5]  }]})
           

series[i]-line.name

「name」系列名稱，可用于

1. tooltip.formatter 的模版變量 {a}
2. legend.data 的圖例篩選［ seriesName1, seriesName2, ...］
3. setOption 更新資料和配置項時用于指定對應的系列(與前面的「id」作用類似)

• series[i]-line.coordinateSystem

「coordinateSystem」，用于指定該系列使用的坐标系

1. 預設值為 'cartesian2d'，使用二維的直角坐标系(也稱笛卡爾坐标系)，通過 xAxisIndex, yAxisIndex 指定相應的坐标軸元件。
2. 也可以設定為 'polar'，使用極坐标系，通過 polarIndex 指定相應的極坐标元件

• series[i]-line.xAxisIndex 和 series[i]-line.yAxisIndex

預設值為 0，使用的 x/y 軸的 index(xAxis[i] / yAxis[i])，在單個圖表執行個體中存在多個 x/y 軸的時候有用。

• series[i]-line.polarIndex

與上條類似，預設值為 0，使用的極坐标系的 index(polar[i])，在單個圖表執行個體中存在多個極坐标系的時候有用。

• series[i]-line.symbol

标記的圖形，可傳入字元串值或函數。預設值為 'emptyCircle'。

1. 還可以設定為'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' ；
2. 通過 'image://url' 設定為圖檔，其中 URL 為圖檔的連結，或者 dataURI；
3. 通過 'path://' 将圖示設定為任意的矢量路徑，支援任意比例。SVG PathData 可以去阿裡巴巴矢量圖示庫 Iconfont 網站下載下傳，也可以從 Adobe Illustrator 等工具編輯導出。
4. 如果需要每個資料的圖形不一樣，可以設定為如下格式的回調函數：(value: Array|number, params: Object) => string
   1. 其中第一個參數 value 為 data 中的資料值。
   2. 第二個參數params 是其它的資料項參數。
   3. 經驗證這個回調函數在 4.2.1 裡還未支援，在 4.3.0-rc.2(Pre-release) 裡已提供。

series[i]-line.symbolSize

标記的大小，可傳入數值、數組或函數，預設值為 4(寬和高均為 4)，也可以分别設定寬高，如 [20, 10] 表示标記寬為 20，高為 10。

同樣支援回調函數：

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

1. 其中第一個參數 value 為 data 中的資料值
2. 第二個參數params 是其它的資料項參數。

• series[i]-line.symbolRotate

标記的旋轉角度，可傳入數值，如 90(代表逆時針旋轉 90 度)。

• series[i]-line.symbolKeepAspect

如果 symbol 是 path:// 的形式，是否在縮放時保持該圖形的長寬比，可傳入布爾值，預設為 false。

• series[i]-line.symbolOffset

标記相對于原本位置的偏移，可傳入數組，預設值為 [0, 0] ，數組元素既可以是數值，也可以是百分比(以元素尺寸，即寬或者高作為 100%)。數組第一個值代表向右的偏移量，第二個值代表向下的偏移量。

• series[i]-line.showSymbol

是否顯示 symbol, 可傳入布爾值，預設為 true。如果 false 則隻有在 tooltip hover 的時候顯示。

• series[i]-line.showAllSymbol

是否顯示所有 symbol 圖形，可傳入布爾值，隻在主軸為類目軸(axis.type 為 'category')時有效，可選值如下：

1. 預設值 'auto'，如果有足夠空間則顯示所有 symbol 圖形，否則随主軸标簽間隔隐藏政策；
2. true，顯示所有 symbol 圖形；
3. 随主軸标簽間隔隐藏政策，效果如下圖。

• series[i]-line.hoverAnimation

是否開啟 hover 在拐點标志上的提示動畫效果(強調/高亮)，可傳入布爾值，預設為 true。比如滑鼠浮在該 symbol 上、浮在 series 對應圖例(legend)上、浮在該 symbol 所在軸(tootip.trigger 為 'axis')等。

• series[i]-line.legendHoverLink

是否啟用圖例 hover 時的關聯高亮，即滑鼠浮在圖例(legend)上的時候，該圖例對應的 series 的 symbol 是否高亮(放大)可傳入布爾值，預設為 true。

• series[i]-line.stack

資料堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加(堆疊柱圖也是用這個屬性實作)。相同資料是否堆疊的對比，如效果官方例子所示：

• series[i]-line.cursor

滑鼠浮在該系列的 symbol 上時，滑鼠光标的樣式，同 CSS 的 cursor，可傳入字元串值，預設為一隻手 'pointer' ，其他可用屬性還有 'crosshair'，'move'，'wait' 等等。

• series[i]-line.connectNulls

是否連接配接空資料，可傳入布爾值，預設值為 false。效果如下：

• series[i]-line.clipOverflow

是否對超出部分裁剪，可傳入布爾值，預設為裁剪 true。

• series[i]-line.step

是否是階梯線圖，可傳入布爾值或字元串值，預設為 false。可以設定為 true 顯示成階梯線圖，也支援設定成 'start'(與 true 等效), 'middle', 'end' 分别配置在目前點，目前點與下個點的中間點，下個點拐彎，效果見下圖(官方示例)。

• series[i]-line.smooth

是否曲線平滑度，可傳入布爾值或 0 到 1 的數值(數值越大越平滑)，預設值為 false，與傳入 0 等效，即折線效果；傳入 true，與傳入 0.5 等效。具體效果如下圖所示。

• series[i]-line.smoothMonotone

平滑算法，可傳入字元串值，預設值手冊未提及，經測試應該為 'none'，即老算法；傳入 'x' 則曲線在資料點處方向為水準，傳入 'y' 則為豎直。具體效果如下圖。

• series[i]-line.sampling

官方描述：折線圖在資料量遠大于像素點時候的降采樣政策，開啟後可以有效的優化圖表的繪制效率，預設關閉，也就是全部繪制不過濾資料點。

1. 'average' 取過濾點的平均值
2. 'max' 取過濾點的最大值
3. 'min' 取過濾點的最小值
4. 'sum' 取過濾點的和

具體效果如下圖：

• series[i]-line.zlevel

折線圖所有圖形的 zlevel 值，可傳入數值，預設值為 0。

主要用于 Canvas 分層，将變化較多和較少的元件通過分層隔離開，但要注意分層過多會加大記憶體開銷，需要用手機浏覽時謹慎使用。

• series[i]-line.z

官方描述：折線圖元件的所有圖形的z值。控制圖形的前後順序。z 值小的圖形會被 z 值大的圖形覆寫。z 相比 zlevel 優先級更低，而且不會建立新的 Canvas。

可傳入數值，預設值為 2。

• series[i]-line.silent

官方描述：圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。

可傳入布爾值。

series[i]-line.animation

是否開啟動畫，可傳入布爾值，預設為 true。

series[i]-line.animationThreshold

關閉動畫的門檻值，當單個 series 顯示的圖形數量大于門檻值時會關閉動畫。

可傳入數值，預設 2000.

series[i]-line.animationDuration

初始動畫持續的時長，symbol 渲染動畫的快慢，可傳入數值，預設值 1000(毫秒)，也可通過回調函數為每個資料定義不同的時長。

animationDuration: function (idx) {    // 越往後的資料動畫時長越長    return idx * 100;}
           

series[i]-line.animationDurationUpdate

更新動畫持續的時長， symbol 渲染動畫的快慢，可傳入數值，預設值 1000(毫秒)，也可通過回調函數為每個資料定義不同的時長。

• series[i]-line.animationDelay

初始動畫的延遲時間，symbol 渲染動畫的早晚，可傳入數值，預設值 0(毫秒)，也可通過回調函數為每個資料定義不同的時長。

animationDelay: function (idx) {    // 越往後的資料延遲越長    return idx * 100;}
           

series[i]-line.animationDelayUpdate

更新動畫的延遲時間，symbol 渲染動畫的早晚，可傳入數值，預設值 0(毫秒)，也可通過回調函數為每個資料定義不同的時長。

series[i]-line.animationEasing

初始動畫的緩動效果，line 渲染動畫的效果，可傳入字元串值，預設為「linear」，勻速渲染。

其他效果如「quadraticIn」、「cubicIn」等見手冊處提供的官方示例：

series[i]-line.animationEasingUpdate

更新動畫的緩動效果，line 渲染動畫的效果，可傳入字元串值，預設為「linear」，勻速渲染。

• series[i]-line.data

系列中的資料内容數組。數組項通常為具體的資料項。可傳入 Object。

Object 常見的形式有：

1、二維數組表示

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]    ]}
           

其中「次元X」和「次元Y」會預設對應于平面直角坐标系的 xAxis 和 yAxis，或者極坐标系的 radiusAxis 和 angleAxis。

2、一維數組表示

當隻有一個軸為類目軸(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]]}]
           

3、數組項為(部分/全部)對象的情況

用于資料圖形樣式的個性化定制，例如：

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

對象的 key 支援：

name：資料項名稱，

value：單個資料項的數值，

symbol&symbolSize：單個資料項的圖形&圖形大小，

symbolRotate：單個資料項的圖形角度，

symbolKeepAspect：單個資料項的圖形是否保持寬高比，

symbolOffset ：單個資料項的圖形的位置偏移量，

label：單個資料項的文字标簽，比 series[i]-line.label 優先級高，

itemStyle：單個資料項的圖形樣式，比 series[i]-line.itemStyle 優先級高，

emphasis：單個資料項的圖形的高亮形式，比 series[i]-line.emphasis 優先級高，

tooltip：單個資料項圖形的提示框，比 series[i]-line.tooltip 優先級高。

待續

不寫不知道，一寫發現内容真挺多的，一個 series[i]-line 好長時間都沒寫完- -b，隻好把一些子配置太多的配置項，留到下次寫……

另外，也在考慮是否有必要逐個介紹配置項，因為有些僅僅是官方手冊的摘抄……比如隻介紹些相對複雜的或有需要注意情況的？

各位讀者大人，幫我拿個主意吧- -b

待續内容

• series[i]-line.label

官方描述：圖形上的文本标簽，可用于說明圖形的一些資料資訊，比如值，名稱等。

該配置項有大量子配置，常用的有 show、position、color、formatter 等等，我們下次展開。

• series[i]-line.itemStyle、series[i]-line.lineStyle、series[i]-line.areaStyle、series[i]-line.emphasis

官方描述分别為：折線拐點标志的樣式、折線線條樣式、區域填充樣式、圖形的高亮樣式。

這 4 個配置項同樣有不少子配置，下次展開。

• series[i]-line.dimensions、series[i]-line.encode、series[i]-line.seriesLayoutBy、series[i]-line.datasetIndex

這 4 個配置與 4.0 新功能「使用 dataset 管理資料集」有關，下次展開。

• series[i]-line.markPoint、series[i]-line.markLine、series[i]-line.markArea、series[i]-line.tooltip

分别用于：圖示的标注、标線、标域，圖形的提示框，這 4 個配置項同樣有不少子配置，下次展開。