vue實(shí)現(xiàn)多個(gè)echarts根據(jù)屏幕大小變化而變化實(shí)例
前言
有如下頁(yè)面需求：在一個(gè)頁(yè)面展示多個(gè)echarts圖表，并且根據(jù)屏幕大小變化而變化。
實(shí)例
可以封裝成組件使用，以增加代碼復(fù)用性
// myCharts.vue
<template>
<div class="charts-comps" ref="charts"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'myCharts',
props: {
type: {
type: String,
default: ''
}
},
data () {
return {
resizeTimer: null,
myChart: null
}
},
methods : {
init () {
let myChart = echarts.init(this.$refs.charts);
this.myChart = myChart;
myChart.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
});
}
}
mounted () {
this.init(); // 初始化圖表
let _this = this;
window.addEventListener('resize', function () {
if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
_this.resizeTimer = setTimeout(function () {
_this.myChart.resize();
}, 100)
})
}
}
</script>
<style lang="less" scoped>
.charts-comps{
width: 100%;
height: 100%;
}
</style>
這樣就可以在需要用到的地方使用了
// index.vue
<template>
<my-charts class="charts-comps" ref="charts" v-for="item in dataList" :key="item"></my-charts>
</template>
<script>
import myCharts from './myCharts'
export default {
name: 'test',
components: {myCharts},
data () {
return {
dataList: ['test1','test2','test3','test4']
}
}
}
</script>
關(guān)鍵代碼解析
let _this = this;
window.addEventListener('resize', function () {
...
})
在myCharts組件中去監(jiān)聽(tīng)窗口大小變化，這樣可以針對(duì)每一個(gè)圖表很方便的resize()重繪圖表（Echarts.resize()是echarts的對(duì)圖表進(jìn)行重新繪制的方法）。這里使用window.addEventListener而不使用window.onresize的原因是：window.onresize繪覆蓋掉前面定義的方法，而只執(zhí)行最后一個(gè)，導(dǎo)致圖表只有最后一個(gè)重繪了，而window.addEventListener避免了這個(gè)問(wèn)題。
if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
_this.resizeTimer = setTimeout(function () {
_this.myChart.resize();
}, 100)
結(jié)合 函數(shù)防抖（debounce） 避免在窗口大小變化時(shí)頻繁的進(jìn)行圖表的resize()。在處理復(fù)雜的function時(shí)可以很大限度的提高性能。實(shí)現(xiàn)原理就是對(duì)要執(zhí)行的目標(biāo)方法延時(shí)處理，設(shè)置一個(gè)定時(shí)器，當(dāng)再次執(zhí)行相同方法時(shí)（窗口大小變化時(shí)會(huì)被頻繁的偵聽(tīng)到onresize），若前一個(gè)定時(shí)任務(wù)還未執(zhí)行完，則清除掉定時(shí)任務(wù)，重新定時(shí)。這樣當(dāng)屏幕大小在100毫秒之內(nèi)沒(méi)有再次變化時(shí)才會(huì)對(duì)Echarts進(jìn)行resize()，當(dāng)然時(shí)間段可以根據(jù)自身需要設(shè)置長(zhǎng)一點(diǎn)。
補(bǔ)充知識(shí)：vue+echarts 同頁(yè)面多個(gè)echarts圖表，明明寬度設(shè)置的都是100%，卻只有第一個(gè)生效以及如何實(shí)現(xiàn)自適應(yīng)
問(wèn)題描述
三個(gè)echarts圖表,明明寬度設(shè)置的都是100%，卻只有第一個(gè)生效以及如何實(shí)現(xiàn)自適應(yīng)
解決辦法
1.初始化時(shí)需要加上，確保操作的是最新的DOM
this.$nextTick(_ => {
});
2.echarts圖表自適應(yīng)實(shí)現(xiàn)，需要在渲染圖表后加上
window.addEventListener("resize", function() {
myChart.resize();
});
完整如下：
以上這篇vue實(shí)現(xiàn)多個(gè)echarts根據(jù)屏幕大小變化而變化實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫的詳細(xì)步驟
這篇文章主要介紹了VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫,引入步驟大概是在 html 中通過(guò)引入 script 標(biāo)簽加載API服務(wù)，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳
這篇文章主要介紹了Vue中如何使用ElementUI實(shí)現(xiàn)圖片上傳,這里用了elementUI的一個(gè)簡(jiǎn)單的例子，給大家介紹的非常詳細(xì)，需要的朋友可以參考下2024-03-03
vue2.0開(kāi)發(fā)入門筆記之.vue文件的生成和使用
本篇文章主要介紹了vue2.0開(kāi)發(fā)入門筆記之.vue文件的生成和使用 ,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue自定義指令實(shí)現(xiàn)v-tap插件的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參
這篇文章主要介紹了vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue+Element UI 樹(shù)形控件整合下拉功能菜單（tree + dropdown +input）
這篇文章主要介紹了Vue+Element UI 樹(shù)形控件整合下拉功能菜單（tree + dropdown +input）的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
Vue3中關(guān)于ref和reactive的問(wèn)題
這篇文章主要介紹了Vue3中關(guān)于ref和reactive的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js表格分頁(yè)示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08