echarts自適應學習總結

項目須要：echarts自適應屏幕縮放，定義最小尺寸，按比例放大。

echart組件定位和佈局

left:0,right:0,top:0,bottom:0

center[x,y]

radius

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

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

橫縱向佈局的設置，通常在『組件』或者『系列』的 orient 或者 layout 配置項上，設置爲 'horizontal' 或者 'vertical'。

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。

由『原子option』組合成的整個 option，咱們稱爲『複合 option』。

baseOption 是必然被使用,

知足了某個 query 條件時，對應的 option 會被使用 chart.mergeOption() 來 merge 進去。

query：(相似於媒體查詢條件)

每一個 query 相似於這樣：

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

如今支持三個屬性：width、height、aspectRatio（長寬比）。每一個屬性均可以加上 min 或 max 前綴。好比，minWidth: 200 表示『大於等於200px寬度』。兩個屬性一塊兒寫表示『而且』，好比：{minWidth: 200, maxHeight: 300} 表示『大於等於200px寬度，而且小於等於300px高度』。

默認 query：

若是 media 中有某項不寫 query，則表示『默認值』，即全部規則都不知足時，採納這個option。

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

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

『複合 option』 中的 media 不支持 merge

 chart.setOption(rawOption) 時，

新的 rawOption.media 列表不會和老的 media 列表進行 merge，而是簡單替代。

rawOption.baseOption 會和老的 option 進行merge。

不多有場景須要使用『複合 option』來屢次 setOption，

，使用 mediaQuery 時，第一次setOption使用『複合 option』，

後面 setOption 時僅使用 『原子 option』，也就是僅僅用 setOption 來改變 baseOption。