手记

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人推荐
随时随地看视频
慕课网APP