[Bug] [dataZoom]

[Cyearn]

Version

5.2.0+

Link to Minimal Reproduction

No response

Steps to Reproduce

公司旧项目使用的是echart4的库，新项目升级echart后发现图标显示异常，设置dataZoom后错位了,在5.2.0以上版本显示异常

具体代码如下：

option = {
  color: [
    '#0487FF',
    '#FAC858',
    '#3DC545',
    '#46a2ff',
    '#f9655e',
    '#44c5ff',
    '#f97b32',
    '#9a60b4',
    '#ea7ccc'
  ],
  dataZoom: [
    {
      id: 'dataZoomX',
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'filter'
    }
  ],
  legend: {
    data: ['语文'],
    top: '0'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b0}<br />',
    axisPointer: {
      animation: true,
      type: 'line',
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  grid: {
    left: 20,
    top: 38,
    right: 20,
    bottom: 65
  },
  xAxis: {
    type: 'category',
    data: [
      '第1周',
      '第2周',
      '第3周',
      '第4周',
      '第5周',
      '第6周',
      '第7周',
      '第8周',
      '第9周',
      '第10周',
      '第11周',
      '第12周',
      '第13周',
      '第14周',
      '第15周',
      '第16周',
      '第17周',
      '第18周',
      '第19周',
      '第20周',
      '第21周',
      '第22周'
    ],
    boundaryGap: false
  },
  yAxis: {
    type: 'category',
    boundaryGap: false,
    name: '等级',
    data: ['0', 'D', 'C', 'B', 'A'],
    splitLine: {
      show: true
    }
  },
  series: [
    {
      labelLine: { show: true },
      symbolSize: 16,
      type: 'line',
      smooth: true,
      name: '语文',
      data: [
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        'D',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-'
      ]
    }
  ]
};

Current Behavior

缩放组件错位

Expected Behavior

缩放组件正常显示

Environment

- OS:window 10
- Browser: Chrome 98.0.4758.81
- Framework: React

Any additional comments?

No response

[echarts-bot]

@Cyearn 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

BODY

Version

5.2.0+

Link to Minimal Reproduction

No response

Steps to Reproduce

The company's old project uses the echart4 library. After the new project upgrades echart, it is found that the icon is displayed abnormally. After setting the dataZoom, the display is abnormal.

The specific code is as follows:

option = {
  color: [
    '#0487FF',
    '#FAC858',
    '#3DC545',
    '#46a2ff',
    '#f9655e',
    '#44c5ff',
    '#f97b32',
    '#9a60b4',
    '#ea7ccc'
  ],
  dataZoom: [
    {
      id: 'dataZoomX',
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'filter'
    }
  ],
  legend: {
    data: ['language'],
    top: '0'
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b0}<br />',
    axisPointer: {
      animation: true,
      type: 'line',
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  grid: {
    left: 20,
    top: 38,
    right: 20,
    bottom: 65
  },
  xAxis: {
    type: 'category',
    data: [
      'Week 1',
      'Week 2',
      'Week 3',
      'Week 4',
      'Week 5',
      'Week 6',
      'Week 7',
      'Week 8',
      'Week 9',
      'Week 10',
      'Week 11',
      'Week 12',
      'Week 13',
      'Week 14',
      'Week 15',
      'Week 16',
      'Week 17',
      'Week 18',
      'Week 19',
      'Week 20',
      'Week 21',
      'Week 22'
    ],
    boundaryGap: false
  },
  yAxis: {
    type: 'category',
    boundaryGap: false,
    name: 'level',
    data: ['0', 'D', 'C', 'B', 'A'],
    splitLine: {
      show: true
    }
  },
  series: [
    {
      labelLine: { show: true },
      symbolSize: 16,
      type: 'line',
      smooth: true,
      name: 'language',
      data: [
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        'D',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-',
        '-'
      ]
    }
  ]
};

Current Behavior

Scaling component misplaced

Expected Behavior

The zoom component is displayed normally

Environment

- OS:window 10
- Browser: Chrome 98.0.4758.81
- Framework: React

Any additional comments?

No response