echarts圆环 emphasis里的label和默认的label重叠在一起了,想hover上去时默认的就不显示,不hover时,就展示默认的
时间: 2024-03-18 09:38:48 浏览: 78
可以通过设置 `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重叠在一起了,想不移到legend上去时默认的就不显示,移到legend时,就展示默认的
可以通过设置 `emphasis.label.show` 属性控制 `emphasis` 状态下的 label 显示或隐藏。同时,可以通过设置 `legend.formatter` 属性来控制图例中显示的文本内容。
具体来说,可以在 `series` 中设置 `label` 和 `emphasis.label` 属性,示例如下:
```js
series: [{
type: 'pie',
data: [...],
label: {
show: true,
formatter: '{b}: {c}',
position: 'inside',
textStyle: {
color: '#fff',
fontSize: 14
}
},
emphasis: {
label: {
show: false // emphasis 状态下不显示 label
}
}
}]
```
然后,在 `legend` 中设置 `formatter` 属性,通过 `{a}` 和 `{b}` 分别获取系列名称和数据项名称,示例如下:
```js
legend: {
formatter: '{a}: {b}' // 显示系列名称和数据项名称
}
```
这样就可以实现将默认的 label 显示在图例中,同时在 `emphasis` 状态下不显示 label。
阅读全文