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

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

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

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

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

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