(示例仅供参考)
问题
在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]; } }