ECharts 柱状图 series 文字加黑加粗
时间: 2025-06-16 11:56:26 浏览: 25
### ECharts 柱状图 Series 文字加黑加粗的实现方法
在 ECharts 中,可以利用 `label.textStyle` 属性来自定义柱状图中 series 数据标签的文字样式。通过设置 `fontWeight` 和 `color` 参数即可实现文字加黑加粗的效果[^2]。
以下是完整的配置示例:
```javascript
let option = {
xAxis: {
type: 'category',
data: ['类别一', '类别二', '类别三']
},
yAxis: {
type: 'value'
},
series: [{
name: '示例数据',
type: 'bar',
data: [120, 200, 150],
label: {
show: true,
position: 'top', // 标签位置可选 top、bottom、inside 等
textStyle: {
color: '#000', // 设置文字颜色为黑色以增强对比度
fontSize: 14, // 字号大小可以根据需求调整
fontWeight: 'bold' // 设置文字加粗
}
}
}]
};
```
#### 配置详解
- **`label.show`**: 控制是否显示数据标签,将其设为 `true` 才能生效。
- **`label.position`**: 定义标签相对于柱子的位置,常见的值有 `'top'`, `'bottom'`, `'inside'` 等[^1]。
- **`textStyle.color`**: 设定文字的颜色,推荐使用深色(如 `'#000'`)以便于突出显示。
- **`textStyle.fontSize`**: 调整字体大小,确保其与整体图表风格协调一致。
- **`textStyle.fontWeight`**: 将此属性设定为 `'bold'` 实现文字加粗效果[^2]。
---
### 注意事项
如果希望进一步提升视觉效果,还可以结合渐变背景或其他样式对整个图表进行美化。例如,在柱子上方添加阴影或者改变柱子本身的配色方案等。
---
阅读全文
相关推荐

















