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

2024-06-24 03:50| 来源: 网络整理| 查看: 265

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 = ' ['; var right = '] '; series.forEach(function (item) { //组装表头 tdHeads += ''+item.name+''; }); var div = ''+tdHeads; for (var i = 0, l = axisData.length; i //组装表数据 tdBodys +=series[j].data[i]; } div += left+axisData[i]+' : '+tdBodys+right; tdBodys = ''; } 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 td标签 show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show:true}, dataZoom : { show : true, } } }, calculable : true, xAxis : [ { type : 'category', data : } ], 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等哈哈小白上路如有不足之处，还望大神指点迷津

Map map = PerfData2DBUtil.hisPerfMap_YX; tableName = map.get(provinceid); }else { Map 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 list = (List) 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 x.deleteCharAt(x.length()-1); } if(y.toString().endsWith(",")){ y.deleteCharAt(y.length()-1); } x.append("]"); y.append("]"); %> 性能查询曲线图 function query(){ form1.submit(); } // 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: '-性能查询曲线图', subtext:'设备：' }, tooltip : { trigger: 'axis' }, legend: { x: 'right', // 'center' | 'left' | {number}, y: 'bottom', //'top'| 'center' | 'bottom' | {number} data:['(单位：)'] }, 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 = ' ['; var right = '] '; series.forEach(function (item) { //组装表头 tdHeads += ''+item.name+''; }); var div = ''+tdHeads; for (var i = 0, l = axisData.length; i //组装表数据 tdBodys +=series[j].data[i]; } div += left+axisData[i]+' : '+tdBodys+right; tdBodys = ''; } 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 td标签 show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show:true}, dataZoom : { show : true, dataZoom : '区域缩放', dataZoomReset : '区域缩放-后退' } } }, calculable : true, xAxis : [ { type : 'category', data : } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], dataZoom : { show : true, realtime : true, start : 20, end : 80 }, series : [ { name:'(单位：)', //roam: true, type:'line', data: } ] }); } ); //输出base64编码 function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) } $('#startTime').datetimepicker({ lang:'ch',format:'Y-m-d H:i'}); $('#endTime').datetimepicker({ lang:'ch',format:'Y-m-d H:i'});

【本文地址】

公司简介

联系我们