Echarts legend多个显示的问题。

爱知识 2015-07-04 04:51:50
有没有用过Echarts知道在legend过多的时候会与坐标轴重叠,怎样能够使legend显示再往下。
...全文
14787 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
meihuocc 2017-12-12
  • 打赏
  • 举报
回复
我是把图例放在在上边,根据图例的数据计算了图例大概会占几行的位置,代码如下: //多条趋势图动态设置grid的高度 function setAutoTop(panel,data){ if($scope.panels[panel].auto_grid_top){ var canvas_width=$("#"+panel).width(); var canvas_height=$("#"+panel).height(); //$("#"+panel).get(0).getElementsByTagName("canvas")[0].width var canvas = document.getElementById('test'); var canvas=$("#"+panel).get(0).getElementsByTagName("canvas")[0]; var ctx=canvas.getContext('2d'); ctx.font="12px sans-serif"; var rowNum = 1; if(data.legend && data.legend.data.length>0){ var all_width=0; angular.forEach(data.legend.data,function(value,key){ all_width+=ctx.measureText(value).width+41; console.log(ctx.measureText(value).width) }) rowNum=Math.ceil(all_width/canvas_width); data.grid={}; if(rowNum>1){ data.grid.top=20*rowNum + 50; }else{ data.grid.top=70; } } } var panel_height = canvas_height + (rowNum-1)*30; $("#"+panel).css({ height: panel_height + 'px' }); return data; } panel是 id,data是数据,图的数据
卡卡小苑 2015-07-17
  • 打赏
  • 举报
回复
最近也遇到这样的问题。如果legend还会增多,建议自己写,可以参考http://runjs.cn/detail/t5yya82p。如果不怎多修改grid的y2值就可以了

39,083

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