echarts中y轴（yAxis）的参数配置项释义 dataZoom滚动条参数释义

释义 dataZoom滚动条参数释义"/>

echarts中y轴（yAxis）的参数配置项释义 dataZoom滚动条参数释义

echarts中y轴（yAxis）的参数配置项释义 & dataZoom滚动条参数释义

1、yAxis-grid坐标系的y轴

1-y轴刻度调整

 yAxis: {min:0,  //取0为最小刻度max: 100, //取100为最大刻度min:'dataMin', //取最小值为最小刻度max: 'dataMax', //取最大值为最大刻度min: function(value) {//取最小值向下取整为最小刻度return Math.floor(value.min)},max: function(value) {//取最大值向上取整为最大刻度return  Math.ceil(value.max) },scale: true, //自适应minInterval: 0.1, //分割刻度axisLabel:{color:"#58f371",fontSize:13,showMinLabel:false //不显示最小刻度线值showMaxLabel:false //不显示最大刻度线值},axisLine: {lineStyle: {color: "#58f371", //最左侧Y轴颜色}},splitLine: { //多条横线show: false}},

2

yAxis: {show: true,    // 是否显示 y 轴position: 'top',    // y 轴的位置（'top'，'bottom'） type: 'category',    // 坐标轴类型nameLocation: 'end',     // 坐标轴名称显示位置nameGap: 15,     // 坐标轴名称与轴线之间的距离nameRotate: 10,    // 坐标轴名字旋转，角度值inverse: false,    // 是否是反向坐标轴nameTextStyle: {color: '#333',     // 坐标轴名称的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'lineHeight: '50',    // 行高 ）backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'},axisLine: {show: true,    // 是否显示坐标轴轴线symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度lineStyle: {color: '#333',    // 坐标轴线线的颜色width: '5',    // 坐标轴线线宽type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）},},axisTick: {show: true,    // 是否显示坐标轴刻度inside: true,     // 坐标轴刻度是否朝内，默认朝外length: 5,    // 坐标轴刻度的长度lineStyle: {color: '#FFF',     // 刻度线的颜色width: 10,    // 坐标轴刻度线宽type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）},},axisLabel: {show: true,     // 是否显示刻度标签// interval为0时，所有的标签都显示出来， interval表示步长，两个标签之间的间隔。interval:5interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有inside: true,    // 刻度标签是否朝内，默认朝外rotate: 90,    // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度margin: 10,    // 刻度标签与轴线之间的距离// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式color: '#FFF',     // 刻度标签文字的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'lineHeight: '50',    // 行高 ）backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'},splitLine: {show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有color: ['#ccc'],    // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色width: 3,    // 分隔线线宽type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）},splitArea: {show: true,    // 是否显示分隔区域interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有areaStyle: {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色opacity: 1,    // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形},},data: {textStyle: {color: '#FFF',     // 文字的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'lineHeight: '50',    // 行高 ）backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'},},
}

2、dataZoom滚动条参数

dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
现在支持这几种类型的 dataZoom 组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。
由于篇幅原因，本文仅介绍dataZoomInside和dataZoomSlider两种组件。
更多内容请查看：官方链接

<script>var option = {dataZoom: [{id : 'insideX'...},{id : 'sliderX'...}]}
</script>

dataZoom-inside

所谓内置，即内置在坐标系中。
平移：在坐标系中滑动拖拽进行数据区域平移。
缩放：
PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同）
移动端：在移动端触屏上，支持两指滑动缩放。
属性配置详情如下：

 {type: 'inside',//组件类型id: 'insideX',//组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。disabled: false,//是否停止组件功能。//xAxis与yAxis参见gridxAxisIndex: 0,//设置组件控制的x轴，如果是number表示控制一个轴，如果是Array表示控制多个轴。(控制第一个轴)yAxisIndex: [0, 2],//设置组件控制的y轴，如果是number表示控制一个轴，如果是Array表示控制多个轴。(控制第一个和第三个轴)//radiusAxis与angleAxis参见polarradiusAxisIndex: 0,//设置组件控制的radius轴，如果是number表示控制一个轴，如果是Array表示控制多个轴。angleAxisIndex: [0, 1],//设置组件控制的angle轴，如果是number 表示控制一个轴，如果是Array表示控制多个轴。//dataZoom 的运行原理是通过 数据过滤以及在内部设置轴的显示窗口来达到 数据窗口缩放的效果。//'filter'：当前数据窗口外的数据，被过滤掉。即会影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。// 'weakFilter'：当前数据窗口外的数据，被过滤掉。即会影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。// 'empty'：当前数据窗口外的数据，被设置为空。即不会影响其他轴的数据范围。// 'none': 不过滤数据，只改变数轴范围。filterMode: 'filter',start: 0,//数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。end: 100,startValue: 0,//数据窗口范围的起始数值(绝对数值)。如果设置了dataZoom-inside.start 则startValue失效。endValue: 100,minSpan: 0,//用于限制窗口大小的最小值（百分比值），取值范围是0 ~ 100。maxSpan: 100,//如在时间轴上可以设置为：3600 * 24 * 1000 * 5 表示 5 天。在类目轴上可以设置为5表示5个类目。minValueSpan: 5,//用于限制窗口大小的最小值（实际数值）。maxValueSpan: 10,orient: 'horizontal',//布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。zoomLock: true,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。animation: true,//设置动画效果throttle: 100,//设置触发视图刷新的频率。单位为毫秒（ms）。//如果我们手动在 option 中设定了 rangeMode，那么它只在 start 和 startValue 都设置了或者 end 和 endValue 都设置了才有意义。// 所以通常我们没必要在 option 中指定 rangeMode。rangeMode: ['value', 'percent'],//rangeMode: ['value', 'percent']，表示 start 值取绝对数值，end 取百分比。//如何触发缩放。zoomOnMouseWheel: true,// 可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。//如何触发数据窗口平移。moveOnMouseMove: true,//。可选值为：true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标移动不能触发平移。//如何触发数据窗口平移。moveOnMouseWheel: true,//可选值为：true：表示不按任何功能键，鼠标滚轮能触发数据窗口平移。false：表示鼠标滚轮不能触发平移。preventDefaultMouseMove: true//是否阻止 mousemove 事件的默认行为},

dataZoom-slider

滑动条型数据区域缩放组件提供了数据缩略图显示，缩放，刷选，拖拽，点击快速定位等数据筛选的功能。下图显示了该组件可交互部分。

属性配置详情如下：

 {type: 'slider',id : 'sliderX',show: true,//是否显示组件。如果设置为false，不会显示，但是数据过滤的功能还存在backgroundColor: 'rgba(47,69,84,0)',//组件的背景颜色dataBackground: {//数据阴影的样式。lineStyle: {...},//阴影的线条样式areaStyle: {...},//阴影的填充样式},selectedDataBackground: {//选中部分数据阴影的样式lineStyle: {...},//选中部分阴影的线条样式areaStyle: {...},//选中部分阴影的填充样式},fillerColor: 'rgba(167,183,204,0.4)',//选中范围的填充颜色borderColor: '#ddd',//边框颜色。handleIcon:'',//两侧缩放手柄的 icon 形状，支持路径字符串handleSize: '100%',//控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟dataZoom宽度相同handleStyle: {...},//两侧缩放手柄的样式配置moveHandleIcon : '',//移动手柄中间的icon，支持路径字符串moveHandleSize: 7,//移动手柄的尺寸高度moveHandleStyle: {...},//移动手柄的样式配置labelPrecision: 'auto',//显示label的小数精度。默认根据数据自动决定labelFormatter : '',//显示的label的格式化器showDetail: true,//是否显示detail，即拖拽时候显示详细数值信息showDataShadow: 'auto',//是否在 dataZoom-silder组件中显示数据阴影。数据阴影可以简单地反应数据走势realtime: true,//拖动时，是否实时更新系列的视图。如果设置为false，则只在拖拽结束的时候更新。textStyle: {...},//dataZoom文本样式xAxisIndex: 0,yAxisIndex: [0, 2],radiusAxisIndex: 0,angleAxisIndex: [0, 2],filterMode: 'filter',start: 0,end: 100,startValue ...,endValue ...,minSpan ...,maxSpan ...,minValueSpan ...,maxValueSpan ...,orient ...,zoomLock: false,throttle: 100,rangeMode ...,zlevel: 0,//所有图形的zlevel值。zlevel大的Canvas会放在zlevel小的Canvas的上面z: 2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖left: 'auto',//dataZoom-slider组件离容器左侧的距离top: 'auto',//dataZoom-slider组件离容器上侧的距离right: 'auto',//dataZoom-slider组件离容器右侧的距离bottom: 'auto',//dataZoom-slider组件离容器下侧的距离brushSelect: true,//是否开启刷选功能。在下图的brush区域你可以按住鼠标左键后框选出选中部分brushStyle: {...},//刷选框样式设置emphasis: {//高亮样式设置handleStyle: {...},moveHandleStyle: {...}}}