页面树结构
转至元数据结尾
转至元数据起始

(示例仅供参考)

问题

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

        

解决方案

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

  {

     "tooltip": {
             "trigger": "axis",
             "axisPointer": {
                "type": "shadow"
                       }
            }
}
            
            
           

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

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

           

           

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

           

          

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

        

    


      

        

//该宏代码以仪表分析为例
//类型:客户端宏   对象: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];
    }
}

       

  • 无标签