echarts 柱状图双轴 tooltip 怎么去掉 x 轴
时间: 2023-06-16 20:06:27 浏览: 119
echarts图表柱状图折线图动态轮播tooltip窗
5星 · 资源好评率100%
可以通过设置 tooltip 的 formatter 函数来控制 tooltip 的显示内容。具体实现方法如下:
```javascript
option = {
// 设置 x 轴和两个 y 轴的数据
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: [
{
type: 'value',
name: '数量',
min: 0,
max: 100,
position: 'left'
},
{
type: 'value',
name: '百分比',
min: 0,
max: 100,
position: 'right',
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '数量',
type: 'bar',
data: [10, 20, 30, 40, 50]
},
{
name: '百分比',
type: 'line',
yAxisIndex: 1,
data: [50, 60, 70, 80, 90]
}
],
// 设置 tooltip
tooltip: {
trigger: 'axis',
formatter: function(params) {
// 只显示第二个 y 轴的数据
return params[1].name + '<br/>' + params[1].seriesName + ': ' + params[1].value + '%';
}
}
};
```
在 formatter 函数中,我们只显示第二个 y 轴的数据,即百分比。这样就可以去掉 x 轴的显示了。
阅读全文