vue实现多个echarts根据屏幕大小变化而变化实例

站长资源 2024/11/24 佚名

23 1538 23

DDR爱好者之家 Design By 杰米

前言

有如下页面需求：在一个页面展示多个echarts图表，并且根据屏幕大小变化而变化。

实例

可以封装成组件使用，以增加代码复用性

// 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>

关键代码解析

let _this = this;
window.addEventListener('resize', function () { 
 ...
})

在myCharts组件中去监听窗口大小变化，这样可以针对每一个图表很方便的resize()重绘图表（Echarts.resize()是echarts的对图表进行重新绘制的方法）。这里使用window.addEventListener而不使用window.onresize的原因是：window.onresize绘覆盖掉前面定义的方法，而只执行最后一个，导致图表只有最后一个重绘了，而window.addEventListener避免了这个问题。

if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
_this.resizeTimer = setTimeout(function () {
 _this.myChart.resize();
}, 100)

结合函数防抖（debounce）避免在窗口大小变化时频繁的进行图表的resize()。在处理复杂的function时可以很大限度的提高性能。实现原理就是对要执行的目标方法延时处理，设置一个定时器，当再次执行相同方法时（窗口大小变化时会被频繁的侦听到onresize），若前一个定时任务还未执行完，则清除掉定时任务，重新定时。这样当屏幕大小在100毫秒之内没有再次变化时才会对Echarts进行resize()，当然时间段可以根据自身需要设置长一点。

补充知识：vue+echarts 同页面多个echarts图表，明明宽度设置的都是100%，却只有第一个生效以及如何实现自适应

问题描述

三个echarts图表,明明宽度设置的都是100%，却只有第一个生效以及如何实现自适应

解决办法

1.初始化时需要加上，确保操作的是最新的DOM

this.$nextTick(_ => {  
   
});

2.echarts图表自适应实现，需要在渲染图表后加上

window.addEventListener("resize", function() {        
 myChart.resize();      
});

完整如下：

以上这篇vue实现多个echarts根据屏幕大小变化而变化实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,多个echarts,屏幕大小

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“vue实现多个echarts根据屏幕大小变化而变化实例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

vue实现多个echarts根据屏幕大小变化而变化实例

完美解决vue 中多个echarts图表自适应的问题

解决vue一个页面中复用同一个echarts组件的问题

评论“vue实现多个echarts根据屏幕大小变化而变化实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接