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

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

« 前一个 版本 3 下一个 »

(示例仅供参考)

问题:

在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];
    }
}

 

       

  • 无标签