ECharts legend添加自定义图标

最新推荐文章于 2025-06-13 10:51:51 发布

原创最新推荐文章于 2025-06-13 10:51:51 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #自定义图标

ECharts 专栏收录该内容

6 篇文章

订阅专栏

本文分享了解决ECharts自定义图标在legend点击后变形问题的经验，通过调整图片尺寸与默认长宽比一致，确保图标显示效果稳定。

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

legend: {
    data:[
    {
        name:'近一周每日',
        icon:'image://../../../static/img/1.png',
    },{
        name:'上一周每日',
        icon:'image://../../../static/img/3.png'
    },{
        name:'近一周每日累计量',
        icon:'image://../../../static/img/7.png'
    },{
        name:'上一周每日累计量',
        icon:'image://../../../static/img/6.png'
    }],
    textStyle: {
        fontSize: 12,
        color: '#fff',
    },
  },

结果如下：

写这个的时候遇到一个很怪的问题，就是我添加的自定义图标，在点击legend后，图标变得和我上传的图片不一致了，后来看api文档，看到echarts对于自定义的icon,会有一个默认的长宽，长25，宽14，而我自定的icon的图片大小不一致，导致我点击后，图片同意变成长25，宽14了，所以大家在切图的时候，要把图片的长宽比例和默认的保持一致。说明下，我切图的时候，将图片的长宽分别设置的是25和14，这样再怎么点击都不会变形了。。。。。