vue.js+Echarts开发图表放大缩小功能实例
时间:2019-03-30
本文章向大家介绍vue.js+Echarts开发图表放大缩小功能实例,主要包括vue.js+Echarts开发图表放大缩小功能实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便。但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能。当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化。而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的。于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在容器div里面设置了标记,每个div容器只能被渲染一次。知道原因之后,就容易了,就写了一个简单的demo。希望可以帮到有需要的同学。
html代码:
<!doctype html> <html> <head> <title>vue+chart</title> <script src="echarts.min.js"></script> <script src="vue.js"></script> <style> .button{ float:left; width:150px; height:60px; color:#CC3333; border:2px solid #CC3333; background-color:#3399CC; line-height:60px; text-align:center; font-size:36px; } .button:hover{ float:left; width:150px; height:60px; color:#3399CC; border:2px solid #3399CC; background-color:#CC3333; line-height:60px; text-align:center; font-size:36px; } .chart{ margin:0 auto; } #but{ width:310px; margin:0 auto; } </style> </head> <body> <div id="app"> <div id="panel"> <div class="chart" id="main" style="width:300px;height:300px"></div> </div> <div id="but"> <div id="add" class="button" @click="add">放大</div> <div id="reduce" class="button" @click="reduce">缩小</div> </div> </div> </body> </html>
js代码:
var vm=new Vue({ el:"#app", data:{ size:300, }, computed: { style: function () { return "width:"+this.width+"px;height:"+this.height+"px" } }, methods:{ add:function(){ if(this.size<900){ this.size=this.size+50;} else{ this.size=900; } }, reduce:function(){ if(this.size>300){ this.size=this.size-50;} else{ this.size=300; } } } }) var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: 'ECharts 入门' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); // 基于准备好的dom,初始化echarts实例 vm.$watch("size",function(newVal, oldVal){ var dom=document.getElementById('panel') dom.innerHTML='<div class="chart" id="main" style="width:'+newVal+'px;height:'+newVal+'px"></div>'; var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 如何定位Obj-C野指针随机Crash(一):先提高野指针Crash率
- 如何定位Obj-C野指针随机Crash(二):让非必现Crash变成必现
- 六种开发环境部署大全:基于Openshift
- 手把手教你由TensorFlow上手PyTorch(附代码)
- 如何定位Obj-C野指针随机Crash(三):如何让Crash自报家门
- 【MIG专项测试组】腾讯手机管家实战分析:内存突增是为神马?
- 全系统栈崩溃是什么鬼?手机管家高级工程师 jaylin,教你如何抓鬼!
- 【团队分享】苍翼之刃:论File Descriptor泄漏如何导致Crash?
- 【沙龙干货分享】你要知道的N个Android适配问题
- 优化安卓应用内存的神秘方法以及背后的原理,一般人我不告诉他
- 安全快速下载Xcode的姿势
- Android之实现妙趣横生的粘连布局
- 萝莉有话说:你的App真正适配了iOS 9吗?
- H5 缓存机制浅析 移动端 Web 加载性能优化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 数据分析必备!Pandas实用手册(PART III)
- python实现决策树
- NLP简报(Issue#10)
- Transformer温故知新
- 【作者解读】ERNIE-GEN : 原来你是这样的生成预训练框架!
- Python中那些低调有趣的模块
- 01背包问题讲解(动态规划)
- python实现随机森林
- 在mysql中order by是怎样工作的?
- 多线程应用 - 阻塞队列ArrayBlockingQueue详解
- Java虚拟机 - 超级详细的类加载说明
- ReentrantLock
- 多线程应用 - 阻塞队列LinkedBlockingDeque详解
- AtomicInteger详解
- 多线程应用 - 阻塞队列LinkedBlockingQueue详解