echarts中关于自定义legend图例文字

最新推荐文章于 2024-08-30 14:49:57 发布

、孤独诗人@

最新推荐文章于 2024-08-30 14:49:57 发布

阅读量295

点赞数 3

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_55777517/article/details/141312724

版权

formatter有两种形式：

1.返回值对name直接进行简单的修改，缺点无法自定义多列图列文字样式；
formatter: function (name) {
return 'Legend ' + name;
}

2.想自定义多列图列文字样式，就要用到富文本《rich》，可以对返回值的name进行改造；rich配置项的<rich-name>和formatter的返回值name必须对应<{name|'变量'}>

legend:{
  orient: "horizontal",
  textStyls:{
    overflow: "truncate",
    ellipsls:"...",
    rich:{
      a:{
        fontsize: 16,
        fontFamlly: "microsoftYaHei",
        padding:[6,20,8,18],
        width: 128,
        marginRight: 18
      }
      b:{
        color:"#262626",
        fontsize: 16,
        fontFamlly: "HicrosoftYaH1",
        padding: [0, 10,0,10],
        width: 88,
        marginRight: 30
      }
    },
    formatter: val =>{
      return `{a|${变量}}{b|${变量}}`
    }
}