我想做到点击后放大，再点击缩小,请问该怎么做？
附上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>
