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