You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/07/09 09:04:35 UTC
[GitHub] [echarts] TianTiYream opened a new issue #15321: 饼图引导线能否实现末端自定义形状
TianTiYream opened a new issue #15321:
URL: https://github.com/apache/echarts/issues/15321
### What problem does this feature solve?
目前通过一些hack方式实现，但是如果标签位置也需要改变就无法同时实现，请问能否实现饼图引导线末端自定义样式
### What does the proposed API look like?
```js
// 指定图表的配置项和数据
var option = {
title: {
text: ` ${total}`,
subtext: ' 总人数',
x: '36%',
y: '40%',
textStyle: {
fontWeight: 'normal',
fontSize: 18,
color: '#ffffff'
}, // 标题
subtextStyle: {
fontWeight: 'normal',
fontSize: 12,
color: '#ffffff'
} // 副标题
},
color: ['#38cffb', '#259fc3', '#0582a7'],
series: [
{
type: 'pie',
radius: ['30%', '48%'],
left: '-10%',
labelLine: {
length: 15,
length2: '30%'
},
// 设置标签的位置
labelLayout: function (params) {
const dis = params.labelLinePoints[1][0] - params.labelRect.x
const dis2 = params.labelLinePoints[1][0] - params.labelRect.width - params.labelRect.x
const transX = params.labelRect.x < params.rect.x ? dis2 : dis
const transY = params.labelRect.y > params.rect.y ? 16 : -16
return {
dx: transX, // x轴偏移量
dy: transY, // y轴偏移量
width: '100',
align: 'left'
}
},
itemStyle: {
borderColor: '#0e242f',
borderWidth: 2
},
label: {
show: true,
formatter: '{per|{b}{c}人}',
borderColor: '#8C8D8E',
rich: {
per: {
color: '#2cacd1',
fontSize: 14,
fontWeight: 400,
padding: [5, 6],
borderRadius: 4,
backgroundColor: {
image: require('../../../assets/images/bg3.png')
},
dot: {
position: 'absolute',
height: 10,
width: 10,
lineHeight: 10,
marginBottom: 10,
padding: [0, -10],
borderRadius: 10,
backgroundColor: '#fff'
}
}
}
},
center: ['50%', '50%'],
data: [
{ value: off, name: '请假' },
{ value: absent, name: '旷工' },
{ value: present, name: '实到' }
]
}
]
}
```
### 效果
要求效果
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #15321: 饼图引导线能否实现末端自定义形状
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15321:
URL: https://github.com/apache/echarts/issues/15321#issuecomment-877035450
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Ovilia commented on issue #15321: 饼图引导线能否实现末端自定义形状
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #15321:
URL: https://github.com/apache/echarts/issues/15321#issuecomment-877949304
参考：https://www.makeapie.com/editor.html?c=x_16G0DeNm
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org