echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] tooltip does not shown when tooltip.trigger is axis in line chart,it is OK while tooltip.trigger is item

Open DetectiveBox opened this issue 2 years ago • 3 comments

Version

^5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

  1. set tooltip.trigger axis
  2. mouse move enter chart
  3. the line shown but tooltip is not shown

Current Behavior

option = { title: { show: false, }, legend: { data: ['百度', '谷歌'], show: true, selectedMode: true, top: 'top', right: 0, orient: 'vertical', }, tooltip: { trigger: 'axis', axisPointer: { type: "line" }, }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', }, series: [ { name: '百度', data: [65, 78, 130, 65, 56, 73, 89], type: 'line', smooth: true, itemStyle: { // 折线的颜色 color: 'rgb(249,120,69,1)', }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(249,120,69,0.8)', }, { offset: 1, color: 'rgba(249,120,69,0.3)', }, ]), }, }, { name: '谷歌', data: [65, 56, 123, 36, 32, 69, 78], type: 'line', smooth: true, itemStyle: { // 折线的颜色 color: 'rgba(58,77,233,1)', }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(58,77,233,0.8)', }, { offset: 1, color: 'rgba(58,77,233,0.3)', }, ]), }, }, ], }

Expected Behavior

option = { title: { show: false, }, legend: { data: ['百度', '谷歌'], show: true, selectedMode: true, top: 'top', right: 0, orient: 'vertical', }, tooltip: { trigger: 'axis', axisPointer: { type: "line" }, }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', }, series: [ { name: '百度', data: [65, 78, 130, 65, 56, 73, 89], type: 'line', smooth: true, itemStyle: { // 折线的颜色 color: 'rgb(249,120,69,1)', }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(249,120,69,0.8)', }, { offset: 1, color: 'rgba(249,120,69,0.3)', }, ]), }, }, { name: '谷歌', data: [65, 56, 123, 36, 32, 69, 78], type: 'line', smooth: true, itemStyle: { // 折线的颜色 color: 'rgba(58,77,233,1)', }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(58,77,233,0.8)', }, { offset: 1, color: 'rgba(58,77,233,0.3)', }, ]), }, }, ], }

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

When I put the option configuration in this https://echarts.apache.org/examples/zh/editor.html?c=line-stack&version=5.3.3, it works OK.

DetectiveBox avatar Aug 10 '22 11:08 DetectiveBox

Same issue, same confused

KiKiYang97 avatar Aug 29 '22 02:08 KiKiYang97

Hi, I fixed in my project. The special thing is that its Vue3 project. I use markRaw to mark an object so that it will never be converted to a proxy. Returns the object itself. import { markRaw } from 'vue'; state.myChart = markRaw(echarts.init(chartDom));

Not sure if it helps

KiKiYang97 avatar Sep 01 '22 03:09 KiKiYang97

Same problem was for me.

@KiKiYang97 big thank you, made my day! 🙏

justice47 avatar Sep 19 '22 12:09 justice47