vue中echarts3.0自适应的方法

 更新时间:2018年02月26日 15:53:37   作者:baidu_35711175  
这篇文章主要介绍了vue中echarts3.0自适应,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前端时间做一个vue的项目,echart是按需引入的如下:

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'

然后发现在缩放浏览器窗口时折线图并不会自适应,费了好一会才解决,记录下来给需要的小伙伴,

第一种:浏览器自适应

通过:

在myChart.setOption后添加

window.onresize = myChart.resize;

如果有多个图形,可以封装成方法: 

mounted(){ 
this.changEcharts(); 
}, 
methods:{ 
changEcharts() { 
window.addEventListener('resize', ()=> { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize();});};},} 
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth')); 

第二种情况,根据div大小的变化进行自适应

因为vue不能实时监测div大小变化的,所以我定义了一个按键,当按键的值变化的时候,进行resize;

import { mapState }from'vuex'; 
computed: mapState({isCollapse:'isCollapse',//这里我是语用的vuex保存的变量,可以不用vuex,我是因为组件之间的通讯}), 
watch: { 
isCollapse() { // 注意一定不要用箭头函数,会获取不到this 
setTimeout(() => { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize(); 
}, 500);},}, 

其实我用这个是在导航进行伸缩的时候,导致div大小发生了变化,所以这样执行reszie,就能完美的自适应

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue中路由参数与查询参数传递对比解析

    Vue中路由参数与查询参数传递对比解析

    在Vue.js中,路由与导航不仅涉及页面切换,还包括了向页面传递参数和获取查询参数,这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下
    2023-08-08
  • Vuepress使用vue组件实现页面改造

    Vuepress使用vue组件实现页面改造

    这篇文章主要为大家介绍了Vuepress使用vue组件实现页面改造示例过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 页面tooltip组件限制工具函数使用示例详解

    页面tooltip组件限制工具函数使用示例详解

    这篇文章主要为大家介绍了页面tooltip组件的限制工具函数使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 浅谈Vue3 Composition API如何替换Vue Mixins

    浅谈Vue3 Composition API如何替换Vue Mixins

    这篇文章主要介绍了浅谈Vue3 Composition API如何替换Vue Mixins,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 解读resetFields()不生效的原因

    解读resetFields()不生效的原因

    这篇文章主要介绍了解读resetFields()不生效的原因,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue中用JSON实现刷新界面不影响倒计时

    Vue中用JSON实现刷新界面不影响倒计时

    这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 详解vue2.0 不同屏幕适配及px与rem转换问题

    详解vue2.0 不同屏幕适配及px与rem转换问题

    这篇文章主要介绍了详解vue2.0 不同屏幕适配及px与rem转换问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 一文解决vue2 element el-table自适应高度问题

    一文解决vue2 element el-table自适应高度问题

    在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度,本问小编给大家介绍了如何解决vue2 element el-table自适应高度问题,需要的朋友可以参考下
    2023-11-11
  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    这篇文章主要介绍了推荐VSCode 上特别好用的 Vue 插件之vetur,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue实现记事本小功能

    vue实现记事本小功能

    这篇文章主要为大家详细介绍了vue实现记事本小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论