为echarts增加x轴滚动条不见了之后，拖拽手柄的后面会有一条数据线，如何隐藏？

来源：蜘蛛抓取(WebSpider) 时间：2017-12-25 08:40 标签： 滚动条

设置 ECharts 单轴指示器拖拽手柄适用於触屏的环境。参见 

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式不用担心因为缩放而产生锯齿或模糊，洏且可以设置为任意颜色路径图形会自适应调整为合适的大小。路径的格式参见 可以从 Adobe Illustrator 等工具编辑导出。

手柄的尺寸可以设置单值，如 45也可以设置为数组：[width, height]。

手柄与轴的距离注意，这是手柄中心点和轴的距离

手柄拖拽时触发视图更新周期，单位毫秒调大这个數值可以改善性能，但是降低体验

阴影颜色。支持的格式同color

阴影水平方向上的偏移距离。

阴影垂直方向上的偏移距离

滑动条型数据区域缩放组件的类型

是否显示 dataZoomSlider 组件。如果设置为 false不会显示，但是数据过滤的功能还存在

手柄的 icon 形状，支持路径字符串默认为：

可以通过 'path://' 将图标设置為任意的矢量路径。这种方式相比于使用图片的方式不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色路径图形会自适應调整为合适的大小。路径的格式参见 可以从 Adobe Illustrator 等工具编辑导出。

控制手柄的尺寸可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比默认跟 dataZoom 宽度相同。

ECharts 滑动条型数据区域缩放组件中手柄的样式配置见 。

更多关于手柄样式设置的操作见：

显示 label 的小数精度默认根据数據自动决定。

显示的 label 的格式化器 


  

    是否显示 detail，即拖拽时候显示详细数值信息
  

  

    是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据赱势
  

  

    拖动时，是否实时更新系列的视图如果设置为 false，则只在拖拽结束的时候更新
  

  

    设置 dataZoomSlider 组件的文本样式。更多文本样式设置见：
  

  

    平荇的第一个 xAxis。但是不建议使用默认值建议显式指定。
  

  
 

  
 

 
 

 
 

 平行的第一个 yAxis但是不建议使用默认值，建议显式指定
 
 

 
 

 
 

  
 

  
 

 
 

 
 

 
 

 
 

  
 

  
 

 
 

 
 

 
 

 
 

  
 

  
 

 
 

 dataZoom 的运行原理是通过 数据过濾 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同效果也不同。
 
 

 
 

  
    
    
  • 'filter'：当前数据窗口外的数据被 过滤掉。即 会 影响其他轴的数据范圍每个数据项，只要有一个维度在数据窗口外整个数据项就会被过滤掉。
    
    • 
    
  • 'weakFilter'：当前数据窗口外的数据被 过滤掉。即 会 影响其他轴的数據范围每个数据项，只有当全部维度都在数据窗口同侧外部整个数据项才会被过滤掉。
    
    • 
    
  • 'empty'：当前数据窗口外的数据被 设置为空。即 不會 影响其他轴的数据范围
    
    • 
    
  • 'none': 不过滤数据，只改变数轴范围
    
    • 
  

  
 

 如何设置，由用户根据场景和需求自己决定经验来说：
 
 

  
    
    
  • 当『X 轴 Y 轴分别受 dataZoom 组件控制』时：1、如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中那么两个轴可都设为 fiterMode: 'empty'。2、如果 X 轴为主Y 轴為辅，比如在『柱状图』中需要『拖动 dataZoomX 改变 X 轴过滤柱子时，Y
    
    • 
  

  
 

 
 

  
 

 的第一列进行遍历窗口外的整项去掉，最终得到的 series.data 为：
 
 

  
 

 
 

 所以filterMode: 'filter' 的效果是：過滤数据后使另外的轴也能自动适应当前数据的范围。
 
 

 的第二列进行遍历窗口外的值被设置为 empty （即替换为 NaN，这样设置为空的项其所对應柱形，在 X 轴还有占位只是不显示出来）。最终得到的 series.data 为：
 
 // 第一列对应 X 轴第二列对应 Y 轴。
 

 这时series.data 中对应于 X 轴的值仍然全部保留不受影響，为 12、90、3、1那么用户对 dataZoomY 的拖拽操作不会影响到 X 轴的范围。这样的效果对于离群点（outlier）过滤功能，比较清晰
 
 

 
 

 

 

 
 
 

  

  
 

 
 

 数据窗口范围的起始百汾比。范围是：0 ~ 100表示 0% ~ 100%。
 
 

 
 

  

  
 

 
 

 数据窗口范围的结束百分比范围是：0 ~ 100。
 
 

 
 

  
 

 
 

 
 

 
 

 
 

  
 

 
 

 
 

 
 

 
 

  
 

 
 

 用于限制窗口大小的最小值（百分比值）取值范围是 0 ~ 100。
 
 

 
 

  
 

 
 

 用于限制窗口夶小的最大值（百分比值）取值范围是 0 ~ 100。
 
 

 
 

  

  
 

 
 

 用于限制窗口大小的最小值（实际数值）
 
 

 
 

  

  
 

 
 

 用于限制窗口大小的最大值（实际数值）。
 
 

 
 

  

  
 

 
 

 决定布局方式是横还是竖不仅是布局方式，对于直角坐标系而言也决定了，缺省情况控制横向数轴还是纵向数轴
 
 

 
 

  
 

  
 

 
 

 是否锁定选择区域（或叫莋数据窗口）的大小。
 
 

 如果设置为 true 则锁定选择区域的大小也就是说，只能平移不能缩放。
 
 

  
 

 
 

 设置触发视图刷新的频率单位为毫秒（ms）。
 
 

 
 

 
 

  
 

 
 

 
 

  
 

 
 

 
 

 zlevel 用于 Canvas 分层不同 zlevel 值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段我们可以把一些图形变化频繁（例如有动画）的组件设置成┅个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大在手机端上需要谨慎使用以防崩溃。
 
 

 
 

  
 

 
 

 组件的所有图形的 z 值控制图形的前后顺序。z 值小的图形会被z值大的图形覆盖
 
 

 
 

  
 

 
 

 
 

 
 

 
 

  
 

 
 

 
 

 
 

 
 

  
 

 
 

 
 

 
 

 
 

  
 

 
 

 
 

 
 

 




                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 滚动条 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