echarts
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
Version
^5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
- set tooltip.trigger axis
- mouse move enter chart
- 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.
Same issue, same confused
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
Same problem was for me.
@KiKiYang97 big thank you, made my day! 🙏