echarts 饼图的label放置于labelLine引导线上方

一般的饼图基础配置后长这样。

想要实现将文本放置在引导线上方,效果长这样

js 复制代码
const options = {
  // ...
  series: [
    {
      label: {
        padding: [0, -40],
      },
      labelLine: {
        length: 10,
        length2: 50,
      },
      labelLayout: {
        verticalAlign: "bottom",
        dy: -10,
      },
    },
  ],
};
  • label.padding设置是关键,它控制文字块的内边距[上,右,下,左],取值根据要展示的文本宽度估算一个数值;
  • labelLine设置引导线的长度,length第一条线、length2第二条线。

以上两种配置完基本可以看到文本与引导线在同一水平位置了

在通过labelLayout 配置标签布局,设置垂直对齐方式verticalAlign: "bottom",然后再调整dyy 方向上的偏移量,调整到合适位置

相关推荐
zhaoyin199421 分钟前
Fiddler弱网实战
前端·测试工具·fiddler
换日线°1 小时前
前端炫酷展开效果
前端·javascript·vue
夏幻灵2 小时前
过来人的经验-前端学习路线
前端
CappuccinoRose3 小时前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router
FFF-X3 小时前
前端字符串模糊匹配实现:精准匹配 + Levenshtein 编辑距离兜底
前端
Hi_kenyon3 小时前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
止观止3 小时前
深入理解 interface vs type:终结之争
前端·typescript
css趣多多3 小时前
vue环境变量
前端
RFCEO3 小时前
前端编程 课程十五、:CSS核心基础3:文字+段落样式
前端·css·文字+段落样式·css文本样式·美化页面文本内容·演示动画说明·单行文字垂直居中技
摇滚侠3 小时前
【程序员入门系列】jQuery 零基础入门到精通!Jquery 选择器 API
前端·javascript·jquery