vue.js+Echarts开发图表放大缩小功能实例
程序员文章站
2022-03-21 15:06:30
最近使用echarts来开发某系统的图表功能，先申明我以前用的ext.js，ext.js对图表有自己的一套组件，用起来也很方便。但是由于ext.js过于臃肿，公司决定使用e...
最近使用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);
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue 中自定义指令改变data中的值
下一篇： 利用vueJs实现图片轮播实例代码