Custom dataZoom slider handle icons have different sizes

yuanyuanlife commented 3 years ago

Version

5.2.0

Steps to reproduce

Try this dataZoom option:

  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 10,
      handleIcon: 'image://https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1',
      handleSize: '100%'
    }
  ],

Or the full option (modified from https://echarts.apache.org/examples/zh/editor.html?c=area-simple), as below:

let base =  new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i  ) {
  var now = new Date((base  = oneDay));
  date.push([now.getFullYear(), now.getMonth()   1, now.getDate()].join('/'));
  data.push(Math.round((Math.random() - 0.5) * 20   data[i - 1]));
}
option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: 'Large Area Chart'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: date
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 10,
      handleIcon: 'image://https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1',
      handleSize: '100%'
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: 'rgb(255, 70, 131)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 158, 68)'
          },
          {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }
        ])
      },
      data: data
    }
  ]
};

What is expected?

Two handle icons have same size.

What is actually happening?

Left handle icon is smaller than right one.

Only apears when handleIcon is start with "image://".

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

echarts-bot[bot] commented 3 years ago

This issue is labeled with priority: high, which means it's a frequently asked problem and we will fix it ASAP.

aMiing commented 3 years ago

遇到了同样的问题，当频繁（两次以上）切换icon的时候，也会出现icon大小变化的问题，希望可以尽快修复，感谢！

This issue is labeled with priority: high, which means it's a frequently asked problem and we will fix it ASAP.

aMiing commented 3 years ago

好像是当handleIcon: image// svg+xml 类型的base64字符串才会触发这个问题，提供个图标用例： data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCA4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPua1heiJsjwvdGl0bGU+CiAgICA8ZyBpZD0i5py65Zmo5a2m5Lmg5bmz5Y+wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5rWF6ImyIj4KICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgZmlsbD0iI0NDRDFEOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjAiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiM5REExQTYiIHg9IjIiIHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaLlpIfku70tMzEiIGZpbGw9IiM5REExQTYiIHg9IjUiIHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=

aMiing commented 3 years ago

好像是当handleIcon: image// svg+xml 类型的base64字符串才会触发这个问题，提供个图标用例： data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCA4IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPua1heiJsjwvdGl0bGU+CiAgICA8ZyBpZD0i5py65Zmo5a2m5Lmg5bmz5Y+wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5rWF6ImyIj4KICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgZmlsbD0iI0NDRDFEOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjgiIGhlaWdodD0iMjAiIHJ4PSIyIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiM5REExQTYiIHg9IjIiIHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaLlpIfku70tMzEiIGZpbGw9IiM5REExQTYiIHg9IjUiIHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=

原因是 imgage的onload事件只触发了一次 https://github.com/apache/echarts/blob/6d68a7dadbd73ff79831d819e014e859f8b2241a/src/util/graphic.ts#L202 我暂时还没看出来为什么会出现这种差异。

fchubu commented 2 years ago

I'm having the same problem.

apache / echarts