You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2019/06/17 03:33:57 UTC

[GitHub] [incubator-echarts] Gamehu opened a new issue #10685: 柱状图点击以后实现,shadow的效果

Gamehu opened a new issue #10685: 柱状图点击以后实现,shadow的效果
URL: https://github.com/apache/incubator-echarts/issues/10685
 
 
   ### Version
   4.2.1
   
   ### Steps to reproduce
   app.title = '坐标轴刻度与标签对齐';
   
   option = {
       color: ['#3398DB'],
       tooltip : {
           trigger: 'axis',
           axisPointer : {            // 坐标轴指示器,坐标轴触发有效
               type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
           }
       },
       grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
       },
       xAxis : [
           {
               type : 'category',
               data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
               axisTick: {
                   alignWithLabel: true
               }
           }
       ],
       yAxis : [
           {
               type : 'value'
           }
       ],
       series : [
           {
               name:'直接访问',
               type:'bar',
               barWidth: '60%',
               data:[10, 52, 200, 334, 390, 330, 220],
                //该处为点击事件
                   itemStyle:{
                           normal: {
                               color: function(params) {
                                   var key = params.name.replace(/<\/?. ?>/g,"").replace(/[\r\n]/g, "");
                                   if(key  == value){
                                       return "#FE8463";
                                   }else{
                                       return "#4ABACE";
                                   }
                               }
                           }
                       }
           },
          
       ]
   };
   
     myChart.on('click', function eConfig(param){
                   value=param.name;
                   let option = myChart.getOption();
                   myChart.dispatchAction({
   type: 'showTip'
   })
                 
                   myChart.setOption(option, true);
                   myChart.resize()
     });
   
   ### What is expected?
   期望点击之后,点击所在的柱状图出现shadow,跟tooltip的axisPointer type=shadow效果一样,
   
   ### What is actually happening?
   没有出现
   
   ---
   目的是为了,当某个柱状图的值特别小时,无法通过肉眼判断是否选中了柱状图,所以想通过添加shadow的形式,告诉客户,选中了改柱状图
   
   <!-- This issue is generated by echarts-issue-helper. 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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

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