echar设置label位置_echarts 饼状图调节 label和labelLine的位置

本文介绍了如何使用ECharts实现饼状图中label和labelLine的位置调整。通过创建一个透明的饼图并调整其参数,可以达到修改labelLine位置的效果。示例代码展示了具体操作,包括设置背景色、图表标题、提示信息、系列数据等,以及利用指示线调整labelLine长度和颜色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原理

使用一个默认颜色为透明的,并且只显示labelLine的饼状图

然后通过调节这个透明的饼状图 以达到修改labelLine的位置

echarts地址

https://gallery.echartsjs.com/editor.html?c=x6VnXPfxlx

echarts源码:

option = {

backgroundColor: "#03141c",

title: {

text: "84%",

subtext: '完成部门占比',

x: 'center',

y: 'center',

textStyle: {

color: "#fff",

fontSize: 30,

fontWeight: 'normal'

},

subtextStyle: {

color: "rgba(255,255,255,.45)",

fontSize: 14,

fontWeight: 'normal'

}

},

tooltip: {

trigger: 'item',

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

},

legend: {

x: 'center',

y: 'bottom',

data: ['rose3', 'rose5', 'rose6', 'rose7', 'rose8']

},

calculable: true,

series: [

{

type: 'pie',

radius: [80, 120],

center: ['50%', '50%'],

data: [

{

value: 10,

name: '吴际帅\n牛亚莉',

itemStyle: {

color: "transparent"

}

},

{

value: 90,

name: 'rose2',

itemStyle: {

color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{

offset: 0,

color: '#0ce4da'

}, {

offset: 1,

color: '#f6fb08'

}])

},

labelLine: {

show: false,

length: 200,

length2: 100

},

label: {

color: "rgba(255,255,255,.45)",

fontSize: 14,

show: false,

position: 'outside',

formatter: '客户满意度\n{a|52}个',

rich: {

a: {

color: "#fff",

fontSize: 20,

lineHeight: 30

},

}

}

}

]

},

{ // 指示线

// 通过value 的值 调节lableLine的位置

type: 'pie',

radius: [80, 100],

data: [

{

value: 100,

itemStyle: {

color: 'transparent'

}

},

{

value: 50,

itemStyle: {

color: "transparent"

},

labelLine: {

show: true,

length: 2,

length2: 240,

color: 'orange',

lineStyle: {

color: 'orange'

}

},

label: {

color: "rgba(255,255,255,.45)",

fontSize: 14,

position: 'outside',

formatter: '客户满意度\n{a|52}个',

rich: {

a: {

color: "#fff",

fontSize: 20,

lineHeight: 30

},

}

}

}

]

},

{

type: 'pie',

radius: [80, 100],

center: ['50%', '50%'],

data: [{

value: 10,

itemStyle: {

color: '#06d3cd'

},

labelLine: {

show: false

}

},

{

value: 90,

itemStyle: {

color: "transparent"

}

}

]

}

]

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值