1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Echarts数据可视化dataZoom 开发全解+完美注释

Echarts数据可视化dataZoom 开发全解+完美注释

时间:2022-01-28 09:18:50

相关推荐

Echarts数据可视化dataZoom 开发全解+完美注释

全栈工程师开发手册 (作者:栾鹏)

Echarts数据可视化开发代码注释全解

Echarts数据可视化开发参数配置全解

6大公共组件详解(点击进入):

title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解

5大坐标系详解(点击进入):

地理坐标系geo详解、grid直角坐标系(xAxis、yAxis)详解、parallel平行坐标系详解、polar极坐标系详解、radar雷达坐标系详解

19种图表类型详解(点击进入,待续):

series-bar柱形图详解、series-effectscatter特效散点图、series-graph关系图、series-heatmap热力图、series-line线图、series-map地图、series-pie饼图、series-radar雷达图、series-scatter散点图

图表行为和图表事件:

action图表行为、event图表事件

Echarts数据可视化dataZoom详解:

dataZoom=[ //区域缩放{id: 'dataZoomX',show:true,//是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色type: 'slider',//slider表示有滑动块的,inside表示内置的dataBackground:{ //数据阴影的样式。lineStyle:mylineStyle, //阴影的线条样式areaStyle:myareaStyle, //阴影的填充样式},fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。borderColor:"#ddd", //边框颜色。filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。//'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。//'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。//'none': 不过滤数据,只改变数轴范围。xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴angleAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴start: 30, //数据窗口范围的起始百分比,表示30%end: 70, //数据窗口范围的结束百分比,表示70%startValue:10, //数据窗口范围的起始数值endValue:100, //数据窗口范围的结束数值。orient:"horizontal",//布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。zoomLock:false,//是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'right:"auto", //组件离容器右侧的距离,'20%'bottom:"auto", //组件离容器下侧的距离,'20%'},{id: 'dataZoomY',type: 'inside',filterMode: 'empty',disabled:false,//是否停止组件的功能。xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴start: 30, //数据窗口范围的起始百分比,表示30%end: 70, //数据窗口范围的结束百分比,表示70%startValue:10, //数据窗口范围的起始数值endValue:100, //数据窗口范围的结束数值。orient:"horizontal",//布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。zoomLock:false,//是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。moveOnMouseMove:true,//如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。}];

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。