完美解决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 相关文章推荐
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
微信小程序实现授权登录
May 15 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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
数据库的日期格式转换
2006/10/09 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
为你总结一些php信息函数
2015/10/21 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
python检查URL是否正常访问的小技巧
2017/02/25 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
网管求职信
2014/03/03 职场文书
百家讲坛观后感
2015/06/12 职场文书
记者节感言
2015/08/03 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
nginx rewrite功能使用场景分析
2022/05/30 Servers
如何利用python创作字符画
2022/06/25 Python