柱状图数据过长实现滚轴+点击某一条数据

柱状图数据过长实现滚轴的方法

    1.项目需求:当数据量过大时,页面展示起来会很拥挤,此时我们需要一个滚轴,可以让用户进行鼠标滚轮滑动的展示

    2.此时我们用到了Echarts中的dataZoom属性，这个属性主要用于区域缩放的功能

    3.上代码:var option = {dataZoom: [{type: "slider",//slider表示有滑动块的，inside表示内置的show: true,//是否开启start: 1,//起始百分比 即10% 数值为百分比形式end: 40,//结束百分比 即40%  数值为百分比形式},{type: "inside",startValue: 1, //从第几条开始 即1 绝对数值形式endValue: 40,//从第几条开始 即40 绝对数值形式},]};

柱状图内置inside元素可以被点击的效果

dataZoom可以帮助我们解决鼠标滚轮滑动的效果,但是只有滑动没有点击,对我们的用户也是一个不太友好的体验,所以我们需要给内置inside元素设置一个点击事件,完成效果

 myCharts.on('click',  (params)=>{console.log(params)myCharts.dispatchAction({type: 'dataZoom',startValue: this.echartsNameList[Math.max(params.dataIndex - this.zoomSize / 2, 0)],endValue: this.echartsNameList[Math.min(params.dataIndex + this.zoomSize / 2, this.echartsNumList.length - 1)]});});

    分析步骤：1.myCharts为我们要控制的画布对象2.可以打印一下params是什么 它为这个我们当前画布的对象集合3.我们通过Echarts内部的dispatchAction方法进行添加属性4.添加一个dataZoom的属性,并向属性内部设置区域的偏移5.echartsNameList为我们自定义的数组6.zoomSize为我们自定义的数量

柱状图数据过长实现滚轴+点击某一条数据相关推荐

不影响数据库运行如何快速恢复刚删除的表及其数据（二）如何恢复刚才删除的一条数据...
不影响数据库运行如何快速恢复刚删除的表及其数据(二) 如何恢复刚才删除的一条数据比如执行了delete from emp where ename='FORD';如何恢复刚刚删除的记录. 执行如下语句 ...
php mysql 插入多条数据_雷林鹏分享：PHP MySQL 插入多条数据
使用 MySQLi 和 PDO 向 MySQL 插入多条数据 mysqli_multi_query() 函数可用来执行多条SQL语句. 以下实例向 "MyGuests" 表添加了三 ...
mysql分组取出每组地一条数据_MYSQL实现分组排序并取组内第一条数据
一.需要实现分组排序并且取组内状态优先级最高的数据有一张这样的数据表, 需求是根据error_type分组然后取status最小的第一条数据第一种写法: select t.* from ( sel ...
mysql表数据量太大，达到了1亿多条数据，除了分库分表之外，还有没有其他的解决方式？
你这是上亿元的问题,horizontal scaling 岂能是几句就说清楚的? 几个问题要考虑数据的不同数据中心的同步问题,冗余问题, 个数据节点的cap三角问题.数据量一大必须拆分, 不然索引太 ...
mysql随机取5条数据_【转】mysql实现随机获取几条数据的方法
sql语句有几种写法 1:SELECT * FROM tablename ORDER BY RAND() LIMIT 想要获取的数据条数: 2:SELECT *FROM `table` WHERE i ...
全国行政区划数据——五级（省市区县乡镇村），74万条数据
用了将近2周的时间,整理了全国五级行政区划数据(省市区县乡镇村),稍后回在下方提供下载地址,记得关注.点赞哦!! 下载地址:https://download.csdn.net/download/jat ...
2022年风力发电预测数据集（100多w条数据信息（间隔10min），9多w条数据信息（间隔15min），含数据集来源及详细说明）
风电预测(WPF)旨在准确估计风电场在不同时间尺度上的风能供应.风电是一种清洁安全的可再生能源,但不能持续生产,导致高波动性.这种可变性可能对将风力发电并入电网系统提出重大挑战.为了保持发电和消费之间 ...
ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件...
本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...
[转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件...
作者:李盼(Lipan) 出处:[Lipan] (http://www.cnblogs.com/lipan/) 版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其 ...

柱状图数据过长实现滚轴+点击某一条数据

柱状图数据过长实现滚轴的方法

柱状图内置inside元素可以被点击的效果

dataZoom可以帮助我们解决鼠标滚轮滑动的效果,但是只有滑动没有点击,对我们的用户也是一个不太友好的体验,所以我们需要给内置inside元素设置一个点击事件,完成效果

柱状图数据过长实现滚轴+点击某一条数据相关推荐

最新文章

热门文章