You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Apexcharts折线与面积图仅在网格开启时显示Tooltip的问题求助

Apexcharts折线与面积图仅在网格开启时显示Tooltip的问题求助

大家好,我最近在用vue-apexcharts封装组件做图表时碰到了个头疼的问题,折腾了好几个版本组合(组件试过1.6.x和1.7.0,ApexCharts本体试过4.4.0和4.5.0)都没搞定,想请教下各位大佬!

我已经把图表的视觉样式自定义得差不多了,但现在卡在Tooltip的显示逻辑上:我想要鼠标悬停图表内容时,能弹出那种靠近悬停位置的默认漂亮Tooltip,但完全不想显示任何网格线。

我本来以为只要把配置里的tooltip.enabled设为true就能实现这个效果,可实际操作下来Tooltip根本不出来。后来摸索发现,必须把grid.show设为true,Tooltip才会正常显示。但如果我想隐藏y轴的网格横线,把grid.yaxis.lines.show设为false,Tooltip就又消失了;哪怕只开x轴网格线、关y轴,Tooltip倒是能出来,但又多了我不需要的竖线,还是达不到预期效果。

下面是我传给vue-apexcharts的配置对象(数据做了匿名处理):

series = [
   {
       "name": "my y axis title",
       "data": [
           [
               1659236400000,
               "74.83"
           ],
           [
               1659841200000,
               "83.75"
           ],
           [
               1660446000000,
               "318.74"
           ],
           // ... 省略中间匿名数据
           [
               1665284400000,
               "296.60"
           ],
           [
               1665889200000,
               "200.08"
           ],
           [
               1666494000000,
               "192.09"
           ],
       ]
   }
]

options = {
   "colors": [
       "#9C27B0"
   ],
   "chart": {
       "type": "line",
       "toolbar": {
           "show": false
       },
       "zoom": {
           "enabled": false
       }
   },
   "fill": {
       "colors": [
           "#9C27B0"
       ],
       "opacity": 0.8,
       "type": "solid"
   },
   "grid": { // 要是关了grid或者同时关了两个轴的网格线,Tooltip就不显示了
       "show": true,
       "xaxis": {
           "lines": {
               "show": false
           }
       },
       "yaxis": {
           "lines": {
               "show": true
           }
       }
   },
   "legend": {
       "show": false
   },
   "tooltip": { // 就算删掉整个tooltip配置,只要开着grid,Tooltip还是能正常工作
       "enabled": true,
       "intersect": false
   },
   "annotations": {
       "yaxis": [],
       "xaxis": [],
       "points": []
   },
   "stroke": {
       "width": 2,
       "curve": "straight",
       "lineCap": "round"
   },
   "xaxis": {
       "axisTicks": {
           "show": true
       },
       "labels": {
           "show": true,
           "rotate": 0,
           "hideOverlappingLabels": true
       },
       "convertedCatToNumeric": true
   },
   "yaxis": {
       "max": 700,
       "min": 0,
       "title": {
           "text": "my axis title"
       },
       "labels": {}
   }
}

有没有大佬知道怎么配置才能让Tooltip正常显示,同时完全隐藏所有网格线呀?麻烦指点一下!

备注:内容来源于stack exchange,提问作者Bruno Lamps

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 19:32:59