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


Posted in Javascript onJuly 19, 2020

看代码吧~

<div class="echarts">
<IEcharts :option="bar" ref="echarts"></IEcharts>
 
</div>
mounted () {
   this.selfAdaption ()
  },
  methods: {
   //echarts自适应
   selfAdaption () {
    const self = this;
    setTimeout(() => {
     window.onresize = function () {
      self.$refs.echarts.resize()
     }
    }, 10)
   }
}

上面这段代码在出现多个echarts图表时只有一个图表自适应,修改了一下

<div class="echarts">
<IEcharts :option="bar" ref="echarts"></IEcharts>
</div>
 
mounted () {
   this.selfAdaption ();
},
methods: {
  //echarts自适应
  selfAdaption () {
   let _this = this;
   setTimeout(() => {
     window.addEventListener('resize', function () {
      _this.$refs.echarts.resize();
     })
   }, 10)
  }
 }

------------------------------------------------------------------------------------------------------------------------------------

在vue中引入多个echart图表时

<div class="linebox">
 
<div :id="id" style="width:100%; height:100%;" ref="Echart"></div>
 
</div>
methods: {
  init(){
  const self = this;//因为箭头函数会改变this指向,指向windows。所以先把this保存
  setTimeout(() => {
    window.addEventListener('resize', function() {
       self.chart = self.$echarts.init(self.$refs.Echart);
       self.chart.resize();
    })
   },10)
  }
}

补充知识:vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变

vue-Echarts

公司最近做项目需要用到图表,以前是使用echarts,现在也是用这个,没什么好纠结的! 但是最近发现以前每次做图表之类的都没有封装,每次做图表都要从新去配置之类的,写了好多重复代码,感觉很累啊,所以自己把图表封装成子组件使用,代码工作量减轻了很多,而且子组件使用了数据进行监听和图表自适应屏幕大小,这样以后会方便很多了!

当然公司的项目肯定不能发出来了,我会做个简单的demo出来

先截个图吧!

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

其实我也未作什么太复杂的工作,以前工作中,页面中要2个图表,我在methods:{}中写两个方法配置之类的,类似这样子:

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

好了,首先第一步,使用echarts当然要引用了

1. vue 项目中 引用echarts

cnpm install echarts -S

执行完毕后再 main.js中引入

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

因为是pc端的项目,用了element ui (不重要),引入之后就可以在全局使用了,之前对这个不是很懂,每个要图表页面都引入echarts,就像这个样子:

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

使代码写的乱七八糟的,现在在全局引用了,就不需要在每个用图表的页面中引入了

2. 父子组件中使用图表,现在我做的这个页面把他分成两个部分,这个页面整体为父,两个图表为子组件,这样子

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

1.先看下父组件代码,样式类的请忽视

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

import linegraph from '@/components/linegraph.vue'
export default {
data(){
return{
notAccess:false,
ChartLineGraph2:null,
option:{
  title: {
    text: '全年产量趋势图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}'
  },
  legend: {
    left: 'center',
    data: ['本年', '上年'],
    bottom:0
  },
  xAxis: {
    type: 'category',
    name: 'x',
    splitLine: {show: false},
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  grid: {
    left: '1%',
    right: '2%',
    bottom: '8%',
    containLabel: true
  },
  yAxis: {
    type: 'category',
    name: 'y',
    splitLine: {show: true},
    data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']   
  },
  series: [
    {
      name: '本年',
      type: 'line',
      data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
    },
    {
      name: '上年',
      type: 'line',
      data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
    },
  ]
},
option2:{
   title: {
    text: '全年设备产量对比图',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    left: 'center',
    data: ['本年', '上年'],
    bottom:0
  },
  grid: {
    left: '1%',
    right: '2%',
    bottom: '8%',
    containLabel: true
  },
  series: [
  {
  name: '本年',
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    barWidth:30,
  },
  {
  name: '上年',
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    barWidth:30,
  }]
}
   
}
},
mounted(){

},
components:{
ErrorTip,
linegraph,
}
}

这是父组件代码,两个图表不管是折线图还是柱状图都是使用 linegraph.vue这个子组件来进行的,因为我把echarts图表生成的配置项都放在了父组件里面,然后通过父组件给子组件传值实现图表生成,

3.父组件我们看完了,现在我们看下是如何封装的图表类linegraph.vue子组件,我先截图一下,然后解释:

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

这里需要注意一下这几个问题,

第一个: 父子组件传值问题 ,父组件需要传id值和配置项的值给子组件生成图表,通过vue的prop传过来的id和data(配置项) ,具体怎么传值可看父子组件传值代码或百度;

第二点: 我们首先设想这样一个场景: 当父组件的传值 option或者option2 (图表配置项),刚开始在data()里面是设置为option:null,或者是一个空的对象,或者配置项缺少数据这部分,在methods中通过ajax调用接口获取到数据然后赋值给option,例如:this.option = 一个对象,可以成图表之类的,当option值未改变时就把option=null的值传递给了子组件,这样图表生成不了,像这样

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

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

数据不能动态传值 ,数据不能动态传值! 要解决这个问题,必须用到vue watch的对象深度监听,我之前写了一篇watch,正好用上了

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

对子组件接受到的data(配置项)进行深度监听,当父组件通过ajax改变了传过来的data的值,图表将会重新渲染。

3.第三个问题

图表自适应,当屏幕大小改变时,图表也需要进行自适应,本来挺简单的东西,被我头脑转不过来,搞了一个小时,总算搞好了啊,其实之前写的就是在 子组件的 drawLineGraph()方法里面写入一个方法,这个方法

window.onresize =this.ChartLineGraph.resize;

还是出问题了,这个页面两个图表,结果只有后面的图表会自适应,前面的那个没反应???,我就蒙了,还以为自己方法写错了,真是蛋疼, 改成这样,那个this一定要注意,我就是搞错对象了,然后两个图表都可以自适应

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

好吧,这是我封装的echarts组件,没有进行ajax的对接操作,如果有问题,欢迎留言!

以上这篇完美解决vue 中多个echarts图表自适应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
js常用DOM方法详解
Feb 04 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 #Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 #Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 #Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 #Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 #Javascript
JS中作用域以及变量范围分析
Jul 18 #Javascript
JS中的变量作用域(console版)
Jul 18 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python记录程序运行时间的三种方法
2017/07/14 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python实战教程之自动扫雷
2018/07/13 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python-openCV开运算实例
2020/07/05 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
cf战队收人口号
2014/06/21 职场文书
倡议书的写法
2014/08/30 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript