社区
HTML5
帖子详情
Echarts legend多个显示的问题。
爱知识
2015-07-04 04:51:50
有没有用过Echarts知道在legend过多的时候会与坐标轴重叠,怎样能够使legend显示再往下。
...全文
14789
2
打赏
收藏
Echarts legend多个显示的问题。
有没有用过Echarts知道在legend过多的时候会与坐标轴重叠,怎样能够使legend显示再往下。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用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值就可以了
对
echarts
压缩包进行修改当
legend
过多时可以进行翻页
对
echarts
压缩包进行修改,当
legend
过多时,可以进行翻页
怎么样让
ECharts
从后台获取数据并展示
今天有空,把项目中用到的几个报表图形拿出来分享一下。 主要是饼图和柱状图,结合点击事件获取点击的数据。
echarts
legend
太多换行
显示
及
legend
每个标签文字过长分两行
显示
的间距调整
问题
最近在做大数据相关的东西,用到了
echarts
,然后遇到了有10个
legend
,要分左右
显示
,并且每五个字换行
显示
问题
。 前者很快就解决出来了,后者换行
显示
的话文字挨得很近,怎么办呢,第一反应自己搞不定,那就百度看...
echarts
legend
多图例设置
echarts
legend
多图例设置 实现代码: <div id="main" style="width: 31.25rem;height: 25rem;"></div> <script type="text/javascript"> var myChart =
echarts
.init(document....
echarts
的
legend
显示
不全_vue中的
echarts
的
legend
的
显示
问题
可以把option写在computed里面,option里面的变量可以通过写在method或者watch里,变量变化
eCharts
就会重新渲染以下是我自己的一段代码:computed里面的option:computed: {option () {return {
legend
: {show: true,...
HTML5
39,084
社区成员
5,548
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章