echarts饼状图文字太长显示不全的问题

最新推荐文章于 2025-04-19 19:42:29 发布

原创最新推荐文章于 2025-04-19 19:42:29 发布 · 849 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

12 篇文章

订阅专栏

方案一

缩小饼图

方案二

换行显示

关键代码

label: {
          formatter: function (v: any) { //换行显示
            let text = v.data.name + v.data.value;
            return (text = `${text.slice(0, 4)}\n${text.slice(4, 8)}\n${text.slice(8, 12)}\n${text.slice(12, 16)}\n${text.slice(16)}`);
          },
        },

全部代码如下：

    series: [
      {
        name: '',
        type: 'pie',
        radius: '42%', //调整饼状图大小
        minAngle: '15',
        align: 'left',
        label: {
          formatter: function (v: any) { //换行显示
            let text = v.data.name + v.data.value;
            return (text = `${text.slice(0, 4)}\n${text.slice(4, 8)}\n${text.slice(8, 12)}\n${text.slice(12, 16)}\n${text.slice(16)}`);
          },
        },
        data: result,
        emphasis: { //点击饼状图的时候样式
          label: {
            show: true,
            fontSize: '14',
          },
        },
      },
    ],