echarts 饼图的tooltip
时间: 2024-08-11 08:01:13 浏览: 48
echarts饼图扇区添加点击事件的实例
ECharts是一个强大的JavaScript图表库,它的饼图(Pie Chart)支持丰富的交互功能,其中Tooltip就是关键组件之一。Tooltip是鼠标悬停在图表上时显示的一个信息框,它通常会显示当前选中数据点的详细信息,如百分比、名称和数值等。
在ECharts的饼图中设置Tooltip的步骤如下:
1. 创建饼图实例并配置选项:
```javascript
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
tooltip: { // 设置tooltip
trigger: 'item', // 触发模式,可以是'item'(单个数据点)、'axis'(坐标轴)或'default'(默认)
formatter: function (params) { // 自定义展示内容
return params.name + '<br/>值:' + params.value + '%';
}
},
series: [
{
type: 'pie',
data: [...], // 饼图的数据数组
name: '我的饼图'
}
]
};
myChart.setOption(option);
```
2. `trigger` 属性指定了当鼠标移动到哪一部分触发 Tooltip 显示,`formatter` 属性则用于定制显示的内容格式。
阅读全文