echarts [Bug] line chart 在点击一个legend隐藏对应的折线后,鼠标移到chart上,刚才隐藏掉的折线上的小圆点会显示出来

pn9klfpd  于 2022-12-31  发布在  Echarts
关注(0)|答案(3)|浏览(297)

Version

^5.3.3

No response

Steps to Reproduce

  1. 普通画个折线图,显示legend
  2. 点击legend隐藏某条折线
  3. 鼠标在chart上移动
  4. 刚才隐藏掉的折线上的小圆点显示出来,但折线还是正常隐藏的

Current Behavior

optionData: {
          animation:false,
          title: {
            show: false,
          },
          legend: {
            data: [ 'legned-1','legned-2',],
            show: true,
            type: 'plain',
            top: 'top',
            right: 0,
            orient: 'vertical',
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: 'legned-1',
              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: 'legned-2',
              data: [56, 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

  1. 普通画个折线图,显示legend
  2. 点击legend隐藏某条折线
  3. 鼠标在chart上移动
  4. 刚才隐藏掉的折线上的小圆点也不显示出来。。。

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

vmdwslir

vmdwslir1#

@DetectiveBox It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED

TITLE

[Bug] line chart After clicking on a legend to hide the corresponding polyline, the mouse moves over the chart, and the small dot on the polyline that has just been hidden will be displayed

BODY

Version

^5.3.3

No response

Steps to Reproduce

  1. Ordinarily draw a line chart to display legend
  2. Click on legend to hide a polyline
  3. Move the mouse on the chart
  4. The small dots on the polyline that was hidden just now are displayed, but the polyline is still hidden normally

Current Behavior

optionData: {
animation: false,
title: {
show: false,
},
legend: {
data: [ 'legned-1','legned-2',],
show: true,
type: 'plain',
top: 'top',
right: 0,
orient: 'vertical',
},
tooltip: {},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
name: 'legned-1',
data: [65, 78, 130, 65, 56, 73, 89],
type: 'line',
smooth: true,
itemStyle: {
// color of the polyline
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: 'legned-2',
data: [56, 56, 123, 36, 32, 69, 78],
type: 'line',
smooth: true,
itemStyle: {
// color of the polyline
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

  1. Ordinarily draw a line chart to display legend
  2. Click on legend to hide a polyline
  3. Move the mouse on the chart
  4. The dots on the polyline that were hidden just now are not displayed. . .

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

qybjjes1

qybjjes12#

OK. Got it. Thank you.

enyaitl3

enyaitl33#

把你的options粘贴到echarts在线示例上,按你说的步骤操作,未复现你说的问题。可能是你的代码中有其它逻辑影响到了,建议交互后调用chartInstance.getOptions()方法,将实时的options打印出来帮助定位问题

相关问题