echarts饼图线条指引文字
时间: 2023-07-08 21:37:49 浏览: 109
在 ECharts 中,可以通过设置饼图的 `labelLine` 属性中的 `label` 字段来实现饼图线条指引上的文字显示。
例如,可以通过以下代码设置饼图线条指引上的文字:
```javascript
option = {
series: [
{
type: 'pie',
radius: [30, 110],
label: {
show: true,
formatter: '{b}: {d}%'
},
labelLine: {
show: true,
length: 10,
length2: 20,
lineStyle: {
color: '#999'
},
label: {
show: true,
position: 'inner',
formatter: '{b}'
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
```
在上面的代码中,通过设置 `labelLine` 属性中的 `label` 字段的 `formatter` 属性,可以将饼图线条指引上的文字显示为 `{b}: {d}%` 格式,其中 `{b}` 表示数据项的名称,`{d}` 表示数据项的占比。同时,可以通过设置 `label` 字段中的 `show` 属性为 `true`,来显示饼图线条指引上的文字;通过设置 `position` 属性为 `inner`,来将文字显示在饼图内部。
阅读全文