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+iview+less+echarts实战项目总结
- 在Vue中使用echarts的方法
- 在vue中通过axios异步使用echarts的方法
- vue+vuex+axios+echarts画一个动态更新的中国地图的方法
- vue在使用ECharts时的异步更新和数据加载详解
- 在vue中添加Echarts图表的基本使用教程
- vue.js如何将echarts封装为组件一键使用详解
- 在Vue中使用echarts的实例代码(3种图)
- vue.js+Echarts开发图表放大缩小功能实例
- Vue2 使用 Echarts 创建图表实例代码
相关推荐
-
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save
-
vue.js如何将echarts封装为组件一键使用详解
前言 本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 说明 做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview.element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装 控件演示 控件使用 概要 基于echarts的二次封装 由数据驱动 控件源码见src/com
-
Vue2 使用 Echarts 创建图表实例代码
在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main
-
在Vue中使用echarts的实例代码(3种图)
前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换
-
在vue中通过axios异步使用echarts的方法
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js
-
vue+iview+less+echarts实战项目总结
首先我们先分享一下源码:https://github.com/kunfan96/vue-admin 对于我这种刚开始用Vue做项目的菜鸟来说在组件数据定义方面犯了很多错误,尤其是在这个页面 在进行数据回选的时候自己重定义已经定好的数据,导致数据非常杂乱无章,具体在storeDetail.vue的14--321行,感觉这么多数据非常有必要的进行裁剪,用js进行运算把数据补充完整,这里相对把后台的任务减轻了很多,只是额外增加前端渲染数据的量 父子组件数据通讯问题 刚开始写Modal的时候对于Moda
-
在Vue中使用echarts的方法
上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我
-
在vue中添加Echarts图表的基本使用教程
前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D
-
vue在使用ECharts时的异步更新和数据加载详解
前言 最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm 下面话不多说了,来一起看看详细的介绍吧. 使用方法 使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo
-
vue.js+Echarts开发图表放大缩小功能实例
最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在
随机推荐
- ThinkPHP3.2.3实现分页的方法详解
- 微信公众号测试账号自定义菜单的实例代码
- (asp.net c#)DropDownList绑定后显示对应的项的两种方法
- VS2008无法直接查看STL值的解决方法
- 有关wxpython pyqt内存占用问题分析
- C++ 基础编程之十进制转换为任意进制及操作符重载
- vue.js学习之递归组件
- MYSQL ERROR 1045 (28000): Access denied for user (using password: YES)问题的解决
- 关于编写性能高效的javascript事件的技术
- 2008年企业新年贺词范文
- Linux(CentOS)环境下安装下载Nginx并配置
- sqlserver 数据库学习笔记
- javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
- Java NIO和IO的区别
- Android RecyclerView添加头部和底部实例详解
- 建立动态的WML站点(二)
- javaScript手机号码校验工具类PhoneUtils详解
- Java可以如何实现文件变动的监听的示例
- jsp页面中获取servlet请求中的参数的办法详解
- vue-cli3+ts+webpack实现多入口多出口功能
其他
- springboot获取resources的路径
- vue 打包成静态文件在iis部署
- 在XP系统下实现VPN的搭建
- 如何不使用androidx
- postgresql会多带一个.0
- 解决vuecli3中img src 的引入问题
- python 矩形框重叠率
- android toolbar 显示时间
- centos怎么查看一个文件是什么时候备份的
- vue的src没有转换相对路径
- conda tesnorflow 2.6 无法保存模型
- python画自相关和偏自相关图
- python扫描工具
- js正则表达式验证整数和小数
- 如何用python拟合曲线
- vue实现markdown编辑器以及md文件转化成html
- docker打包java war应用redis
- a-table row-selection一点全部选中
- 容器内不能访问宿主机其他端口
- vue audio自动播放