Echarts图例数据太多实现滚动效果

当我们引入echarts图表,当展示的数据项比较多的时候,尤其是在展示环形图或者是饼状图的时候,当数据项比较多,图例就会堆积到一起,显示的很乱,这时候就需要显示个翻页效果。

下面是图例的设置

		legend: {
            type: 'scroll',            // 设置图例翻页
            icon: 'rect',
            itemWidth: 12,             // 图例图形宽度
            itemHeight: 10,
            orient: 'horizontal',     // 图例横向排布
            data: title,              // title是一个列表,存着图例的数据
            left: 15,				// 图例位置
            bottom: 8,
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            pageIconColor: '#fff',
            pageTextStyle: {
              color: '#fff'
            },
            itemGap: 20
		},

在这里插入图片描述

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