接到的需求是对大数据分析中的ABTest结果进行可视化绘制。通过这个需求，再次刷新了对ECharts的认识，感觉这个功能强大。图书馆几乎可以做任何事情。先附上一张成品效果图：说说从最初选型到最终确定的过程。需求是显示它的三个区间和每个metric一个中间值，相当于1个纵轴值对应4个横轴值，横轴的值包括三对区间值和一个一定的价值。刚开始找一个叫rangbar的第三方类库来满足部分需求。原因是中间的精确值也取了一个范围，导致最终的显示效果不能完全满足需要，而这个累积类库是收费的。后来选择了ECharts，使用了自定义系列中的Profile，如下：然后，将这些间歇区间取成重叠区间就可以满足需求了，还有一个问题，和rangebar一样的问题，准确的中间值是也是一个范围。后来发现ECharts还有一个配置可以在renderingItem的时候返回一组图形，图形也是自定义的。这样就可以返回三个矩形和一条直线，完美满足要求。以下是数据数据结构。选项配置和renderItem配置：dataSource={categories:[metrics1,metrics2,metrics3],data:[{value:[index,rangeStart1,rangeEnd1,rangeStart2,rangeEnd2,rangeStart3,rangeEnd3,mean],itemStyle:{}},]};option={tooltip:{formatter(params:any){return`${params.marker+params.name}:${params.value[7]}%`;},},dataZoom:[{type:'slider',filterMode:'weakFilter',},],grid:{top:30,},xAxis:{axisLabel:{formatter:'{value}%',},},yAxis:{type:'category',data:dataSource.categories,inverse:true,},series:[{type:'custom',renderItem:renderMetricItem,itemStyle:{opacity:0.8,},编码：{x:[1,2],y:0,},数据:dataSource.data,},],};renderMetricItem(params,api){constchildren=[];constcolors=[RANGE_LEVEL1,RANGE_LEVEL2,RANGE_LEVEL3];constcategoryIndex=api.value(0);constheight=api.size([0,1])[1]*0.5;//置信区间矩形for(leti=0;i<3;i+=1){conststart=api.coord([api.value(i*2+1),categoryIndex]);constend=api.coord([api.value(i*2+2),categoryIndex]);constrectShape=echarts.graphic.clipRectByRect({x:start[0],y:start[1]-height/2,width:end[0]-start[0],height,},{x:params.coordSys.x,y:params.coordSys.y,宽度:params.coordSys.width,高度:params.coordSys.height,},);constitem={type:'rect',transition:['shape'],shape:rectShape,style:{填充:colors[i],},};children.push(item);consts=api.coord([api.value(7),categoryIndex]);children.push({type:'line',shape:{x1:s[0],y1:s[1]-height/2,x2:s[0],y2:s[1]+height/2,},样式:{笔画:RANGE_LEVEL4,lineWidth:5,},});返回{类型：“组”，儿童，};}
