在echarts中label: { show: true, position: 'center', formatter: '{b}: {c} ({d}%)',}各字段含义,范例有哪些
时间: 2024-10-13 07:13:33 浏览: 12
数据可视化Echarts学习(2):柱图任务进度完成比例图属性练习柱图堆叠
在ECharts 中,`label` 配置项用于自定义图表数据点、区域或其他元素上的标签显示。当你设置 `label: { show: true, position: 'center', formatter: '{b}: {c} ({d}%)' }` 时,它的各个字段含义如下:
1. **show**: 显示与否,如果设为 `true`,则标签将被显示;如果设为 `false` 或省略,则标签默认隐藏。例如:
```javascript
label: {
show: false // 标签关闭
}
```
2. **position**: 定义标签的位置。在示例中 `'center'` 表示标签位于数据点中心。其他可能的值有 `'top'`, `'bottom'`, `'left'`, `'right'`, `'inside'`, `'outside'`, `'topLeft'`, `'topRight'`, `'bottomLeft'`, 和 `'bottomRight'` 等。例子:
```javascript
position: 'top' // 标签放在顶部
```
3. **formatter**: 字符串模板引擎,用来格式化要显示的数据内容。这里的 `{b}` 表示系列名(category name),`{c}` 表示数值数据,`{d}%` 表示百分比数据。你可以根据实际需求定制模板,如 `'{a} {b}: {c}({d}%)'`。示例:
```javascript
formatter: function(params) {
return params.name + ': ' + params.value + ' (' + (params.percent + '%)' ); // 自定义格式
}
```
阅读全文