饼图加引导线_echart 饼图引导线数据文字能不能放在引导线的上方?

这篇博客探讨了如何在ECharts饼图中添加引导线,并询问是否可以将数据文字放置在引导线的上方。示例代码展示了如何配置tooltip、legend和series,特别是饼图的labelLine和label属性,以实现特定的样式和格式效果。
摘要由CSDN通过智能技术生成

根据@随机 的例子调整了下,先放效果图:

代码:

app.title = '嵌套环形图';

option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

show: false,

x: 'left',

data: ['视频广告', '百度', '谷歌', '必应', '其他']

},

series: [

{

name: '访问来源',

type: 'pie',

radius: ['30%', '55%'],

labelLine: {

normal: {

length: 20,

length2: 70,

lineStyle: {

color: '#333'

}

}

},

label: {

normal: {

formatter: '{b|{b}}{a|{d}%}\n\n',

borderWidth: 20,

borderRadius: 4,

// shadowBlur:3,

// shadowOffsetX: 2,

// shadowOffsetY: 2,

// shadowColor: '#999',

padding: [0, -70],

rich: {

a: {

color: '#333',

fontSize: 12,

lineHeight: 20

},

b: {

fontSize: 12,

lineHeight: 20,

color: '#333'

}

}

}

},

data: [{

value: 135,

name: '视频广告'

}, {

value: 1048,

name: '百度'

}, {

value: 251,

name: '谷歌'

}, {

value: 147,

name: '必应'

}, {

value: 102,

name: '其他'

}]

}

]

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值