echart 圖表學習

1、堆疊柱形圖

 series-bar. stack

資料堆疊，同個類目軸上系列配置相同的stack值可以堆疊放置。 stack 定義相同名稱即互相堆疊

labelLine: {...} ,

itemStyle: {...} ,

labelLayout: {...} ,

emphasis: {...} ,

blur: {...} ,

select: {...} ,

selectedMode: false ,

stack ... ,

sampling ... ,

cursor: 'pointer' ,

barWidth: 自适應 ,

barMaxWidth ... ,

barMinWidth ... ,

barMinHeight: 0 ,

barMinAngle: 0 ,

barGap: 30% ,

barCategoryGap: '20%' ,

large: false ,

largeThreshold: 400 ,

progressive: 5000 ,

progressiveThreshold: 3000 ,

progressiveChunkMode: mod ,

dimensions ... ,

encode ... ,

seriesLayoutBy: 'column' ,

datasetIndex: 0 ,

data: [{...}] ,

clip: true ,

zlevel: 0 ,

z: 2 ,

silent: false ,

animation: true ,

animationThreshold: 2000 ,

animationDuration: 1000 ,

animationEasing: cubicOut ,

animationDelay: 0 ,

animationDurationUpdate: 300 ,

animationEasingUpdate: cubicInOut ,

animationDelayUpdate: 0 ,

tooltip: {...} ,

{type: pie, ...} ,

{type: scatter, ...} ,

{type: effectScatter, ...} ,

{type: radar, ...} ,

{type: tree, ...} ,

{type: treemap, ...} ,

{type: sunburst, ...} ,

{type: boxplot, ...} ,

{type: candlestick, ...} ,

{type: heatmap, ...} ,

{type: map, ...} ,

{type: parallel, ...} ,

{type: lines, ...} ,

{type: graph, ...} ,

{type: sankey, ...} ,

{type: funnel, ...} ,

{type: gauge, ...} ,

{type: pictorialBar, ...} ,

{type: themeRiver, ...} ,

{type: custom, ...} ,

darkMode ... ,

color ... ,

backgroundColor: 'transparent' ,

textStyle: {...} ,

stateAnimation: {...} ,

blendMode: 'source-over' ,

hoverLayerThreshold: 3000 ,

useUTC: false ,

options ... ,

media: [{...}] ,

柱狀圖

柱狀圖（或稱條形圖）是一種通過柱形的高度（橫向的情況下則是寬度）來表現資料大小的一種常用圖表類型。

string

元件 ID。預設不指定。指定則可用于在 option 或者 API 中引用元件。

系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 <code>setOption</code> 更新資料和配置項時用于指定對應的系列。

boolean

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

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

<code>'cartesian2d'</code>

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

<code>'polar'</code>

使用極坐标系，通過 polarIndex 指定相應的極坐标元件

number

使用的 x 軸的 index，在單個圖表執行個體中存在多個 x 軸的時候有用。

使用的 y 軸的 index，在單個圖表執行個體中存在多個 y軸的時候有用。

使用的極坐标系的 index，在單個圖表執行個體中存在多個極坐标系的時候有用。

從 <code>v4.5.0</code> 開始支援

是否在環形柱條兩側使用圓弧效果。

僅對極坐标系柱狀圖有效。

從 <code>v4.7.0</code> 開始支援

是否顯示柱條的背景色。通過 backgroundStyle 配置背景樣式。

Object

每一個柱條的背景樣式。需要将 showBackground 設定為 <code>true</code> 時才有效。

Color

柱條的顔色。

柱條的描邊顔色。

柱條的描邊寬度，預設不描邊。

柱條的描邊類型，預設為實線，支援 <code>'dashed'</code>, <code>'dotted'</code>。

numberArray

圓角半徑，機關px，支援傳入數組分别指定 4 個圓角半徑。 如:

圖形陰影的模糊大小。該屬性配合 <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> 一起設定圖形的陰影效果。

示例：

陰影顔色。支援的格式同<code>color</code>。

陰影水準方向上的偏移距離。

陰影垂直方向上的偏移距離。

圖形透明度。支援從 0 到 1 的數字，為 0 時不繪制該圖形。

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

是否顯示标簽。

stringArray

标簽的位置。

可以通過内置的語義聲明位置：

支援：<code>top</code> / <code>left</code> / <code>right</code> / <code>bottom</code> / <code>inside</code> / <code>insideLeft</code> / <code>insideRight</code> / <code>insideTop</code> / <code>insideBottom</code> / <code>insideTopLeft</code> / <code>insideBottomLeft</code> / <code>insideTopRight</code> / <code>insideBottomRight</code>

也可以用一個數組表示相對的百分比或者絕對像素值表示标簽相對于圖形包圍盒左上角的位置。

參見：label position。

距離圖形元素的距離。

