e-charts legend设置item样式

最新推荐文章于 2024-09-17 07:23:55 发布

Julia_0502

最新推荐文章于 2024-09-17 07:23:55 发布

阅读量1k

点赞数 1

分类专栏： e-charts 文章标签： html 前端 echarts

本文链接：https://blog.youkuaiyun.com/Julia_0502/article/details/121861766

版权

e-charts 专栏收录该内容

2 篇文章

订阅专栏

项目场景：

使用 legend显示不同类型（bar和line）的item样式

需实现的效果图：

在这里插入图片描述

解决方案：

legend以数组的方式分区域显示item
设置方法如下：

legend: [
          {
            // right: 80,
            x: 'right', // 可设定图例在左、右、居中
            y: 'top', // 可设定图例在上、下、居中
            padding: [0, 100, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            data: ['投入数', '产出数'],
            textStyle: {
              color: '#B6CDE9',
              fontSize: '14px',
              fontFamily: 'Source Han Sans CN',
              fontWeight: 400
            },
            itemWidth: 12,
            itemHeight: 12
          },
          {
            x: 'right', // 可设定图例在左、右、居中
            y: 'top', // 可设定图例在上、下、居中
            padding: [0, 30, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            data: ['在制数'],
            textStyle: {
              color: '#B6CDE9',
              fontSize: '14px',
              fontFamily: 'Source Han Sans CN',
              fontWeight: 400
            },
            itemWidth: 20,
            itemHeight: 6
          }
        ],