echarts icon indicating copy to clipboard operation
echarts copied to clipboard

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

Open DetectiveBox opened this issue 2 years ago • 4 comments

Version

^5.3.3

Link to Minimal Reproduction

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

DetectiveBox avatar Aug 10 '22 09:08 DetectiveBox

@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

Link to Minimal Reproduction

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

echarts-bot[bot] avatar Aug 10 '22 09:08 echarts-bot[bot]

OK. Got it. Thank you.

DetectiveBox avatar Aug 10 '22 10:08 DetectiveBox

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

anyanyan07 avatar Aug 22 '22 07:08 anyanyan07