Echarts 新认知 地图的label到底怎么居中?
时间: 2024-03-13 09:47:33 浏览: 25
要使Echarts地图上的label居中,可以通过以下步骤实现:
1. 设置文本样式
在Echarts配置项中,设置label的文本样式:
```javascript
series: [{
// ...
label: {
show: true,
textStyle: {
fontSize: 12,
color: '#000',
align: 'center',
verticalAlign: 'middle' // 设置垂直对齐方式为居中
}
}
}]
```
2. 调整文本位置
在Echarts配置项中,通过调整label的位置,使其居中显示:
```javascript
series: [{
// ...
label: {
show: true,
position: 'inside', // 设置文本显示位置为图形内部
formatter: '{b}', // 设置文本内容为数据名称
textStyle: {
fontSize: 12,
color: '#000',
align: 'center',
verticalAlign: 'middle' // 设置垂直对齐方式为居中
}
},
emphasis: {
label: {
show: true
}
},
// ...
}]
```
通过以上设置,即可实现Echarts地图上label的居中显示。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)