为了账号安全,请及时绑定邮箱和手机立即绑定

echarts踩过的坑

一、echarts外的容器设置了百分比,又遇到了tab切换

echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px,效果如下:

图片描述

计算具体的值,赋给容器div

二、echarts的提示层的内容都是拼接的,还需要把小图例显示出来

图片描述

formatter: (params)=> {

if(params && params.length > 0){

let ftmArr = new Array(), marker;

for(let i = 0, len = params.length; i < len; i++){

marker = params[i].marker.replace(/border-radius:\d+px/, 'border-radius:0px');

ftmArr.push(`${marker} ${params[i].seriesName}:&nbsp;&nbsp;${params[i].value}%<br />`);

}

return ftmArr.join('');

}

}

marker是小图例,console.log出来可以看到他是个span标签,可以随意替换他的样式

三、从新渲染echarts,要先把之前的数据清掉

barBackCarType.clear();

图片描述

四、动态计算高度付给echarts的容器,echarts取不到这个值要resize下echarts

barBackCarType.resize();

五、轴线名称对齐问题

图片描述

方法一:可以用padding负值来跟轴线刻度对齐,但是ie8不兼容

方法二:把轴线名称写在轴线刻度里,无兼容性问题

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消