echartslegend太多,翻页 ECharts例组件配置 翻页按钮

echartslegend太多,翻页

echartslegend太多，翻页是一种常见的解决方案。它可以有效地减少图表中的图例数量，使图表更加简洁、易读。

echartslegend太多，翻页的实现方式有很多，其中最常用的是使用分页控件来实现。分页控件可以将图例分成几个页面，用户可以通过上下翻页来浏览所有的图例。

// 实现 echartslegend 太多, 翻页 
let legend = { 
    type: 'scroll',  // 设置图例为滚动样式 
    pageIconSize: [20, 10], // 设置上一页、下一页的尺寸 
    pageTextStyle: {  // 设置上一页、下一页文字样式 
        color: '#333' 
    }, 
    data: legendData // 图例数据 
};  

此外，也可以使用echarts自带的工具来实现echartslegend太多，翻页功能。Echarts提供了一个名为“dataZoom”的工具，可以将大量数据压缩到一个小区域中，并允许用户通过上下滑动来浏览所有数据。

  
// 实现 echartslegend 太多, 翻页  
let dataZoom = {   // 数据区域缩放  
    type: 'slider',   // 设定为 slider 型数据区域缩放  
    startValue: 0,   // 数据区域开始位置   0% - 100%   0-1之间的小数   整形表示在所有数据中的位序     都是相对于总体而言     故而startValue + endValue <= 1     startValue <= endValue     startValue >= 0     endValue <= 1      都是必要条件      否则会静态不易察觉地出问题      此时不会有明显的bug      并不会马上出闲情冊動作      此时检测代价很大       故而要注意保证startValue + endValue <= 1     startValue <= endValue     startValue >= 0     endValue <= 1      等条件       防止出bug       防止代价过大       防止出闲情冊動作       

    endValue: 1,     // 数据区域开始位置   0% - 100%   0-1之间的小数   整形表示在所有数据中的位序     都是相对于总体而言     故而startValue + endValue <= 1     startValue <= endValue     startValue >= 0     endValue <= 1      都是必要条件      否则会静态不易察觉地出问题      此时不会有明显的bug      并不会马上出闲情冊動作      此时检测代价很大       故而要注意保证startValue + end
ECharts图例组件配置 翻页按钮
legend.pageIconColor   |   string
[ default: '#2f4554' ]
legend.type 为 'scroll' 时有效。
翻页按钮的颜色。
参见 滚动图例（垂直） 或 滚动图例（水平）。
legend.pageIconInactiveColor   |   string
[ default: '#aaa' ]
legend.type 为 'scroll' 时有效。
翻页按钮不激活时（即翻页到头时）的颜色。
参见 滚动图例（垂直） 或 滚动图例（水平）。
legend.pageIconSize   |   number, Array
[ default: 15 ]
legend.type 为 'scroll' 时有效。
翻页按钮的大小。可以是数字，也可以是数组，如 [10, 3]，表示 [宽，高]。
参见 滚动图例（垂直） 或 滚动图例（水平）。
legend.pageTextStyle   |   Object
legend.type 为 'scroll' 时有效。
图例页信息的文字样式。
legend.animation   |   boolean
图例翻页是否使用动画。
legend.animationDurationUpdate   |   number
[ default: 800 ]
图例翻页时的动画时长。