echarts 饼图 tooltip样式
时间: 2023-11-11 10:00:10 浏览: 127
要修改 Echarts 饼图的 tooltip 样式,可以通过 tooltip.formatter 和 tooltip.textStyle 两个属性来实现。其中,tooltip.formatter 可以自定义 tooltip 的显示内容,tooltip.textStyle 可以设置 tooltip 的文本样式。
例如,可以通过以下代码来设置 tooltip 的样式:
```
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
textStyle: {
fontSize: 14,
fontWeight: 'bold'
}
},
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: '搜索引擎'}
]
}
]
};
```
在上面的代码中,tooltip.formatter 设置为 '{a} <br/>{b}: {c} ({d}%)',表示 tooltip 显示的内容为“系列名 + 换行 + 数据项名称 + 冒号 + 数据项值 + 左括号 + 百分比 + 右括号”。tooltip.textStyle 设置为 {fontSize: 14, fontWeight: 'bold'},表示 tooltip 的文本样式为字号 14px,加粗。
阅读全文