You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/09/24 10:33:42 UTC

[GitHub] [echarts] yuanyuanlife opened a new issue #15780: Custom dataZoom slider handle icons have different sizes

yuanyuanlife opened a new issue #15780:
URL: https://github.com/apache/echarts/issues/15780


   ### Version
   5.2.0
   
   ### Steps to reproduce
   Try this dataZoom option:
   
   ```javascript
     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:
   
   ```javascript
   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.
   
   ![image](https://user-images.githubusercontent.com/2127129/134660889-6f9b8a67-a06e-4569-a3f7-251945495369.png)
   
   ---
   Only apears when handleIcon is start with "image://".
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on issue #15780: Custom dataZoom slider handle icons have different sizes

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15780:
URL: https://github.com/apache/echarts/issues/15780#issuecomment-926522963


   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](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) 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](https://echarts.apache.org/en/maillist.html).
   
   Have a nice day! 🍵


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] aMiing commented on issue #15780: Custom dataZoom slider handle icons have different sizes

Posted by GitBox <gi...@apache.org>.
aMiing commented on issue #15780:
URL: https://github.com/apache/echarts/issues/15780#issuecomment-962787137


   > 好像是当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
   我暂时还没看出来为什么会出现这种差异。


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] aMiing commented on issue #15780: Custom dataZoom slider handle icons have different sizes

Posted by GitBox <gi...@apache.org>.
aMiing commented on issue #15780:
URL: https://github.com/apache/echarts/issues/15780#issuecomment-962786330


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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] aMiing commented on issue #15780: Custom dataZoom slider handle icons have different sizes

Posted by GitBox <gi...@apache.org>.
aMiing commented on issue #15780:
URL: https://github.com/apache/echarts/issues/15780#issuecomment-960445595


   遇到了同样的问题,当频繁(两次以上)切换icon的时候,也会出现icon大小变化的问题,希望可以尽快修复,感谢!
   
   > This issue is labeled with `priority: high`, which means it's a frequently asked problem and we will fix it ASAP.
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on issue #15780: Custom dataZoom slider handle icons have different sizes

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15780:
URL: https://github.com/apache/echarts/issues/15780#issuecomment-927242929


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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] fchubu commented on issue #15780: Custom dataZoom slider handle icons have different sizes

Posted by GitBox <gi...@apache.org>.
fchubu commented on issue #15780:
URL: https://github.com/apache/echarts/issues/15780#issuecomment-1077708892


   I'm having the same problem.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org