echarts之legend-改变图例的图标为自定义图片

最新推荐文章于 2025-07-07 10:50:10 发布

huanbia

最新推荐文章于 2025-07-07 10:50:10 发布

阅读量7.5w

点赞数 16

CC 4.0 BY-SA版权

分类专栏： echarts学习笔记文章标签： echarts legend data 图例图标

本文链接：https://blog.youkuaiyun.com/huanbia/article/details/50395328

echarts学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用ECharts自定义图例样式，包括调整图例布局、改变文本样式及使用自定义图标等高级配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

legend是echarts中的图例

名称	类型	默认值	可选值	效果
data	Array	[]		图例内容数组，数组项通常为{string}，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串”可实现手动分行（列）。使用根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。如需个性化图例文字样式，可把数组项改为{Object}，指定文本样式和个性化图例icon

先来一个demo

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:['蒸发量','降水量','最低气温']
    }

效果图如下：
demo

自定义每个图例样式

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸发量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'stack'
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#df3434'
                },
                icon:'pie'
            }
        ]
    }

效果图如下：
自定义每个图例样式

修改图例的图标为自定义图片

首先我找了如下两张图片放在根目录下的images文件夹下
两个icon文件

    legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸发量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'image://./images/icon1.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    icon:'image://./images/icon2.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                },
                icon:'pie'
            }
        ]
    }