1. 瀏覽器頁面尺寸變化，圖表自動改變尺寸
在 echarts 中繪製圖表，都是使用預先指定了一個明確尺寸的 DOM 容器。這也就意味着，圖表一旦渲染完成，後續頁面尺寸發生變化，圖表也不會重新繪製以及改變尺寸。
圖表繪製完成後，容器尺寸變小，圖表右側部分被遮住：
這時候，需要手動調用 echarts 實例的 resize 方法來解決。
// resize method
resize() {
this.chart.resize();
}
// mounted 生命鉤子中，綁定 resize 事件處理函數
// 設置圖表在頁面尺寸變化時，圖表重新渲染排布
window.addEventListener("resize", this.resize);
銷燬組件前，清空 resize 事件處理函數。
// beforeDestroy 生命鉤子中，清空 resize 事件處理函數
window.removeEventListener("resize", this.resize);
增加以上配置後，容器尺寸變小，圖表也會重新調整尺寸，不會存在顯示不全的現象：
2. 不同屏幕配置下，使用不同佈局
這部分可以參考文檔中移動端自適應部分的內容。
echarts 中組件的定位設置以及Media Query 的能力，爲 echarts 圖表提供了圖表內部組件隨着容器尺寸變化而變化的能力
1. 組件的定位設置
- left/right/top/bottom/width/height 定位方式：
-
left：距離 DOM 容器左邊界的距離。
-
right：距離 DOM 容器右邊界的距離。
-
top：距離 DOM 容器上邊界的距離。
-
bottom：距離 DOM 容器下邊界的距離。
-
width：寬度。
-
height：高度。
這六個量中，每個量都可以是『絕對值』(eg: {left: 23, height: 400})或者『百分比』（eg: {right: ‘30%’, bottom: ‘40%’}）或者『位置描述』（eg: left: ‘center’, top: ‘middle’）。
- center / radius 定位方式：
- center: [x, y]
- radius: [內半徑，外半徑]
-
橫向（horizontal）和縱向（vertical）
在細長的移動端屏幕上，可能適合使用『縱向佈局』；在PC寬屏上，可能適合使用『橫向佈局』。橫縱向佈局的設置，一般在『組件』或者『系列』的 orient 或者 layout 配置項上，設置爲 ‘horizontal’ 或者 ‘vertical’。
2. Media Query
echarts 中的 Media Query 的概念與 CSS 中的媒體查詢概念十分相似，它針對頁面的不同視口尺寸或配置來設置斷點，爲其提供合適的組件佈局。
在 option 中設置 Media Query 的語法格式如下所示：
option = {
baseOption: { // 這裏是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // 這裏定義了 media query 的逐條規則。
{
query: {...}, // 這裏寫規則，現在支持三個屬性：width、height、aspectRatio（長寬比）。每個屬性都可以加上 min 或 max 前綴。
option: { // 這裏寫此規則滿足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二個規則。
option: { // 第二個規則對應的option。
legend: {...},
...
}
},
{ // 這條裏沒有寫規則，表示『默認』，
option: { // 即所有規則都不滿足時，採納這個option。
legend: {...},
...
}
}
]
};
下面給出一個具體的例子，media query 部分的代碼如下：
{
baseOption: {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: "horizontal",
top: 0,
left: 10,
data: [
"已分配庫存",
"凍結庫存",
"未上架庫存",
"其他區域庫存",
"正常庫位庫存"
]
},
series: [
{
name: "庫存狀態",
type: "pie",
radius: ["40%", "80%"],
center: ["50%", "56%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold"
}
},
labelLine: {
show: false
}
}
]
},
media: [
{
query: {
minAspectRatio: 1,
minWidth: 400
},
option: {
legend: {
orient: "vertical"
},
series: [
{
center: ["50%", "50%"]
}
]
}
}
]
}
上面代碼中的 media query 十分簡單，就是當 容器尺寸大於等於 400px 且屏幕長寬比大於1時，改變圖例的爲垂直佈局，改變餅圖的放置位置。最終效果圖如下：
基礎佈局效果：
滿足查詢條件佈局效果：
