echarts图例legend数据过多的时候分页显示&鼠标滚动显示
1.echarts图例设置分页滚动 type: 'scroll' 示例如下：
legend: [{
data:[],
tooltip: {
show: true,
textStyle: {
color: "#cecece",
fontSize:14 // 设置图例文字大小
},
position: 'right' ,
backgroundColor: 'rgba(100, 100, 100, 0.8)', // 设置背景颜色为白色，透明度为0.8
borderColor: 'gray', // 设置边框颜色为灰色
},
formatter: function (name) {
return name.length > 12 ? name.substring(0, 12) + '...' : name;
},
orient: 'vertical',
type: 'scroll', // 设置图例类型为滚动类型 :分页滚动
pageIconColor: '#cecece', // 滚动图标颜色
pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
pageTextStyle: { // 图例页信息的文字样式
color: '#cbcbcb'
},
pageIconSize: 14, // 滚动图标大小
right: '3%',
top: 'center',
height: '75%',
itemWidth: 9,
itemHeight: 9,
itemGap: 6,
borderRadius: 15,
icon: 'circle',
textStyle: {
color: '#cecece',
fontSize: 14 // 设置图例文字大小
}
}],
2. echarts图例设置分页滚动的基础上，设置鼠标滚轮滚动：
<template><div :id="id" class="ecahrtStyle" @wheel='wheelDIV'></div> </template>
methods :
wheelDIV: debounce(function (e) {// 绑定鼠标滚轮事件 ,前提需要设置 legend: [{ data:[]]值if ( this.chart && this.chart.getOption().legend[0].data.length && this.isWheelLegendData) {e.preventDefault();const delta = e.deltaY > 0 ? 1 : -1; // 滚动方向var legend0 = this.chart.getOption().legend[0]const currentIndex = legend0.scrollDataIndex || 0;let newIndex = currentIndex + delta * 6 <0 ? legend0.data.length: currentIndex + delta * 6 // 步长设为 6newIndex = newIndex >= legend0.data.length ?0: newIndexthis.chart.setOption({legend: { scrollDataIndex: newIndex }});},
