echarts 实现图表缩放功能 dataZoom自带属性实现
echarts 实现图表缩放功能 亲测有效，dataZoom自带属性实现
图表数据过多展示起来密密麻麻看不到细节，需要实现缩放
以下是未做缩放效果图
在网上查看了许多方式之后一直不起效果，都说添加 dataZoom 属性，也没有全面一点的代码作为小白的我，真让人摸不着头脑，经过我的不懈努力查看了许多相关资料后，点点累计终于找到突破口，添加 dataZoom 属性是没错，但是对于新手小白就会犯糊涂了，代码不知添加在哪，下面根据自己的经验给大家粗略讲解一下 echarts dataZoom 自带属性的实现
我们需要知道开启缩放效果的入口是在 toolbox下 ，在toolbox.feature.dataZoom.show:true属性下添加如下代码
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {
show: true,
readOnly: false,
//修改数据视图格式
optionToContent: function (opt) {
//修改数据视图代码最后贴出，此处不做过多展示
}
},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show:true},
dataZoom : {
show : true,
}
}
}
添加刷新后我们可以看到右上角多出两个按钮
鼠标移入
添加 dataZoom属性后缩放操作如下：
1.点击区域缩放后按钮成红色，此时可将鼠标移动到图标内空白处，点击左键可以划定区域进行缩放
拖动后效果
点击缩放回退即可恢复图表视图
这确实是实现了缩放，但是需求是标尺进行缩放，我们可以添加如下属性
同toolbox同级 添加 dataZoom
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {
show: true,
//lang:["数据视图","刷新","关闭"],
readOnly: false,
//修改数据视图格式
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '时间 : '; //表头
var tdBodys = ''; //数据
var left = '<font color="red">  [</font>';
var right = '<font color="red">]  </font>';
series.forEach(function (item) {
//组装表头
tdHeads += ''+item.name+'<br/>';
});
var div = '<div>'+tdHeads;
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
//组装表数据
tdBodys +=series[j].data[i];
}
div += left+axisData[i]+' : '+tdBodys+right;
tdBodys = '';
}
div += '</div>';
return div;
}
},
selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
show:true,//是否显示
title:'数据导出', //鼠标移动上去显示的文字
//icon:'test.png', //图标
option:{},
onclick:function(option1) {//点击事件,这里的option1是chart的option信息
var r = confirm("您确定要导出数据吗？");
if (r) {
debugger;
//列标题
var str = "<tr><th> 时间 </th><th><%=mname%>(单位：<%=unit%>)</th></tr>";
//循环遍历，每行加入tr td标签
<%
for(int i = 0; i < list.size(); i++) {
Map<String,Object> map = list.get(i);
String time = (String) map.get("DATATIME");
Object value = map.get("MEASUREDVAL");
%>
str +="<tr><td><%=time%>\t</td><td><%=value%>\t</td></tr>"
<%
}
%>
var werksheet = "曲线数据";
var uri = "data:application/vnd.ms-excel;charset=utf-8,\ufeff" + encodeURIComponent(str);
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office"' +
'xmlns:x="urn:schemas-microsoft-com:office:excel"' +
'xmlns="http://www.w3.org/TR/REC-html40">' +
'<head><Name>'+werksheet+'</Name> <style type="text/css">table td,table th {width: 800px;height: 30px;text-align: center;}</style>'+
'</head><body><table>'+str+'</table></body></html>';
//下载模板
window.location.href = uri + base64(template);
}
}
},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show:true},
dataZoom : {
show : true,
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : <%=x.toString()%>
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
dataZoom : {
show : true,
realtime : true,
start : 20,
end : 80
},
以下是添加属性后的效果图
左右滑动效果
以上就基本可以实现echarts的视图缩放啦！
其他具体属性小白暂时还没理解透彻，展示就先这样啦！其他的具体参数可以参考一下官网的资料和实例哦下面附上官方网址：[https://www.echartsjs.com/zh/option.html#toolbox.feature.dataZoom.title]
去官方网站页面
以下贴出所有详细代码，有实现 数据视图 数据格式修改，以及自定义按钮添加，做出数据视图数据导出excel等
哈哈小白上路如有不足之处，还望大神指点迷津
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="org.springframework.web.context.*"%>
<%@ page import="com.regaltec.baf.framework.common.IBusiness"%>
<%@page import="com.regaltec.baf.org.user.common.valueobj.UserVO"%>
<%@page import="com.regaltec.common.util.Constant"%>
<%@page import="com.regaltec.baf.org.user.ui.control.UserLoginBean"%>
<%@page import="com.regaltec.baf.module.common.valueobj.ElementVO"%>
<%@page import="com.regaltec.baf.external.rig.right.bi.IOperateRightBI"%>
<%@page import="com.regaltec.business.resMge.common.PerfData2DBUtil"%>
<%@page import="com.regaltec.business.resMge.pwMge.fsuMge.common.valueobj.Fsu"%>
<%@page import="com.regaltec.business.resMge.pwMge.fsuMge.bi.*"%>
<%@page import="com.regaltec.business.resMge.pwMge.fsuMge.bo.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
//获取url中参数
String mid=request.getParameter("mid");
String did=request.getParameter("did");
String fsuid = request.getParameter("fsuid");
String dname=request.getParameter("dname");
dname=(dname==null)?"":java.net.URLDecoder.decode(dname, "utf-8");
String mname=request.getParameter("mname");
mname=(mname==null)?"":java.net.URLDecoder.decode(mname, "utf-8");
String unit=request.getParameter("unit");
unit=(unit==null)?"":java.net.URLDecoder.decode(unit, "utf-8");
ServletContext sc = session.getServletContext();
WebApplicationContext ctx = (WebApplicationContext) sc.getAttribute("org.springframework.web.context.WebApplicationContext.ROOT");
IBusiness business = (IBusiness) ctx.getBean("baf_businessDelegate");
IFsuBO fsuBO = (IFsuBO)ctx.getBean("bus_fsuBO");
//通过FSUID查找省份
String provinceid = "";
Fsu fsu = fsuBO.selectByPrimaryKey(fsuid);
if(fsu != null) {
provinceid = fsu.getProvinceid();
}
//查到对应的表名
String tableName = "";
if(mid.charAt(4) == '0'){
Map<String,String> map = PerfData2DBUtil.hisPerfMap_YX;
tableName = map.get(provinceid);
}else {
Map<String,String> map = PerfData2DBUtil.hisPerfMap_YC;
tableName = map.get(provinceid);
}
Hashtable hashtable = new Hashtable();
hashtable.put("did", did);
hashtable.put("mid", mid);
hashtable.put("fsuId",fsuid);
hashtable.put("tableName", tableName);
hashtable.put("ServletContext",sc);
List<HashMap<String, Object>> list = (List<HashMap<String, Object>>) business.invoke("bus_perfBI", "queryForChart", hashtable);
StringBuffer x=new StringBuffer("[");
StringBuffer y=new StringBuffer("[");
if(list != null && !list.isEmpty()){
int size=list.size();
for(int i=0;i<size;i++){
HashMap<String, Object> map = list.get(i);
x.append("'").append(map.get("DATATIME")).append("',");
y.append("'").append((String)map.get("MEASUREDVAL")).append("',");
}
}
if(x.toString().endsWith(",")){
x.deleteCharAt(x.length()-1);
}
if(y.toString().endsWith(",")){
y.deleteCharAt(y.length()-1);
}
x.append("]");
y.append("]");
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/business/resMge/pwMge/performanceMge/js/jquery.datetimepicker.css"/>
<script src="/business/resMge/pwMge/performanceMge/js/jquery.js"></script>
<script src="/business/resMge/pwMge/performanceMge/js/jquery.datetimepicker.js"></script>
<title>性能查询曲线图</title>
<script type="text/javascript">
function query(){
form1.submit();
}
</script>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div style="height:20px;border:1px solid #ccc;padding:10px;" >
<form id="form1" action="/business/resMge/pwMge/performanceMge/chart.jsp" method="post">
<table style="font-size:14px;">
<tr>
<td align='center'>
<input id="did" name="did" type="hidden" value="<%=did%>" >
<input id="mid" name="mid" type="hidden" value="<%=mid%>" >
<input id="dname" name="dname" type="hidden" value="<%=dname%>" >
<input id="mname" name="mname" type="hidden" value="<%=mname%>" >
<input id="unit" name="unit" type="hidden" value="<%=unit%>" >
</td>
</tr>
</table>
</form>
</div>
<div id="main" style="height:400px; border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script src="/business/resMge/pwMge/performanceMge/js/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
debugger;
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
title : {
x: 'center', // 'center' | 'left' | 'right'|{number},
y: 'top', //'top'| 'center' | 'bottom' | {number}
text: '<%=mname%>-性能查询曲线图',
subtext:'设备：<%=dname%>'
},
tooltip : {
trigger: 'axis'
},
legend: {
x: 'right', // 'center' | 'left' | {number},
y: 'bottom', //'top'| 'center' | 'bottom' | {number}
data:['<%=mname%>(单位：<%=unit%>)']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {
show: true,
//lang:["数据视图","刷新","关闭"],
readOnly: false,
//修改数据视图格式
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '时间 : '; //表头
var tdBodys = ''; //数据
var left = '<font color="red">  [</font>';
var right = '<font color="red">]  </font>';
series.forEach(function (item) {
//组装表头
tdHeads += ''+item.name+'<br/>';
});
var div = '<div>'+tdHeads;
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
//组装表数据
tdBodys +=series[j].data[i];
}
div += left+axisData[i]+' : '+tdBodys+right;
tdBodys = '';
}
div += '</div>';
return div;
}
},
selfButtons:{//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
show:true,//是否显示
title:'数据导出', //鼠标移动上去显示的文字
//icon:'test.png', //图标
option:{},
onclick:function(option1) {//点击事件,这里的option1是chart的option信息
var r = confirm("您确定要导出数据吗？");
if (r) {
debugger;
//列标题
var str = "<tr><th> 时间 </th><th><%=mname%>(单位：<%=unit%>)</th></tr>";
//循环遍历，每行加入tr td标签
<%
for(int i = 0; i < list.size(); i++) {
Map<String,Object> map = list.get(i);
String time = (String) map.get("DATATIME");
Object value = map.get("MEASUREDVAL");
%>
str +="<tr><td><%=time%>\t</td><td><%=value%>\t</td></tr>"
<%
}
%>
var werksheet = "曲线数据";
var uri = "data:application/vnd.ms-excel;charset=utf-8,\ufeff" + encodeURIComponent(str);
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office"' +
'xmlns:x="urn:schemas-microsoft-com:office:excel"' +
'xmlns="http://www.w3.org/TR/REC-html40">' +
'<head><Name>'+werksheet+'</Name> <style type="text/css">table td,table th {width: 800px;height: 30px;text-align: center;}</style>'+
'</head><body><table>'+str+'</table></body></html>';
//下载模板
window.location.href = uri + base64(template);
}
}
},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show:true},
dataZoom : {
show : true,
dataZoom : '区域缩放',
dataZoomReset : '区域缩放-后退'
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : <%=x.toString()%>
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
dataZoom : {
show : true,
realtime : true,
start : 20,
end : 80
},
series : [
{
name:'<%=mname%>(单位：<%=unit%>)',
//roam: true,
type:'line',
data:<%=y.toString()%>
}
]
});
}
);
//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
</script>
</body>
<script >
$('#startTime').datetimepicker({
lang:'ch',format:'Y-m-d H:i'});
$('#endTime').datetimepicker({
lang:'ch',format:'Y-m-d H:i'});
</script>
</html>