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/02 05:22:00 UTC

[GitHub] [echarts] dd1994 opened a new issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

dd1994 opened a new issue #15658:
URL: https://github.com/apache/echarts/issues/15658


   ### Version
   5.2.0
   
   ### Steps to reproduce
   将下列代码粘贴到 https://echarts.apache.org/examples/zh/editor.html?c=line-simple , 鼠标 hover 第一个图表的柱子上时即可复现。
   
   ```js
   var dataA = [] ;
   var dataB = [] ;
   var dataC = [] ;
   var dataD = [] ;
   var xAxisData = [
       '香蕉',
       '橘子',
       '猕猴桃',
       '火龙果',
       '橙子',
       '桃子',
       '哈密瓜',
       '西瓜',
       '榴莲',
       '杨桃',
       '梨',
       '葡萄',
       '丑橘',
       '山竹',
   ]
   
   for (var i = 0; i < 14; i++) {
       dataA.push((Math.random() * 1500).toFixed(2))
       dataB.push((Math.random() * 2000).toFixed(2))
       dataC.push((Math.random() * 0.8).toFixed(2))
       dataD.push(-Math.random().toFixed(2))
   }
   
   
   option = {
       animation: false,
       title: {
           left: 'left',
           text: '品类营收分析'
       },
       legend: {
           top: 30,
           data: ['目标总营收', '实际营收','时间进度目标营收', '同比', '环比', '目标完成率']
       },
       tooltip: {
               trigger: 'axis',
               axisPointer: {
                   type: 'cross'
               },
               position: function (pos, params, el, elRect, size) {
                   var obj = {top: 10};
                   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                   return obj;
               }
           },
       axisPointer: {
           link: [{
               xAxisIndex: [0, 1]
           }]
       },
       xAxis: [
           {
           type: 'category',
           data: xAxisData,
           axisTick: {show: false},
           axisLabel:{
               interval:0
               
           },
           axisPointer: {
               type: 'shadow',
               show: true,
               triggerTooltip: false,
               
           }
       }, 
       {
           type: 'category',
           gridIndex: 1,
           data: xAxisData,
           scale: true,
           // boundaryGap : false,
           splitLine: {show: false},
           axisLabel: {show: false},
           axisTick: {show: false},
           axisLine: { lineStyle: { color: '#777' } },
           // splitNumber: 20,
           // min: 'dataMin',
           // max: 'dataMax',
           axisPointer: {
               type: 'shadow',
               label: {show: false},
               triggerTooltip: false,
               handle: {
                   show: true,
                   margin: 30,
                   color: '#B80C00'
               }
           }
       },
       {
           position: 'bottom',// 将分组x轴位置定至底部,不然默认在顶部
           offset: 55,// 向下偏移,使分组文字显示位置不与原x轴重叠
           axisLine: {
              show: true // 隐藏分组x轴的轴线
           },
           axisPointer: {
               show:false,
           },
           axisTick: {
               length: 20, // 延长刻度线做分组线 
               inside: false, // 使刻度线相对轴线在上面与原x轴相接,默认在轴线下方
               lineStyle: {color: 'red'},// 非必须,仅为了演示,明显标示出分组刻度线
               interval: function (index, value) {
                 return index === 0 || index === 4 || index === 10// 在0、5、6处各画一条刻度线
               }
           },
           axisLabel: {
                       inside: true,// 使刻度名称相对轴线在上面与原x轴相接,默认在轴线下方
                       interval: 0,// 强制显示全部刻度名
                       formatter: function (val, index) {
                           return ''
                       }
                   },
           data:xAxisData
       } 
       ],
       yAxis: [
           {
           scale: false,
           splitNumber: 5,
           splitLine: { show: false },
           axisTick: { show: false },
           axisPointer:{
               show:false,
           }
           }, 
           {
           scale: false,
           gridIndex: 1,
           splitNumber: 2,
           axisLabel: {show: false},
           axisLine: {show: false},
           axisTick: {show: false},
           splitLine: {show: false}
       },
       {
            splitNumber: 5,
            min: 0,
            max: 1,
            splitLine: { show: true },
            axisPointer:{
               show:false,
           }
       }
       ],
       grid: [{
           left:50,
           right: 50,
           top: 110,
           height: 120
       }, {
           left: 50,
           right: 50,
           height: 40,
           top: 300
       }],
       series: [
           {
           name: '同比',
           type: 'bar',
           xAxisIndex: 1,
           yAxisIndex: 1,
           barWidth : 15,//柱图宽度
           itemStyle: {
               normal: { 
                   color: '#5CD699',
                   label: {
                       show: true,		//开启显示
                       position: 'top',	//在上方显示
                       textStyle: {	    //数值样式
                       color: 'black',
                       fontSize: 9
                   }
               }
           },
           },
          
          data: dataB
       }, 
        {
           name: '环比',
           type: 'bar',
           barWidth : 15,//柱图宽度
           xAxisIndex: 1,
           yAxisIndex: 1,
           itemStyle: {
                  normal: { 
                   color: '#6189FB',
                   label: {
                       show: true,		//开启显示
                       position: 'top',	//在上方显示
                       textStyle: {	    //数值样式
                       color: 'black',
                       fontSize: 9
                   }
               }
           },
                 
           },
           data: dataA
       }, 
       {
           name: '实际营收',
           type: 'bar',
           data: dataA,
           barWidth : 15,//柱图宽度
           stack: 'money',
           smooth: true,
           showSymbol: false,
           itemStyle: {
               normal: { 
                   color: 'rgb(97,137,251)',
                   label: {
                       show: true,		//开启显示
                       position: 'top',	//在上方显示
                       textStyle: {	    //数值样式
                       color: 'black',
                       fontSize: 9
                   }
               }
           },
           },
       }, {
           name: '目标总营收',
           type: 'bar',
           stack: 'money',
           data: dataB,
            barWidth : 20,//柱图宽度
           smooth: true,
           showSymbol: false,
            itemStyle: { 
                normal: { color: '#D9E2F3',
                label: {
                       show: true,		//开启显示
                       position: 'top',	//在上方显示
                       textStyle: {	    //数值样式
                       color: 'black',
                       fontSize: 9
                   }
               } }
            },
       }, {
           name: '目标完成率',
           type: 'line',
           data: dataC,
           lineWidth:1,
           smooth: true,
           yAxisIndex: 2,
           showSymbol: false,
           itemStyle: {
               normal: { color: 'rgba(255, 169, 0)' }
               },
   
       },
       {
         data: dataB,
         name: '时间进度目标营收',
         symbol: 'rect',
         symbolKeepAspect:true,
         symbolSize: [16,1],
         type: 'scatter',
         itemStyle: {
               normal: { color: '#00A854' }
               },
       }
       ]
   };
   ```
   
   ### What is expected?
   鼠标 hover 时绿色的横杆不会夸张的放大
   
   ### What is actually happening?
   鼠标 hover 时绿色的横杆夸张的放大
   
   <!-- 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] Mobbbb commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   > > > > > 知道原因了,所以关闭了。
   > > > > 
   > > > > 
   > > > > 方便写一下是什么原因吗
   > > > 
   > > > 
   > > > @Mobbbb 类型是scatter的时候 他的缩放默认是true,改为 false 就行了
   > > 
   > > 
   > > 控制缩放的是哪个属性啊,我找半天没找着o(╥﹏╥)o
   > 
   > https://echarts.apache.org/zh/option.html#series-scatter.emphasis 就是这个 scale
   
   多谢,终于干掉这个缩放了!!


