echarts 环状统计图添加 tooltip
时间: 2023-08-08 08:12:14 浏览: 122
echarts的axisLabel添加tooltip功能
5星 · 资源好评率100%
要在Echarts环状统计图中添加tooltip,您可以使用以下代码示例:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置图表选项
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: '55%',
data: [
{value: 30, name: '触发器1'},
{value: 40, name: '触发器2'},
{value: 20, name: '触发器3'}
],
label: {
show: true,
formatter: '{b} : {c} ({d}%)'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
在这个示例中,我们使用Echarts库创建了一个环状统计图。我们通过`tooltip`选项配置了tooltip的触发方式为`item`,并设置了tooltip的显示格式为`{b}: {c} ({d}%)`,其中`{b}`表示数据项的名称,`{c}`表示数据项的值,`{d}`表示数据项的百分比。
然后,在`series`中配置了具体的数据项和标签的显示格式。在`label`中设置了标签的显示方式为`{b} : {c} ({d}%)`,与tooltip的显示格式相同。
最后,使用`myChart.setOption(option)`将配置项应用到图表中,显示图表和tooltip。
请确保将代码中的`chart`替换为您实际使用的HTML元素的ID。
阅读全文