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不兼容

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