echarts柱状图 hover自定义tips
时间: 2023-08-27 20:13:29 浏览: 205
自定义柱状图
对于 ECharts 柱状图的 hover 自定义 tips,你可以通过使用 ECharts 的 tooltip 配置项来实现。下面是一个简单的示例:
```javascript
// 导入 ECharts
import * as echarts from 'echarts';
// 初始化图表容器
var chartContainer = document.getElementById('chart-container');
var myChart = echarts.init(chartContainer);
// 绘制柱状图
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 阴影指示器,可以在柱状图上显示阴影
},
formatter: function(params) {
// params 是当前鼠标所在柱状图上的数据
var dataIndex = params[0].dataIndex; // 获取当前柱状图的索引
var value = params[0].value; // 获取当前柱状图的值
// 自定义 tooltip 的内容
var tooltipContent = '第' + (dataIndex + 1) + '个柱状图<br/>' + '数值:' + value;
return tooltipContent;
}
},
xAxis: {
type: 'category',
data: ['柱状图1', '柱状图2', '柱状图3', '柱状图4', '柱状图5']
},
yAxis: {
type: 'value'
},
series: [{
data: [100, 200, 150, 300, 250],
type: 'bar'
}]
});
```
在上述示例中,我们通过 formatter 函数来自定义 tooltip 的内容。通过 params 参数可以获取当前柱状图的索引和值,然后根据需要拼接自定义的 tooltip 内容。最后,将配置项传递给 `setOption` 方法来绘制柱状图。
希望这个示例能够帮助到你!如果还有其他问题,请随时提问。
阅读全文