當 position 為字元描述值（如 <code>'top'</code>、<code>'insideRight'</code>）時候有效。

标簽旋轉。從 -90 度到 90 度。正值是逆時針。

參見：label rotation。

Array

是否對文字進行偏移。預設不偏移。例如：<code>[30, 40]</code> 表示文字在橫向上偏移 <code>30</code>，縱向上偏移 <code>40</code>。

stringFunction

标簽内容格式器，支援字元串模闆和回調函數兩種形式，字元串模闆與回調函數傳回的字元串均支援用 <code>\n</code> 換行。

字元串模闆 模闆變量有：

<code>{a}</code>：系列名。

<code>{b}</code>：資料名。

<code>{c}</code>：資料值。

<code>{@xxx}</code>：資料中名為 <code>'xxx'</code> 的次元的值，如 <code>{@product}</code> 表示名為 <code>'product'</code> 的次元的值。

<code>{@[n]}</code>：資料中次元 <code>n</code> 的值，如 <code>{@[3]}</code> 表示次元 3 的值，從 0 開始計數。

回調函數

回調函數格式：

參數 <code>params</code> 是 formatter 需要的單個資料集。格式如下：

注：encode 和 dimensionNames 的使用方式，例如：

如果資料為：

則可這樣得到 y 軸對應的 value：

文字的顔色。

如果設定為 <code>'inherit'</code>，則為視覺映射得到的顔色，如系列色。

文字字型的風格。

可選：

<code>'normal'</code>

<code>'italic'</code>

<code>'oblique'</code>

stringnumber

文字字型的粗細。

<code>'bold'</code>

<code>'bolder'</code>

<code>'lighter'</code>

100 | 200 | 300 | 400...

文字的字型系列。

還可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

文字的字型大小。

文字水準對齊方式，預設自動。

<code>'left'</code>

<code>'center'</code>

<code>'right'</code>

<code>rich</code> 中如果沒有設定 <code>align</code>，則會取父層級的 <code>align</code>。例如：

文字垂直對齊方式，預設自動。

<code>'top'</code>

<code>'middle'</code>

<code>'bottom'</code>

<code>rich</code> 中如果沒有設定 <code>verticalAlign</code>，則會取父層級的 <code>verticalAlign</code>。例如：

行高。

<code>rich</code> 中如果沒有設定 <code>lineHeight</code>，則會取父層級的 <code>lineHeight</code>。例如：

stringObject

文字塊背景色。

可以使用顔色值，例如：<code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>。

也可以直接使用圖檔，例如：

當使用圖檔的時候，可以使用 <code>width</code> 或 <code>height</code> 指定高寬，也可以不指定自适應。

文字塊邊框顔色。

文字塊邊框寬度。

stringnumberArray

文字塊邊框描邊類型。

<code>'solid'</code>

<code>'dashed'</code>

<code>'dotted'</code>

自 <code>v5.0.0</code> 開始，也可以是 <code>number</code> 或者 <code>number</code> 數組，用以指定線條的 dash array，配合 <code>borderDashOffset</code> 可實作更靈活的虛線效果。

例如：

從 <code>v5.0.0</code> 開始支援

用于設定虛線的偏移量，可搭配 <code>borderType</code> 指定 dash array 實作靈活的虛線效果。

更多詳情可以參考 MDN lineDashOffset。

文字塊的圓角。

文字塊的内邊距。例如：

<code>padding: [3, 4, 5, 6]</code>：表示 <code>[上, 右, 下, 左]</code> 的邊距。

<code>padding: 4</code>：表示 <code>padding: [4, 4, 4, 4]</code>。

<code>padding: [3, 4]</code>：表示 <code>padding: [3, 4, 3, 4]</code>。

注意，文字塊的 <code>width</code> 和 <code>height</code> 指定的是内容高寬，不包含 <code>padding</code>。

文字塊的背景陰影顔色。

文字塊的背景陰影長度。

文字塊的背景陰影 X 偏移。

文字塊的背景陰影 Y 偏移。

文本顯示寬度。

文本顯示高度。

文字本身的描邊顔色。

文字本身的描邊寬度。

文字本身的描邊類型。

自 <code>v5.0.0</code> 開始，也可以是 <code>number</code> 或者 <code>number</code> 數組，用以指定線條的 dash array，配合 <code>textBorderDashOffset</code> 可實作更靈活的虛線效果。

用于設定虛線的偏移量，可搭配 <code>textBorderType</code> 指定 dash array 實作靈活的虛線效果。

文字本身的陰影顔色。

文字本身的陰影長度。

文字本身的陰影 X 偏移。

文字本身的陰影 Y 偏移。

文字超出寬度是否截斷或者換行。配置<code>width</code>時有效

<code>'truncate'</code> 截斷，并在末尾顯示<code>ellipsis</code>配置的文本，預設為<code>...</code>

<code>'break'</code> 換行

