echarts圆环 emphasis里的label和默认的label重叠在一起了,想hover上去时默认的就不显示,不hover时,就展示默认的
时间: 2024-03-18 07:38:48 浏览: 14
可以通过设置 `emphasis` 下的 `label` 的 `show` 属性为 `false` 来实现hover时默认的不显示,不hover时展示默认的。示例如下:
```javascript
option = {
series: [{
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
type: 'pie',
emphasis: {
label: {
show: false, // 不显示emphasis下的label
formatter: '{b}: {d}%'
}
}
}]
};
```
需要注意的是,因为 `emphasis` 下的 `label` 不显示,所以默认的 `label` 会一直显示,如果默认的 `label` 和 `emphasis` 下的 `label` 位置重叠,可以通过设置 `label` 的 `position` 属性来调整。
相关问题
最新版的echarts圆环 emphasis里的label和默认的label重叠在一起了,想houver上去时默认的就不显示
你可以在 `emphasis` 中设置 `label.show: false` 来禁用 emphasis 下的 label,这样当鼠标悬停在圆环上时,只会显示自定义的 emphasis label,而不会显示默认的 label。
例如:
```js
series: [{
type: 'pie',
data: [...],
label: {
// 默认的 label 样式设置
},
emphasis: {
label: {
show: true,
// emphasis 下的 label 样式设置
}
}
}]
```
最新版的echarts圆环 emphasis里的label和默认的label重叠在一起了
这可能是因为圆环的默认label和emphasis下的label都设置了相同的属性导致的。可以尝试通过设置emphasis下的label的偏移量(offset)或者字体大小(font-size)等属性来解决重叠问题。如果还存在问题,可以考虑使用formatter函数来自定义label的显示内容和样式。另外,也可以将默认的label设置为不可见(visible:false),只保留emphasis下的label。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)