本文將介紹Vue Echarts自適應功能，Vue Echarts是一個開源的可定制的數據可視化圖表庫，帶有Vue.js的封裝組件，使其易于在Vue.js項目中使用。Echarts是阿里巴巴的一個開源項目，致力于讓數據變得更加美觀易懂。Vue與Echarts的結合，可以非常方便地實現各種各樣的數據可視化圖表的展示。但是，在不同的終端上展示同一組數據，為了能夠協調得更符合當前終端下的視覺美感，Vue Echarts提供了自適應的功能，來解決這個問題。

Vue Echarts在不同規格的容器和不同的終端上需要展示出來的圖表，就需要有自適應的能力。自適應的功能可以說是Vue Echarts 2.x版本的核心更新，可以自適應調整繪制區域，如：大小、位置、比例等。當然，也不會影響到圖表系列的渲染，繪制區域發生變化只會觸發重繪，該功能是基于 ECharts4+的 API 實現。

import ECharts from 'vue-echarts'
// import ECharts modules manually to reduce bloat
import 'echarts/lib/chart/bar'
// import our custom theme
import lightTheme from './themes/light.js'
export default {
components: {
ECharts
},
data () {
return {
chartHeight: '300px'
}
}
}

Vue Echarts自適應功能的實現我選擇通過控制圖表容器并且更改圖表的大小來實現。該方法可以適應所有的屏幕尺寸和移動設備。具體實現方式就是在APP created生命周期鉤子函數中，通過讀取頁面已存在的div的寬度和高度，然后把該值賦給ECharts的圖表容器，在Vue的樣式中聲明，這樣就可以確保在所有設備上都可以獲得正確的高度和寬度。另外，在樣式中設置relative位置和overflow:hidden屬性，會讓容器“懶惰”，隨著Echarts自適應，容器的高度和寬度都會相應地增加或減少。

mounted () {
window.onresize = () =>{
this.resizeChart()
}
},
methods: {
resizeChart () {
this.chartHeight = window.innerHeight * 0.8 + 'px'
}
}

Vue Echarts自適應功能的大多數實現都是在mounted生命周期鉤子函數中。我們在mounted函數中，利用window.onresize事件監聽窗口大小的變化，然后根據窗口大小的變化調整圖表的高度和寬度。這樣在窗口大小發生變化時，圖表可以實現自適應效果。

總的來說，Vue Echarts自適應功能可以用于調整圖表在不同終端中展示的大小、位置和比例，從而更好地適應不同的終端。其實現方式是通過調整圖表的容器并修改其大小來實現。為了確保圖表在所有設備上都能夠得到正確的寬度和高度，我們在控制容器大小的同時，還需要在Vue的樣式中聲明一些設置。