echarts 图例翻页+图例自定义样式

设置对应的legend即可:

想要更换的图例图片放在data里面:

 legend: {
          type: 'scroll', // 可滚动翻页的图例
          orient: 'horizontal', //横向
          pageIconColor: '#2C86FF', //翻页箭头颜色
          pageIconInactiveColor: 'rgba(44,132,251,0.40)', //翻页(即翻页到头时箭头的颜色)
          pageIconSize: 10, //翻页按钮大小
          itemWidth: 16,  // 设置宽度
          itemHeight: 16, // 设置高度
          pageTextStyle: {
            color: '#999', //翻页数字颜色
          }, //翻页数字设置
          bottom: 10,
          left: 21,
          data: [
            { name: 'name1', icon: 'image://' + require('@/assets/img/legendIcon1.png') },
            { name: 'name2', },
            { name: 'name3', icon: 'image://' + require('@/assets/img/legendIcon2.png') },
            { name: 'name4', icon: 'image://' + require('@/assets/img/legendIcon3.png') },
            { name: 'name5', icon: 'image://' + require('@/assets/img/legendIcon4.png') },
            { name: 'name6', icon: 'image://' + require('@/assets/img/legendIcon5.png') }],
          textStyle: {
            color: '#fff',
            fontSize: 16,
            padding: [0, 70, 0, 5], // 每一个图例的padding
          },
          padding: [0, 0, 0, 50],   // 整个模块的padding
        },


版权声明:本文为weixin_54106595原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。