echarts图label限定字数，多余字数显示...

原创于 2019-10-03 16:43:00 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #label #...

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在使用ECharts时对过长文本进行省略的方法，通过自定义formatter来实现当文本超过四个字符时显示省略号。此外，还提到了更多关于formatter的强大功能，供读者进一步探索。

完成效果图

在这里插入图片描述

代码区域

label: {
 show: true,
   position: 'center',
   textStyle: {
       color: "#f00"
   },
  formatter: function (param) {
   let name = param.name,
          percent = param.percent;
      if(name.length<=4){
        return '{name|' + name + '} ';
      }else {
        name = name.slice(0,4) + '...';
        return '{name|' + name + '} ';
      }
  },
},

解释说明

好久没做echarts了,很多东西都忘了，最近做了个echarts的修改，多余4个字就出现“…”，然后想起echarts的 formatter属性挺有趣的，所以就发了这篇文章，还有更强大的功能以后有机会再更新下。首先formatter方法会自带个参数，具体数据可以将内容打印出来看下，其中name是我们需要的值，然后进行简单的js就取出了我们要的数据就完成了。