<code>'breakAll'</code> 換行，跟<code>'break'</code>不同的是，在英語等拉丁文中，<code>'breakAll'</code>還會強制單詞内換行

在<code>overflow</code>配置為<code>'truncate'</code>的時候，可以通過該屬性配置末尾顯示的文本。

文本超出高度部分是否截斷，配置<code>height</code>時有效。

<code>'truncate'</code> 在文本行數超出高度部分截斷。

在 <code>rich</code> 裡面，可以自定義富文本樣式。利用富文本樣式，可以在标簽中做出非常豐富的效果。

詳情參見教程：富文本标簽

{ &lt;style_name&gt; }

标簽的視覺引導線配置。

是否顯示視覺引導線。

是否顯示在圖形上方。

視覺引導項第二段的長度。

booleannumber

是否平滑視覺引導線，預設不平滑，可以設定成 <code>true</code> 平滑顯示，也可以設定為 0 到 1 的值，表示平滑程度。

通過調整第二段線的長度，限制引導線兩端之間最小的夾角，以防止過小的夾角導緻顯示不美觀。

可以設定為 0 - 180 度。

{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

圖形樣式。

圖形的貼花圖案，在 aria.enabled 與 aria.decal.show 都是 <code>true</code> 的情況下才生效。

如果為 <code>'none'</code> 表示不使用貼花圖案。

{ symbol , symbolSize , symbolKeepAspect , color , backgroundColor , dashArrayX , dashArrayY , rotation , maxTileWidth , maxTileHeight }

ObjectFunction

标簽的統一布局配置。

該配置項是在每個系列預設的标簽布局基礎上，統一調整标簽的<code>(x, y)</code>位置，标簽對齊等屬性以實作想要的标簽布局效果。

該配置項也可以是一個有如下參數的回調函數

将标簽顯示在圖形右側 10px 的位置，并且垂直居中：

根據圖形的包圍盒尺寸決定文本尺寸

是否隐藏重疊的标簽。

下面示例示範了在關系圖中開啟該配置後，在縮放時可以實作自動的标簽隐藏。

在标簽重疊的時候是否挪動标簽位置以防止重疊。

目前支援配置為：

<code>'shiftX'</code> 水準方向依次位移，在水準方向對齊時使用

<code>'shiftY'</code> 垂直方向依次位移，在垂直方向對齊時使用

下面是标簽右對齊并配置垂直方向依次位移以防止重疊的示例。

numberstring

标簽的 x 位置。支援絕對的像素值或者<code>'20%'</code>這樣的相對值。

标簽的 y 位置。支援絕對的像素值或者<code>'20%'</code>這樣的相對值。

标簽在 x 方向上的像素偏移。可以和<code>x</code>一起使用。

标簽在 y 方向上的像素偏移。可以和<code>y</code>一起使用

标簽旋轉角度。

标簽顯示的寬度。可以配合<code>overflow</code>使用控制标簽顯示在固定寬度内

标簽顯示的高度。可以配合<code>lineOverflow</code>使用控制标簽顯示在固定高度内

标簽水準對齊方式。可以設定<code>'left'</code>, <code>'center'</code>, <code>'right'</code>。

标簽垂直對齊方式。可以設定<code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>。

The text size of the label.

标簽是否可以允許使用者通過拖拽二次調整位置。

标簽引導線三個點的位置。格式為：

在餅圖中常用來微調已經計算好的引導線，其它情況一般不建議設定。

高亮的圖形樣式和标簽樣式。

在高亮圖形時，是否淡出其它資料的圖形已達到聚焦的效果。支援如下配置：

<code>'none'</code> 不淡出其它圖形，預設使用該配置。

<code>'self'</code> 隻聚焦（不淡出）目前高亮的資料的圖形。

<code>'series'</code> 聚焦目前高亮的資料所在的系列的所有圖形。

下面代碼配置了柱狀圖在高亮一個圖形的時候，淡出目前直角坐标系所有其它的系列。

在開啟<code>focus</code>的時候，可以通過<code>blurScope</code>配置淡出的範圍。支援如下配置

<code>'coordinateSystem'</code> 淡出範圍為坐标系，預設使用該配置。

<code>'series'</code> 淡出範圍為系列。

<code>'global'</code> 淡出範圍為全局。

{ show , position , distance , rotate , offset , formatter , color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , lineOverflow , rich }

{ show , lineStyle }

{ color , borderColor , borderWidth , borderType , borderRadius , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }

淡出時的圖形樣式和标簽樣式。開啟 emphasis.focus 後有效。

資料選中時的圖形樣式和标簽樣式。開啟 selectedMode 後有效。

booleanstring

選中模式的配置，表示是否支援多個選中，預設關閉，支援布爾值和字元串，字元串取值可選<code>'single'</code>，<code>'multiple'</code>，分别表示單選還是多選。