Echarts && 饼图引导线以及周围文字位置的改变
我们在官网的demo中看到饼图的引导线都是直接对接文字的
但是需求是要把文字放在引导线上方
所以代码应该修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | option:{ tooltip: { trigger: "item" , formatter: "{b}: {c} ({d}%)" , textStyle: { color: "#ffffff" , fontSize: 30 } }, series: [ { name: "" , type: "pie" , radius: [ "30%" , "55%" ], labelLine: { normal: { length: 20, length2: 70, } }, label: { formatter: "{per|{d}%}{b|{b}}\n\n" , borderWidth: 20, borderRadius: 4, padding: [0, -70], rich: { b: { color: "#fff" , fontSize: 12, lineHeight: 33 }, per: { fontSize: 12, padding: [2, 4], borderRadius: 2 } } }, data: [ { value: 500, name: "win8" , itemStyle: { normal: { color: "#02B672" } } }, { value: 42, name: "win10" , itemStyle: { normal: { color: "#0FC2E7" } } }, { value: 175, name: "winXP" , itemStyle: { normal: { color: "#0C6CE8" } } }, { value: 145, name: "macOS" , itemStyle: { normal: { color: "#DF4546" } } }, { value: 342, name: "win7" , itemStyle: { normal: { color: "#F7BB2D" } } } ] } ] } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步