使用dataZoom控制滚动条处理echart数据过多显示混乱的问题

问题描述

echarts图表的y轴上数据过多,每一行数据高度太短，拥挤在一起，导致图表显示不全。

需求回顾

项目页面【景区销售排行】模块显示前10条数据，点击【查看全部】弹框显示所有数据。

下图为页面中排行模块的样子：

问题解决

1、处理弹框中图表数据过多显示混乱的问题；

2、弹框中初始数据默认和页面一致，10条显示。

如何解决

在使用 ECharts 创建图表时，如果你发现 Y 轴上的数据过多，导致图表显示不全，你可以通过设置滚动条来改善这一情况。ECharts 提供了 dataZoom 组件来实现这一功能，它可以让你在 X 轴或 Y 轴上添加滚动条。可点击查看echart文档 dataZoom 。

具体步骤：

打开到源代码，找到与tooltip,grid,xAxis,yAxis,series,legend等同级的地方，添加如下dataZoom组件参数，

{
    tooltip : {},
    dataZoom : [
        {
            type: "slider",  // slider表示这里的是滑动条型数据区域缩放组件，如果是inside，表示内置型数据区域缩放组件
            yAxisIndex: 0, // 控制y轴滚动对象，[0] 可简写为0
            zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小,如果设置为 `true` 则锁定选择区域的大小，也就是说，只能平移，不能缩放
            width: 10, // dataZoom-slider 组件的宽度。竖直布局默认 30，水平布局默认自适应
            right: 10, // dataZoom-slider组件离容器右侧的距离, 值可以是像 `20` 这样的具体像素值，可以是像 '20%' 这样相对于容器宽度的百分比。
            top: 0, // dataZoom-slider组件离容器上侧的距离。
            bottom: 0, // dataZoom-slider组件离容器底侧的距离。
            startValue: 0, // 数据窗口范围的起始数值, 0代表数组索引值，第1条数据
            endValue: 9, // 数据窗口范围的结束数值, 9代表数组索引值，第10条数据
            handleSize: 0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否显示滚动条两侧的文字，默认为true
        },
    ]
}

修改后，效果如下图：

如果想改变一下echarts图表中滚动条的样式，可以增加一些参数，如下：

{
    series : [],
    dataZoom : [
        {
                type: "slider", // slider表示这里的是滑动条型数据区域缩放组件，如果是inside，表示内置型数据区域缩放组件
                realtime: true, // 拖动时，是否实时更新系列的视图。如果设置为 `false`，则只在拖拽结束的时候更新，默认为true
                startValue: 0, // 数据窗口范围的起始数值, 0代表数组索引值，第1条数据
                endValue: 9, // 数据窗口范围的结束数值, 9代表数组索引值，第10条数据
                width: 10, // dataZoom-slider 组件的宽度。竖直布局默认 30，水平布局默认自适应
                height: "90%", // dataZoom-slider 组件的高度。水平布局默认 30，竖直布局默认自适应。
                top: "5%", // dataZoom-slider组件离容器上侧的距离。
                right: 0,  // dataZoom-slider组件离容器右侧的距离, 值可以是像 `20` 这样的具体像素值，可以是像 '20%' 这样相对于容器宽度的百分比。
                // orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用，建议使用 yAxisIndex 具体指明
                yAxisIndex: [0], // 控制y轴滚动对象，[0] 可简写为0
                fillerColor: "#0093ff", // 滚动条选中范围的填充颜色
                borderColor: "rgba(17, 100, 210, 0.12)",  // 滚动条边框颜色
                backgroundColor: "#cfcfcf", // 滚动组件的背景颜色,及两边未选中的滑动条区域的颜色
                handleSize: 0, // 两边手柄尺寸
                showDataShadow: false, // 是否在 `dataZoom-silder` 组件中显示数据阴影。数据阴影可以简单地反应数据走势。默认auto
                showDetail: false, // 拖拽时是否显示滚动条两侧的文字，默认为true
                zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小,如果设置为 `true` 则锁定选择区域的大小，也就是说，只能平移，不能缩放
                // 移动手柄的样式配置
                moveHandleStyle: {
                  opacity: 0, // 这里opacity设置为0，相当于设置moveHandleSize为0
                },
        }
    ]
}

实现效果如下图：

这里想重点提一下startValue,endValue，我通过这两个值来控制echart图表中可见视野内可展示的数据条数。

从文档中可以看到，我们其实还可以使用start,end来控制数据窗口范围，并且start,end优先级大于startValue和endValue。

start,end表示的是数据窗口范围的起始和结束百分比，是一个百分比数值，number类型，范围是：0 ~ 100。表示 0% ~ 100%。

startValue,endValue表示的是数据窗口范围的起始和结束数值，类型为[number,string,Date],一般设置为number类型的数组索引值即可，同时还可以设置为数组值本身。至于Date类型，不清楚，没去研究，有兴趣的可以自己去发现。

在我的项目中，我最终选择了startValue,endValue 来精确控制显示条数，而不是start,end，虽然后者也能解决拥挤的问题，但是没法精确到条数，导致弹框中的图表显示可能跟页面汇总的不一致，如果没有我这里这样的场景，其实用他们哪一个，就看你自己的意愿了。

题外话

我们在渲染图表X轴或者Y轴上的数据时，如果发现渲染的数据跟实际传的数据顺序相反，可在轴数据设置中增加inverse: true, inverse表示是否是反向坐标轴，默认值为false。

{
    yAxis: [
        {
            inverse: true,
            data: [],
            axisLabel: {}
        }
    ],
    xAxis: [
        {
            inverse: true,
            data: [],
            axisLabel: {}
        }
    ]
}

我们项目中前同事在开发的时候，编写的图表插件中并没有设置inverse: true，他发现渲染的数据都是反的，所以将传入的数据都使用数组的reverse方法倒序排列了一遍，达到了同样的效果。 不过后来我开发弹框页面的时候，这里引出了一个问题，按照我们上面提到的startValue,endValue设置

{
    startValue: 0, // 数据窗口范围的起始数值, 0代表数组索引值，第1条数据
    endValue: 9, // 数据窗口范围的结束数值, 9代表数组索引值，第10条数据
}

刚打开弹框，我们可以看到，图表中滚动条已经到底了，不是我们预想的从顶部开始，就算将startValue,endValue的值反过来设置同样如此。

那该怎么办呢？不绕弯子了，请看下面大屏幕，哦，不对，看下面代码：

{
    startValue: seriesData.length - 10, // seriesData为图表数组数据
    endValue: seriesData.length-1,
}

看到这，大家应该已经明白了吧。好了，不再惹人嫌了，今天就讲到这里，下回再见。