vue.js Echarts开发图表放大缩小功能实例

最近使用echarts来开发某系统的图表功能，先申明我以前用的ext.js，ext.js对图表有自己的一套组件，用起来也很方便。但是由于ext.js过于臃肿，公司决定使用echarts来开发图表功能。当我们使用的时候才悲催的发现，echart绘制之后，不能随着容器差异的大小而变化。而我们所开发的图表是需要有放大缩小功能，于是在网上找了很久，也没有找到合适的答案，大部分是通过监听窗口大小改变事件来设置，然而并不是我们所需要的。于是自己用了一点点时间，了解了为何echarts不能重新渲染，原来是在容器差异里面设置了标记，每个差异容器只能被渲染一次。知道原因之后，就容易了，就写了一个简单的演示。希望可以帮到有需要的同学。

超文本标记语言代码：

！doctype htmlhtmlhead titlevue图表/标题脚本src=' http : echart。量滴js /脚本脚本src=' http : vue。js /脚本样式。按钮{ float:left宽度宽度：150像素高度：60 pxcolor : # cc 3333 border :2 px实心# CC3333背景色-: # 3399 cc；线高：60 px文本对齐：居中；font-size :36 px} .按钮：悬停{向左浮动：宽度宽度：150像素高度：60 px颜色： # 3399 ccborder:2px实心# 3399CC背景-颜色： # cc 3333线高：60 px文本对齐：居中；font-size :36 px} .图表{ margin:0自动} #但是{ width :310 pmargin :0 auto }/style/head body div id=' app ' div id=' panel ' div class=' chart ' id=' main ' style=' width :300 px；高度：300 px '/div/div div id='但是div id=' add ' class=' button ' @ click=' add '放大/div div id=' reduce ' class=' button ' @ click=' reduce '缩小/div /div /div/body/htmljs代码：

var vm=new Vue({ el:'#app '，data: { size:300，})，computed : { style : function(){ return ' width : ' this。宽度' px；height:' this.height 'px' }，方法： { add : function(){ if(this。尺寸900){这个。大小=这个。尺寸50；} else { this.size=900} }，reduce : function(){ if(this。300号){这个。大小=这个。尺寸-50；} else { this . size=300 } } } })var myChart=echart。init(文档。getelementbyid(' main ')；var option={ title : { text : ' echart入门}，tooltip: {}，legend: { data:['销量] }，xAxis: { data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子] }，yAxis: {}，series: [{ name: '销量，键入： 'bar '，data: [5，20，36，10，10，20]}]}；myChart.setOption(选项);//基于准备好的多姆，初始化echarts实例虚拟机$watch('size '，function(newVal，oldVal){ var DOM=document。getelementbyid(' panel ')DOM。innerHTMl=' div class=' chart ' id=' main ' style=' width : ' NewVal ' px；高度： ' NewVal ' px '/div '；var myChart=echart。init(文档。getelementbyid(' main ')；myChart.setOption(选项);})

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