-- 
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] dd1994 commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   > > 知道原因了,所以关闭了。
   > 
   > 方便写一下是什么原因吗
   
    @Mobbbb 类型是scatter的时候 他的缩放默认是true,改为 false 就行了


-- 
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] dd1994 commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   ### 截图如下
   
   <img width="216" alt="Screen Shot 2021-09-02 at 13 23 13" src="https://user-images.githubusercontent.com/4121510/131786608-077cbcd9-1176-419a-9745-9590cd26e499.png">


-- 
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] dd1994 commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   > > > > 知道原因了,所以关闭了。
   > > > 
   > > > 
   > > > 方便写一下是什么原因吗
   > > 
   > > 
   > > @Mobbbb 类型是scatter的时候 他的缩放默认是true,改为 false 就行了
   > 
   > 控制缩放的是哪个属性啊,我找半天没找着o(╥﹏╥)o
   
   <https://echarts.apache.org/zh/option.html#series-scatter.emphasis> 就是这个 scale


-- 
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] dd1994 closed issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

Posted by GitBox <gi...@apache.org>.
dd1994 closed issue #15658:
URL: https://github.com/apache/echarts/issues/15658


   


-- 
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 #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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






-- 
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] Mobbbb commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   > > > 知道原因了,所以关闭了。
   > > 
   > > 
   > > 方便写一下是什么原因吗
   > 
   > @Mobbbb 类型是scatter的时候 他的缩放默认是true,改为 false 就行了
   
   控制缩放的是哪个属性啊,我找半天没找着o(╥﹏╥)o


-- 
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] Mobbbb commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   > 知道原因了,所以关闭了。
   
   方便写一下是什么原因吗


-- 
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] dd1994 commented on issue #15658: scatter 图在特定情况下有 bug: 鼠标 hover 时会夸张的放大

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


   知道原因了,所以关闭了。


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