Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] mode: 'mobile-browser'，触发饼图的 hover 态，然后再在空白处点击扇形没有回归原始状态 #1538

Closed
kkxxkk2019 opened this issue Nov 17, 2023 · 0 comments · Fixed by #1545
Closed

[Bug] mode: 'mobile-browser'，触发饼图的 hover 态，然后再在空白处点击扇形没有回归原始状态 #1538

kkxxkk2019 opened this issue Nov 17, 2023 · 0 comments · Fixed by #1545
Assignees
@kkxxkk2019
Labels
bug Something isn't working
Milestone
v1.6.6

Comments

@kkxxkk2019
Copy link
Collaborator

Version

latest

Link to Minimal Reproduction

none

Steps to Reproduce

const spec = {
    valueField: 'value',
    type: 'pie',
    categoryField: 'type',
    legends: { visible: true },
    label: { visible: true, position: 'outside', rotate: true },
    title: { text: '饼图' },
    outerRadius: 0.9,
    data: {
      values: [
        { value: '46.60', type: 'oxygen' },
        { value: '27.72', type: 'silicon' },
        { value: '8.13', type: 'aluminum' },
        { value: '5', type: 'iron' },
        { value: '3.63', type: 'calcium' },
        { value: '2.59', type: 'potassium' },
        { value: '3.5', type: 'others' }
      ]
    },
    centerOffset: 2,
    theme: {
      colorScheme: {
        default: {
          dataScheme: [
            {
              maxDomainLength: 15,
              scheme: [
                '#4e83fd',
                '#50cefb',
                '#935af6',
                '#fad355',
                '#f76964',
                '#ffa53d',
                '#82a7fc',
                '#7edafb',
                '#ad82f7',
                '#f7dc82',
                '#f98e8b',
                '#ffba6b',
                '#3370ff',
                '#14c0ff',
                '#7f3bf5',
                '#ffc60a',
                '#f54a45',
                '#ff8800',
                '#bacefd',
                '#b1e8fc',
                '#cdb2fa',
                '#f8e6ab',
                '#fbbfbc',
                '#fed4a4',
                '#245bdb',
                '#049fd7',
                '#6425d0',
                '#dc9b04',
                '#d83931',
                '#de7802'
              ]
            }
          ],
          palette: {
            labelFontColor: '#333333',
            titleFontColor: '#333333',
            axisGridColor: '#d0d3d6',
            axisDomainColor: '#1f2329'
          }
        }
      },
      component: {
        axis: {
          label: {
            style: { fontSize: 11, fill: '#646a73', fontWeight: 'normal', fillOpacity: 1 },
            space: 0,
            visible: true
          },
          domainLine: { visible: true, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1 } },
          grid: { visible: true, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1, lineDash: [4, 4] } },
          tick: { visible: false, tickSize: 4, style: { lineWidth: 1, stroke: '#dee0e3', strokeOpacity: 1 } },
          title: { space: 8, style: { fontSize: 12, fill: '#333333', fontWeight: 'normal', fillOpacity: 1 } }
        },
        discreteLegend: {
          item: {
            label: {
              style: {
                fontSize: 11,
                size: 11,
                fontWeight: 'normal',
                fontStyle: 'normal',
                fill: 'rgba(46, 47, 50, 0.8)',
                maxLineWidth: 400
              },
              state: {
                selected: { fillOpacity: 1 },
                unSelected: { fillOpacity: 0.9 },
                selectedHover: { fillOpacity: 0.7, fill: '#1f2329' },
                unSelectedHover: { fillOpacity: 0.65 }
              }
            },
            visible: true,
            spaceCol: 8,
            spaceRow: 8,
            padding: { left: 4, right: 22, top: 4, bottom: 4 },
            background: {
              visible: true,
              state: {
                selected: { fill: '#fff', fillOpacity: 0 },
                unSelected: { fill: '#fff', fillOpacity: 0 },
                selectedHover: { fill: '#141414', fillOpacity: 0.08 },
                unSelectedHover: { fill: '#141414', fillOpacity: 0.08 }
              }
            },
            shape: { space: 4, style: { size: 8 } }
          },
          pager: {
            textStyle: { fontSize: 11, fill: '#000', lineHeight: 14 },
            padding: { left: 8, right: 8, top: 8, bottom: 0 },
            handler: { style: { size: 8 } }
          },
          maxRow: 1,
          autoPage: true,
          padding: { bottom: 0, left: 12, right: 12, top: 16 },
          maxLengthOnLeftRight: 214,
          orient: 'bottom',
          title: { style: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' } }
        },
        title: {
          textStyle: { fontSize: 14, fill: '#333', fontWeight: 'bold' },
          subtextStyle: { fontSize: 12, fill: '#6F6F6F', fontWeight: 'normal' }
        },
        indicator: { title: { autoLimit: true, autoFit: true }, content: { autoLimit: true, autoFit: true } },
        axisY: {
          label: { space: 10, autoLimit: true },
          domainLine: { visible: false },
          tick: { visible: false, tickSize: 0 }
        },
        axisX: { sampling: false, label: { autoRotate: true, autoHide: true, autoLimit: true } },
        tooltip: {
          panel: {
            border: { width: 1, radius: 3, color: '#DEE0E3' },
            shadow: { color: 'rgba(0, 0, 0, 0)', x: 0, y: 4, blur: 12, spread: 0 },
            padding: { top: 10, left: 10, right: 10, bottom: 10 },
            backgroundColor: '#ffffff'
          },
          spaceRow: 6,
          maxWidth: 400,
          titleLabel: { fontSize: 14, fontColor: '#333', lineHeight: 20, textAlign: 'left' },
          offset: { x: 10, y: 10 },
          shape: { size: 7 },
          keyLabel: { fontSize: 14, fontColor: '#646a73', lineHeight: 18, textAlign: 'left', spacing: 12 },
          valueLabel: { fontSize: 14, fontColor: '#333333', lineHeight: 18, textAlign: 'left', fontWeight: 'bold' }
        },
        colorLegend: {
          horizontal: {
            padding: { left: 0, right: 24, top: 18, bottom: 18 },
            title: {
              visible: false,
              padding: 0,
              textStyle: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' },
              space: 12
            },
            handlerText: { style: { fontSize: 12 } },
            rail: { width: 200, height: 8, style: { fill: 'rgba(0,0,0,0.04)' } }
          },
          vertical: {
            padding: { left: 0, right: 24, top: 18, bottom: 18 },
            title: {
              visible: false,
              padding: 0,
              textStyle: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' },
              space: 12
            },
            handlerText: { style: { fontSize: 12 } },
            rail: { width: 200, height: 8, style: { fill: 'rgba(0,0,0,0.04)' } }
          }
        },
        sizeLegend: {
          horizontal: {
            rail: { width: 200, height: 12, style: { fill: 'rgba(0,0,0,0.04)' } },
            padding: { left: 0, right: 24, top: 18, bottom: 18 },
            title: {
              visible: false,
              padding: 0,
              textStyle: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' },
              space: 12
            },
            handler: { visible: true },
            startText: { style: { fontSize: 12 } },
            endText: { style: { fontSize: 12 } },
            handlerText: { style: { fontSize: 12 } }
          },
          vertical: {
            rail: { width: 12, height: 200, style: { fill: 'rgba(0,0,0,0.04)' } },
            padding: { left: 0, right: 24, top: 18, bottom: 18 },
            title: {
              visible: false,
              padding: 0,
              textStyle: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' },
              space: 12
            },
            handler: { visible: true },
            startText: { style: { fontSize: 12 } },
            endText: { style: { fontSize: 12 } },
            handlerText: { style: { fontSize: 12 } }
          }
        },
        dataZoom: {
          showDetail: 'auto',
          middleHandler: {
            visible: false,
            background: { size: 5, style: { stroke: '#D1D5DA', cornerRadius: 2 } },
            icon: {
              style: {
                size: 8,
                fill: 'white',
                stroke: '#D1D5DA',
                symbolType:
                  'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
                lineWidth: 0.5
              }
            }
          },
          background: { size: 28, style: { fill: '#e6e8eb', lineWidth: 0 } },
          startHandler: { style: { stroke: '#7F899B' } },
          endHandler: { style: { stroke: '#7F899B' } },
          startText: { padding: 8, style: { fontSize: 10, fill: '#6F6F6F' } },
          endText: { padding: 8, style: { fontSize: 10, fill: '#6F6F6F' } },
          selectedBackground: { style: { fill: '#D8E4F7' } },
          dragMask: { style: { fill: '#D9E5F8', stroke: '#AEB8C6', lineWidth: 1 } },
          backgroundChart: {
            area: { style: { stroke: false, fill: '#b2b8c3' } },
            line: { style: { stroke: '#b2b8c3', lineWidth: 1 } }
          },
          selectedBackgroundChart: {
            area: { style: { stroke: false, fill: '#e0e7f6' } },
            line: { style: { stroke: '#e0e7f6', lineWidth: 1 } }
          }
        },
        crosshair: {
          xField: {
            visible: false,
            line: { type: 'rect', visible: true, style: { fill: '#F2F3F5', opacity: 0.6 } },
            label: {
              visible: true,
              style: { fill: '#fff', fontSize: 14 },
              labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
            }
          },
          yField: {
            visible: false,
            line: { type: 'line', visible: true, style: { fill: '#F2F3F5', opacity: 0.6 } },
            label: {
              visible: true,
              style: { fill: '#fff', fontSize: 14 },
              labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
            }
          },
          categoryField: {
            visible: false,
            line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } },
            label: {
              visible: true,
              style: { fill: '#fff', fontSize: 14 },
              labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
            }
          },
          valueField: {
            visible: false,
            line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } },
            label: {
              visible: true,
              style: { fill: '#fff', fontSize: 14 },
              labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
            }
          }
        }
      },
      series: {
        bar: { label: { style: { fontSize: 11 } } },
        area: { label: { style: { fontSize: 11 } } },
        line: { label: { style: { fontSize: 11 } } },
        scatter: { label: { style: { fontSize: 11 } } },
        radar: { label: { style: { fontSize: 11 } } },
        rose: { label: { style: { fontSize: 11 } } },
        pie: { label: { style: { fontSize: 11 } } },
        circularProgress: { label: { style: { fontSize: 11 } } },
        funnel: { label: { style: { fontSize: 11 } }, transformLabel: { style: { fontSize: 11 } } },
        linearProgress: { label: { style: { fontSize: 11 } } }
      },
      padding: { top: 12, right: 12, left: 12, bottom: 0 },
      background: '#fff',
      fontFamily:
        'PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol',
      mark: {
        symbol: {
          state: {
            hover: { fillOpacity: 1, stroke: '#3370ff', lineWidth: 1, strokeOpacity: 1, scaleX: 1.2, scaleY: 1.2 },
            dimension_hover: { fillOpacity: 1, scaleX: 1, scaleY: 1, stroke: '#3370ff', lineWidth: 1, strokeOpacity: 1 }
          }
        },
        rect: {
          state: {
            hover: { fillOpacity: 1, scaleX: 1, scaleY: 1, stroke: '#3370ff', lineWidth: 1, strokeOpacity: 1 },
            dimension_hover: { fillOpacity: 1, scaleX: 1, scaleY: 1, stroke: '#3370ff', lineWidth: 1, strokeOpacity: 1 }
          }
        },
        arc: {
          state: {
            hover: { fillOpacity: 1, scaleX: 1.2, scaleY: 1.2, stroke: '#3370ff', lineWidth: 1, strokeOpacity: 1 }
          }
        }
      }
    }
  };


  const vchart = new VChart(spec, { dom: CONTAINER_ID, mode: 'mobile-browser' });
  vchart.renderAsync();

  // Just for the convenience of console debugging, DO NOT COPY!
  window['vchart'] = vchart;

Current Behavior

image

Expected Behavior

回归原始状态

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@kkxxkk2019 kkxxkk2019 added the bug Something isn't working label Nov 17, 2023
@kkxxkk2019 kkxxkk2019 self-assigned this Nov 17, 2023
@kkxxkk2019 kkxxkk2019 modified the milestones: v1.6.5, v1.6.6 Nov 17, 2023
kkxxkk2019 added a commit that referenced this issue Nov 17, 2023
@kkxxkk2019
fix: is mouse click in empty region, the hover shape should reset, fixed
69935de 
 #1538
@kkxxkk2019 kkxxkk2019 mentioned this issue Nov 17, 2023
Merged
20 tasks
kkxxkk2019 added a commit that referenced this issue Nov 17, 2023
@kkxxkk2019
fix: is mouse click in empty region, the hover shape should reset, fixed
901949c 
 #1538
@github-actions github-actions bot mentioned this issue Nov 17, 2023
Merged
This was referenced Jan 3, 2024
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kkxxkk2019 kkxxkk2019

Labels
bug Something isn't working
Projects
None yet
Milestone
v1.6.6
Development

Successfully merging a pull request may close this issue.

Fix/issue 1538 VisActor/VChart
1 participant
@kkxxkk2019