ECharts图表组件当图表数据过多增设滚动条与Highcharts图表进行比较这一点还是很不错的。因为ECharts图表组件可以自行控制，而highcharts图表组件是没有这个属性可以设置的，只能够通过设置chart的zoomType来对图表区域进行缩放或者放大。
ECharts图表组件想要给图表添加滚动条进行数据区域的缩放，与toolbox.feature.dataZoom同步，但是这个数据区域缩放只对直角坐标系有用。饼图一类的就不起效！
dataZoom属性节点包含的子属性如下所示：
名称
默认值
描述
{Boolean} show false 是否显示，当show为true时则接管使用指定类目轴的全部系列数据，如不指定则接管全部直角坐标系数据。
{string} orient 'horizontal' 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
{number} x 自适应 水平安放位置，默认为根据grid参数适配，纵向布局默认左侧，可指定 {number}（左上角x坐标，单位px）
{number} y 自适应 垂直安放位置，默认为根据grid参数适配，纵向布局默认下方，可指定 {number}（左上角y坐标，单位px）
{number} width 自适应 | 30 指定宽度，横向布局时默认为根据grid参数适配，纵向布局是默认为30，可指定{number}（宽度，单位px）
{number} height 自适应 | 30 指定高度，纵向布局时默认为根据grid参数适配，横向布局是默认为30，可指定{number}（高度，单位px）
{color}backgroundColor '#eee' 背景颜色
{color}dataBackgroundColor '#ccc' 数据缩略背景颜色
{color} fillerColor 'rgba(50,205,50,0.4)' 选择区域填充颜色
{color} handleColor 'rgba(70,130,180,0.8)' 控制手柄颜色
{Array | number}xAxisIndex null 当不指定时默认控制所有横向类目，可通过数组指定多个需要控制的横向类目坐标轴Index，仅一个时可直接为数字
{Array | number}yAxisIndex null 当不指定时默认控制所有纵向类目，可通过数组指定多个需要控制的纵向类目坐标轴Index，仅一个时可直接为数字
{number} start 0 数据缩放，选择起始比例，默认为0，从首个数据起选择。
{number} end 100 数据缩放，选择结束比例，默认为100（%），到最后一个数据选择结束。
{Boolean} realtime false 缩放变化是否实时显示，建议性能较低的浏览器或数据量巨大时不启动实时效果。
{Boolean} zoomLock false 数据缩放锁，默认为false，当设置为true时选择区域不能伸缩，即(end - start)值保持不变，仅能做数据漫游。
假如我们需要给横坐标X轴加上滚动条，我们需要如何加以配置呢？
1、配置orient的值为水平方向布局，不配置也行，因为默认就是"horizontal";
2、配置show的值为true，表示将滚动条显示出来；
3、可以选择性地设置start和end两个数据缩放起始比例值；
最后简单的示例代码如下所示：
view sourceprint?
01.dataZoom:{
02.orient:"horizontal", //水平显示
03.show:true, //显示滚动条
04.start:20, //起始值为20%
05.end:60 //结束值为60%
06.},
07.xAxis : [
08.{
09.type : 'value',
10.axisLabel : {
11.formatter: '{value} °C'
12.},
13.splitArea : {show : true}
14.}
15.],
效果图如下所示：
如果我们要在y轴上面加上滚动条，则只需要将dataZoom的orient的值设置为：vertical
但是两个轴不能够同时都加滚动条的！
说明：
1、如果不设置start和end则默认情况下滚动条就是占满了整个轴；
2、如果设置zoomLock为true了，则设定的start和end也就是滚动条的长度将会不变更的。只能够进行左右移动了。
有任何问题可以随时留言，多谢你的阅读！
内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024