echarts如何在hover markPoint时显示tooltip?

发布于 2022-09-12 13:15:46 字数 4205 浏览 25 评论 0

底下这个是我的配置信息,大家可以在echarts官网的demo中跑一下, 我的需求是在鼠标hover到顶部的markPoint时,显示这个markpoint的一些信息, 查了下配置文档可以将tooltip的trigger改为item,但是因为我的需求就是hover上去显示所有的line的信息,所以只能将tigger设置为axis,但是这样的话tooltip又不显示就很难办。大家有什么好的解决办法吗?谢谢tooltiphttps://echarts.apache.org/examples/zh/editor.html?c=doc-example/candlestick-axisPointer

image.png

option = {
  
  "toolbox": {
    "show": false
  },
  "grid": {
    "show": false,
    "top": 30,
    "left": 30,
    "right": 50,
    "bottom": 40,
    "containLabel": true
  },
  "legend": {
    "show": true,
    "data": [
      {
        "name": "TY",
        "textStyle": {
          "fontSize": 20
        }
      },
    
    ],
    "bottom": 3,
    "type": "scroll"
  },
  "xAxis": [
    {
      "show": true,
      "type": "category",
      "splitLine": {
        "show": false
      },
      "data": [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10
      ],
      "position": "bottom",
      "frequency": null,
      "tableColumnNames": null,
      "axisLabel": {
        "fontSize": 20
      },
      "axisTick": {
        "alignWithLabel": true
      },
      "axisLine": {
        "show": false
      },
      "axisPointer": {
        "show": true,
        "type": "line",
        "label": {
          "show": false
        },
        "lineStyle": {
          "width": 0.5
        }
      }
    }
  ],
  "yAxis": [
    {
      "name": "",
      "nameTextStyle": {
        "fontWeight": "normal",
        "fontSize": 18
      },
      "nameGap": 10,
      "offset": 0,
      "type": "value",
      "axisLabel": {
        "fontSize": 20
      },
      "splitLine": {
        "show": true
      },
      "max": null,
      "axisLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      }
    }
  ],
  "tooltip": {
    "trigger": "axis",
    "backgroundColor": "#fff",
    "borderColor": "transparent",
    "borderWidth": 1.2,
    "textStyle": {
      "color": "#777",
      "fontSize": 12
    },
    "extraCssText": "border-radius: 0;\n    box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);\n    padding: 0.6em;",
    "axisPointer": {
      "type": "shadow",
      "shadowStyle": {
        "color": "rgba(255, 199, 0, 0.1)"
      }
    },
    "confine": true,
    "enterable": true
  },
  "series": [
    {
      "name": "TY",
      "type": "line",
      "smooth": false,
      "yAxisIndex": 0,
      "showSymbol": false,
      "hoverAnimation": true,
      "data": [
        14.2491,
        13.8956,
        13.8267,
        13.6081,
        12.0317,
        10.7968,
        10.7979,
        11.2455,
        11.9428,
        13.0403
      ],
      "symbol": "emptyCircle",
      "lineStyle": {
        "type": "solid"
      },
      "symbolSize": 5
    },
     {
      "name": "LY",
      "type": "line",
      "smooth": false,
      "yAxisIndex": 0,
      "showSymbol": false,
      "hoverAnimation": true,
      "data": [
        12.2491,
        10.8956,
        11.8267,
        12.6081,
        15.0317,
        11.7968,
        12.7979,
        13.2455,
        10.9428,
        15.0403
      ],
      "symbol": "emptyCircle",
      "lineStyle": {
        "type": "solid"
      },
      "symbolSize": 5
    },
    {
      "name": "#",
      "type": "line",
      "smooth": true,
      "yAxisIndex": 0,
      "itemStyle": {
        "normal": {
          "color": "#2f7ed8"
        }
      },
      "showSymbol": false,
      "hoverAnimation": false,
      "data": [
        
      ],
      "symbol": "emptyCircle",
      "lineStyle": {
        "normal": {
          "type": "solid"
        }
      },
      "markPoint": {
        "symbolSize": 25,
        "y": "3%",
        "data": [
          {
            "coord": [
              "1",
              0
            ]
          },
          {
            "coord": [
              "3",
              0
            ]
          },
        ]
      }
    }
  ]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

月隐月明月朦胧 2022-09-19 13:15:46

大佬,你这个问题解决了嘛?怎么解决,

日久见人心 2022-09-19 13:15:46

echarts version>=5.0.1

在markPoint中加tooltip

markPoint: {
  tooltip:{
      trigger:'item',
    },
  ...
}

外部的不影响:

option = {
  tooltip: {
    trigger: 'axis'
  },
  ...
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文