页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(示例仅供参考)

...

问题

在echarts柱形图中若存在一些数据相差巨大,会导致无法快速点击数据量小的柱子进行下钻。

        

解决方案:

...

解决方案

         当柱子展示图形过小,鼠标移上去无法正常显示数据,若此时只想实现鼠标移上去展示柱子数据,可通过增加以下扩展属性实现:


代码块
  
   
{


    

...

 "tooltip": {

...


          

...

   "trigger": "axis",

...


         

...

    

...

"axisPointer": {

...


                

...

"type": "shadow"

...


                      

...

                        }
 }
            }
}


            
            
           

          若还需要点击柱子跳转,可参考以下方案实现:

          1.在数据集增加多一个指标字段,修改原来柱图为堆积柱图,如下图:

           

           

           2.增加扩展属性,将上方柱子隐藏,如下图

           

          

        3.最后通过添加宏代码,将辅助的指标字段标签隐藏,设置效果如下:

        

    


        

        

代码块
languagejs
linenumberstrue
//该宏代码以仪表分析为例
//类型:客户端宏   对象:chart  事件:beforeRenderer
 
function main(chartView) {
    var chart = chartView.getChartObject();
    var options = chart.getOptions();
    var tooltip = options.tooltip;
    tooltip.formatter = function(arg){
        return arg[0].name+"<br\>" +arg[0].seriesName+": "+arg[0].value[1];
    }
}