ECharts从零开始（五）—— dataZoom & tooltip

这篇博文主要介绍dataZoom以及tooltip。

一、dataZoom

dataZoom组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。现在的dataZoom支持dataZoomInside和dataZoomSlider两种，前者是内置型数据区域缩放组件，内置于坐标系中的；后者是滑动条型数据区域缩放组件，有单独的滑动条，可在滑动条上进行缩放或漫游。

下面所述dataZoom是dataZoomSlider。

• orient
  布局方式，默认为水平布局，可选为：‘horizontal’ | ‘vertical’。

• x&y
  x:水平安放位置，默认为根据grid参数适配，纵向布局默认左侧，可指定number
  y:垂直安放位置，默认为根据grid参数适配，纵向布局默认下方，可指定number

• width&height
  width:指定宽度，横向布局时默认为根据grid参数适配，纵向布局是默认为30
  height:指定高度，横向布局时默认为根据grid参数适配，纵向布局是默认为30

• backgroundColor & dataBackgroundColor & handleColor & fillerColor
  backgroundColor:背景颜色
  dataBackgroundColor:数据缩略背景颜色
  handleColor控制手柄颜色
  fillerColor:选择区域填充颜色
  其中还可以通过handleIcon和handleSize更改手柄形状和大小。handleIcon可以通过image://url设置为图片。

• start & end
  start和end表示数据窗口范围的起始和结束百分比，范围是：0 ~ 100。表示 0% ~ 100%。
  若zoomLock设置为true，则会锁定区域的大小，即每次都只能平移（start-end）的范围。

• realtime
  realtime为拖动时，是否实时更新系列的视图。通过true和false控制开关，默认为true。
  若不想让读者看到实时的数据变化（为false时，拖动后停顿一秒左右显示出更新后的数据），可以把realtime设为false。

二、tooltip

• showContent
  showContent为是否显示提示框浮层，默认显示。
  关闭前：
  
  关闭后：
  
• axisPointer
  axisPointer是配置坐标轴指示器的快捷方式。在其type中有三个值，分别对应开启相关Style。

（1）type:'line'：直线指示器。

axisPointer:{
	lineStyle:{
		color:'pink',
	    width:2,
	    type:'dashed'
	}
}

其中可以在type中改为’solid’、‘dashed’、‘dotted’。

（2）type:'shadow'：阴影指示器

（3）type:'cross'：十字准星指示器。
其实是种简写，表示启用两个正交的轴的 axisPointer。

tooltip: {
        trigger: 'axis',
        axisPointer:{
            type:'cross',
            crossStyle:{
                color:'#555',
                width:1,
                type:'dashed'      //'solid'、'dashed'、'dotted'
            }
        }
    },

相比而言，line和cross更适合于折线图，shadow更适合柱形图。

• trigger
  trigger为触发类型。有item、axis、none三个可选参数。

（1）item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
（2）axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
（3）none：什么都不触发。

• showDelay & transitionDuration & hideDelay

当showContent为true时，在我们查看不同的showContent中的内容时，会觉得有一定的延迟。这是因为showDelay、transitionDuration和hideDelay有一定的初始值。

showDelay为浮层显示的延迟，单位为 ms。
hideDelay为浮层隐藏的延迟，单位为 ms。
transitionDuration为提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。

后面的例如backgroundColor、borderColor等和之前提过的相比没有很明显的区别，就不细说了。

在对dataZoom和tooltip的初步认知中，以上参数比较重要以及常见，而如tooltip中的formmter，可以进行更多的高级修改美化，对于从零开始的来说，可以先不去了解。