综述:SF项目中,大量使用百度地图API和echarts数据可视化相关内容,但是在渲染全国区级网点时,遇到了下面的问题
1.echarts的特性
- 丰富的数据可视化类型
- 多种数据格式无需转换直接使用
- 千万的数据前端展示(websocket和数据分块加载)
- 移动端优化
- 多渲染方案,跨平台使用
2.echarts存在的问题
var boundary = new BMap.Boundary();
boundary.get(cntArea,function(rs){
if(rs.boundaries!=undefined){
//console.log(cntArea,rs.boundaries,rs.boundaries.length);
if(rs.boundaries.length>1){
for (var i = 0; i < rs.boundaries[0].length; i++){
var fillColor="green"; //根据件量选择填充颜色
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, fillColor:fillColor,strokeOpacity:0.3,strokeColor:"#ff6600"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
}
}else{
for (var i = 0; i < rs.boundaries.length; i++){
var fillColor="green"; //根据件量选择填充颜色
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, fillColor:fillColor,strokeOpacity:0.3,strokeColor:"#ff6600"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
}
}
}
在大批量的全国区域渲染时,及re.boundaries的长度很长时,如果一个一个渲染会造成渲染缓慢,如果将大数组拆成小数据时,会出现百度地图偶尔无法正确返回区域的经纬度数据的问题。