echarts饼图取消鼠标小手的样式
时间: 2023-10-29 15:54:33 浏览: 36
要取消echarts饼图中鼠标小手的样式,可以通过修改代码和复写CSS样式来实现。
首先,在代码中修改饼图的cursor属性为'default',如下所示:
```
series: [
{
....
type: 'pie',
label: {
normal: {
show: true,
position: 'center',
....
fontSize: '12'
}
},
labelLayout: {
dy: this.title.indexOf('\n') > -1 ? 2 : 0
},
cursor: 'default' // 取消鼠标小手样式
}
]
```
这样,鼠标移入饼图时将显示默认的鼠标样式。
然而,这种修改只影响到饼图本身,而不会取消鼠标小手样式在饼图内文字上的显示。为了取消鼠标小手样式在中间文字上的显示,可以通过复写CSS样式来实现。例如,可以设置鼠标经过整个饼图盒子时的样式为默认样式,如下所示:
```
.pie-chart {
div > div > canvas {
cursor: default;
}
}
```
这样,鼠标在饼图内任何位置移动时都将显示默认的鼠标样式,从而取消了鼠标小手的样式。
相关问题
echarts饼图设置鼠标悬停图表放大
以下是设置鼠标悬停图表放大的echarts饼图代码示例:
```javascript
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
// 设置鼠标悬停图表放大
option.series.forEach(function (item) {
item.hoverAnimation = false;
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上述代码中,我们通过设置 `hoverAnimation` 属性为 `false` 来禁用鼠标悬停时的放大效果。同时,我们还可以通过设置 `radius` 属性来调整饼图的大小。
echarts饼图取消描边效果
你可以通过设置 `itemStyle` 中的 `borderWidth` 属性为 0 来取消饼图的描边效果,例如:
```javascript
option = {
series: [
{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: {
borderWidth: 0, // 取消描边效果
}
}
]
};
```
这样设置后,饼图将没有描边效果。