eChars移動端適應性學習筆記

標籤：支援   horizon   ant   title   需要   targe   狀態   ted   isp   

有時會出現一個圖表需要同時在PC、移動端上展現的情境。這需要 ECharts 內部組件隨著容器尺寸變化而變化的能力。為瞭解決這個問題，ECharts 完善了組件的定位設定，並且實現了類似 CSS Media Query 的自適應能力。

ECharts組件的定位和布局

大部分『組件』和『系列』會遵循兩種定位方式：

一、left/right/top/bottom/width/height 定位方式：

這六個量中，每個量都可以是『絕對值』或者『百分比』或者『位置描述』。

• 絕對值  ： 單位是瀏覽器像素（px），用 number 形式書寫（不寫單位）。例如 {left: 23, height: 400}。

• 百分比  ： 表示占 DOM 容器高寬的百分之多少，用 string 形式書寫。例如 {right: ‘30%‘, bottom: ‘40%‘}。

• 位置描述  ：可以設定 left: ‘center‘，表示水平置中。  可以設定 top: ‘middle‘，表示垂直置中。

這六個量的概念，和 CSS 中六個量的概念類似：

• left：距離 DOM 容器左邊界的距離。right：距離 DOM 容器右邊界的距離。top：距離 DOM 容器上邊界的距離。bottom：距離 DOM 容器下邊界的距離。width：寬度。

  height：高度。

       在橫向，left、right、width 三個量中，只需兩個量有值即可，因為任兩個量可以決定組件的位置和大小。 縱向，top、bottom、height 三個量，和橫向類同不贅述

二、center / radius 定位方式：

• center

  是一個數組，表示 [x, y]，其中，x、y可以是『絕對值』或者『百分比』，含義和前述相同 ？。

• radius

  是一個數組，表示 [內半徑, 外半徑]，其中，內外半徑可以是『絕對值』或者『百分比』，含義和前述相同。

  在自適應容器大小時，百分比設定是很有用的。

橫向（horizontal）和縱向（vertical）

例如，在細長的移動端螢幕上，可能適合使用『縱向布局』；在PC寬屏上，可能適合使用『橫向布局』。橫縱向布局的設定，一般在『組件』或者『系列』的 orient 或者 layout 配置項上，設定為 ‘horizontal‘ 或者 ‘vertical‘。

Media Query

Media Query 提供了『隨著容器尺寸改變而改變』的能力

要在 option 中設定 Media Query 須遵循如下格式：

option = {    baseOption: { // 這裡是基本的『原子option』。        title: {...},        legend: {...},        series: [{...}, {...}, ...],        ...    },    media: [ // 這裡定義了 media query 的逐條規則。        {            query: {...},   // 這裡寫規則。            option: {       // 這裡寫此規則滿足下的option。                legend: {...},                ...            }        },        {            query: {...},   // 第二個規則。            option: {       // 第二個規則對應的option。                legend: {...},                ...            }        },        {                   // 這條裡沒有寫規則，表示『預設』，            option: {       // 即所有規則都不滿足時，採納這個option。                legend: {...},                ...            }        }    ]};
上面的例子中，baseOption、以及 media 每個 option 都是『原子 option』，即普通的含有各組件、系列定義的 option。

query：

每個 query 類似於這樣：

{    minWidth: 200,    maxHeight: 300,    minAspectRatio: 1.3}

現在支援三個屬性：width、height、aspectRatio（長寬比）。每個屬性都可以加上 min 或 max 首碼。比如，minWidth: 200 表示『大於等於200px寬度』。兩個屬性一起寫表示『並且』，比如：{minWidth: 200, maxHeight: 300} 表示『大於等於200px寬度，並且小於等於300px高度』。

option：

media中的 option 既然是『原子 option』，理論上可以寫任何 option 的配置項。但是一般我們唯寫跟布局定位相關的，例如截取上面例子中的一部分 query option：

media: [    ...,    {        query: {            maxAspectRatio: 1           // 當長寬比小於1時。        },        option: {            legend: {                   // legend 放在底部中間。                right: ‘center‘,                bottom: 0,                orient: ‘horizontal‘    // legend 橫向布局。            },            series: [                   // 兩個餅圖左右布局。                {                    radius: [20, ‘50%‘],                    center: [‘50%‘, ‘30%‘]                },                {                    radius: [30, ‘50%‘],                    center: [‘50%‘, ‘70%‘]                }            ]        }    },

 {        query: {            maxWidth: 500               // 當容器寬度小於 500 時。        },        option: {            legend: {                right: 10,              // legend 放置在右側中間。                top: ‘15%‘,                orient: ‘vertical‘      // 縱向布局。            },            series: [                   // 兩個餅圖上下布局。                {                    radius: [20, ‘50%‘],                    center: [‘50%‘, ‘30%‘]                },                {                    radius: [30, ‘50%‘],                    center: [‘50%‘, ‘75%‘]                }            ]        }    },    ...]

多個 query 被滿足時的優先順序：

注意，可以有多個 query 同時被滿足，會都被 mergeOption，定義在後的後被 merge（即優先順序更高）。

預設 query：

如果 media 中有某項不寫 query，則表示『預設值』，即所有規則都不滿足時，採納這個option。

容器大小即時變化時的注意事項：

在不少情況下，並不需要容器DOM節點任意隨著拖拽變化大小，而是只是根據不同終端設定幾個典型尺寸。

但是如果容器DOM節點需要能任意隨著拖拽變化大小，那麼目前使用時需要注意這件事：某個配置項，如果在某一個 query option 中出現，那麼在其他 query option 中也必須出現，否則不能夠迴歸到原來的狀態。（left/right/top/bottom/width/height 不受這個限制。）

 

 

eChars移動端適應性學習筆記