图表数据过多展示起来密密麻麻看不到细节，需要实现缩放

以下是未做缩放效果图

在网上查看了许多方式之后一直不起效果，都说添加 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"> &nbsp[</font>';var right = '<font color="red">]&nbsp </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"> &nbsp[</font>';var right = '<font color="red">]&nbsp </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>

echarts 实现图表缩放功能 dataZoom自带属性实现相关推荐

若依项目整合eCharts实现图表统计功能
eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...
echarts使用技巧（1）echarts的图表自适应resize问题、单选、缩放等
这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...
echarts使用技巧（一）echarts的图表自适应resize问题、单选、缩放等
这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...
JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
python 数据比对函数_1行代码实现Python数据分析：图表美观清晰，自带对比功能丨开源...
原标题:1行代码实现Python数据分析:图表美观清晰,自带对比功能丨开源
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Apache Echarts常用图表之折线图
文章目录 Echarts常用图表折线图 1. 折线图的实现步骤 2. 折线图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 标注区间 `markArea` 数值显示 ...
echarts 数据区域缩放
echarts 数据区域缩放官方文档:Documentation - Apache ECharts ********************* 配置属性 **************** 内置型组件 ...

echarts 实现图表缩放功能 dataZoom自带属性实现

echarts 实现图表缩放功能亲测有效，dataZoom自带属性实现

图表数据过多展示起来密密麻麻看不到细节，需要实现缩放

这确实是实现了缩放，但是需求是标尺进行缩放，我们可以添加如下属性

echarts 实现图表缩放功能 dataZoom自带属性实现相关推荐

最新文章

热门文章

echarts 实现图表缩放功能 dataZoom自带属性实现

echarts 实现图表缩放功能 亲测有效，dataZoom自带属性实现

图表数据过多展示起来密密麻麻看不到细节，需要实现缩放

这确实是实现了缩放，但是需求是标尺进行缩放，我们可以添加如下属性

echarts 实现图表缩放功能 dataZoom自带属性实现相关推荐

最新文章

热门文章

echarts 实现图表缩放功能亲测有效，dataZoom自带属性实现