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 方向上的偏移量,调整到合适位置

相关推荐
excel2 小时前
应用程序协议注册的原理与示例
前端·后端
我是天龙_绍5 小时前
浏览器指纹,一个挺实用的知识点
前端
theshy5 小时前
前端自制接口抓取工具:一键收集并导出接口列表
前端
wayne2145 小时前
跨平台开发框架全景分析:Flutter、RN、KMM 与腾讯 Kuikly 谁更值得选择?
前端
LuckySusu5 小时前
【js篇】JavaScript 对象创建的 6 种方式:从基础到高级
前端·javascript
LuckySusu5 小时前
【js篇】async/await 的五大核心优势:让异步代码像同步一样清晰
前端·javascript
艾雅法拉拉5 小时前
JS知识点回顾(1)
前端·javascript·面试
LuckySusu5 小时前
【js篇】Promise 解决了什么问题?—— 彻底告别“回调地狱”
前端·javascript
程序员海军5 小时前
如何让AI真正理解你的需求
前端·后端·aigc
passer9815 小时前
基于Vue的场景解决
前端·vue.js