请问大神，Echarts如何点击div改变图的大小?
问题描述：
我想做到点击后放大，再点击缩小,请问该怎么做？
附上jsp
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>温度管理</title>
</head>
<div id="d" style="width: 150px; height: 68px;" ></div>
<body>
<script type="text/javascript"
src="/jeesite/static/js/echarts/echarts.js"></script>
<script type="text/javascript"
src="/jeesite/static/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('d'))
option = {
title : {
text : '实时温度',
textStyle : {
fontSize : 20,
color : [ '#3398DB' ],
}
},
//颜色渐变
visualMap : {
min : 0,
max : 80,
left : 'left',
top : 'bottom',
text : [ '高', '低' ], // 文本，默认为数值文本
calculable : true,
inRange : {
color : [ '#00FF00', '#32CD32', '#2E8B57', '#FF0000',
'#B22222', '#8B0000' ]
}
},
color : [ '#3398DB' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
restore : {
show : true
},
savaAsImage : {
shwo : true
}
}
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
grid : {
y2 : 140
},
xAxis : [ {
type : 'category',
data : [],
axisTick : {
alignWithLabel : true
},
axisLabel : {
interval : 0,
rotate : -30,
}
}, {
type : 'category',
data : [],
axisTick : {
alignWithLabel : true
},
axisLabel : {
interval : 0,
rotate : -30,
}
} ],
legend : {
data : [ '当前温度' ]
},
yAxis : [ {
type : 'value'
} ],
series : [ {
name : "",
type : 'bar',
barWidth : '60%',
//顶部显示温度'top'
label : {
normal : {
show : true,
position : 'top'
}
},
data : []
}
]
};
var tagId = [];
var temperature = [];//温度信息
var addTime = [];//读取时间
var remarks = [];//备注信息
$.ajax({
type : "post",
async : true, //异步请求:同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行
url : "${ctx}/temperature/tblTem/allTem",
data : {
},
dataType : "json",
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
// alert('实时温度系统');
for (var i = 0; i < result.length; i++) {
temperature.push(result[i].temperature);
addTime.push(result[i].addTime);
remarks.push(result[i].remarks);
tagId.push(result[i].tagId);
}
myChart.setOption({
xAxis : [ {
data : addTime
}, {
type : "category",
data : remarks
} ],
series : [ {
type : 'bar',
data : temperature,
//画直线
markLine : {
data : [ {
name : '起始',
xAxis : 0,
yAxis : 55
}, {
name : '结束',
value : 40,
xAxis : 0,
yAxis : 40
} ],
}
} ]
})
}
});
myChart.setOption(option);
//打印数据
console.warn(remarks, addTime, temperature);
</script>
<script language="JavaScript">
function myrefresh() {
window.location.reload();
}
setTimeout('myrefresh()', 60000); //指定1分钟刷新一次
</script>
</body>
</html>
答
点击前
点击后
点击前是200px的高，点击后400px的高，解决这个问题要么刷新页面自动重新绘制，要么直接调用函数主动重新绘制。建议你采用第二种，必定在同一页面，重绘比较方便。
答
div 上加onclick 吧
立flag 奇数就设置div大小变大
偶数就设置div变大
答
为啥不直接flag = false;true切换，这样直接变量，最后flag点击多了弄很大。
判断还麻烦，用false和true直接
if(flag){//代码}else{//代码}
答
vue+chart
<!-- -->
一个例子，不知道是不是你要的
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
vue+chart
<!-- -->
<style>
.button{
float:left;
width:50px;
height:30px;
color:#CC3333;
border:1px solid #CC3333;
background-color:#3399CC;
line-height:30px;
text-align:center;
font-size:20px;
}
.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>
<div id="but">
<div id="add" class="button" @click="add">放大</div>
<div id="reduce" class="button" @click="reduce">缩小</div>
</div>
</div>
<script type="text/javascript">
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;
}
/* 或者直接this.size=600; */
},
reduce:function(){
if(this.size>300){
this.size=this.size-50;}
else{
this.size=300;
}
/* 或者直接 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){
alert("newVal="+newVal);
alert("oldVal"+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);
})
</script>
答
最近正在做的项目也有这个需求，下面是我实现的代码楼主可以参考一下
changeViewPie () {
const timer = setTimeout(() => {
this.drawPie()
this.setChartPie(this.chartPieFlag)
}, 300)
if (this.bigChartPie) {
this.bigChartPie = !this.bigChartPie
this.$refs.myChartPie.innerHTML = "<div id='myChartPie' style='width: 4.9rem;height: 3.5rem'></div>"
timer
} else {
this.bigChartPie = !this.bigChartPie
this.$refs.myChartPie.innerHTML = "<div id='myChartPie' style='width: 9.94rem;height: 6.33rem'></div>"
timer
}
}