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

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

孜然卷k

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

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts JavaScript学习文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/M_E_i/article/details/128905228

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

26 篇文章

订阅专栏

echarts

6 篇文章

订阅专栏

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

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

文字过长导致显示问题

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;
    }
  }
},

效果