完美解决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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
BootStrap中
Dec 10 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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入门
2006/10/09 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python实现简单多人聊天室
2018/12/11 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
应届生护士求职信
2013/11/01 职场文书
前台文员岗位职责
2013/12/28 职场文书
返乡农民工证明
2015/06/24 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript