Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.8k views
in Technique[技术] by (71.8m points)

echarts如何在hover markPoint时显示tooltip?

底下这个是我的配置信息,大家可以在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;
    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);
    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
            ]
          },
        ]
      }
    }
  ]
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...