echarts饼图 legend设置使文字过长显示...

最新推荐文章于 2025-05-21 15:31:15 发布

原创最新推荐文章于 2025-05-21 15:31:15 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

JavaScript学习同时被 2 个专栏收录

26 篇文章

订阅专栏

echarts

6 篇文章

订阅专栏

文章讲述了如何使用ECharts库来定制图表的legend组件，包括设置其位置(top,right)，方向(orient:vertical)，触发展示事件(triggerEvent)以及自定义tooltip显示。还特别提到当legend项过长时，如何通过formatter函数进行内容截断。

文字过长导致显示问题

legend: {
  top: '1%',
  right: 'right',
},

将legend添加一些属性

legend: {
  top: '1%',
  right: 'right',
  orient: "vartical",
  triggerEvent: true,
  tooltip: {
    show: true,
    trigger: 'item',//鼠标移动上去展示全称
  },
  formatter: function (params) {
    var val = "";
    if (params.length > 6) {
      val = params.substr(0, 6) + '...';
      return val;
    } else {
      return params;
    }
  }
},

效果