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
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
大佬,你这个问题解决了嘛?怎么解决,
在markPoint中加tooltip
外部的不影响: