通常，直方图会表示的应用场景是：当x等于某个值时，y等于多少？也就是一对一的关系，比如EChart官网展示的例子。现在，对分组中的item有一个要求：用直方图表示区间内有多少数据，如下图（渲染完成）。例如：有一个数组，0.001到0002之间的数据个数为598。需要解决的问题如下：1、如何在刻度正下方显示X轴数据，而不是显示在刻度之间。2、如何格式化X轴数据，例如：显示“>0.013”试错解决方法：设置boundaryGap为false。此时X轴数据显示在刻度正下方，但是Y轴数据也会错位（未找到解决方法）。结果如下图。最终解决方案：1.使用min/max/interval生成X轴。EChart会自动为你生成[min,max]之间的数据点。EChart官网解释：使用interval配合min,max强行设置刻度划分。axisLabel下可以设置不显示X轴的最大值，即“>0.013”后，不需要显示最后一个值，即设置showMaxLabel为false。也可以通过编写formatter函数自定义X轴，可以解决第二个问题。具体代码如下：xAxis:[{min:begin,max:_.round(end+interval,3),interval:interval,name:"(ms)",type:'value',splitLine:false,axisLabel:{showMaxLabel:false,formatter:function(value,index){if(index===histogram.length-1){return'>'+value;}返回值；}}}],2.使用自定义系列绘制条形图。具体代码如下：series:[{name:'height',type:'custom',renderItem:this.renderHistogramItem,label:{show:true,position:'top'},encode:{//代表维度0和1的数据会对应X轴，维度2对应Y轴和标签。x:[0,1],y:2,label:2},data:histogram,tooltip:{formatter:function(params){letcount=params.value[2],percent=params.value[3];return`
Count:${count}
Percent:${percent}%
`}}}]上面代码的核心是renderHistogramItem函数。在渲染阶段，对于series.data中的每一个数据项（这里为了描述方便，简称为dataItem），都会调用renderItem函数。这个renderItem函数的职责是返回一个（或一组）图形元素定义，包括图形元素的类型、位置、大小、样式等。echarts会根据这些图形元素定义来渲染图形元素。renderItem函数提供了两个参数：params：包含当前数据信息（如seriesIndex、dataIndex等）和坐标系信息（如坐标系边界框的位置和大小）。api：是一些开发者可以调用的方法的集合（比如api.value(),api.coord()）。renderItem函数必须返回根据这个dataItem绘制的图形元素的定义信息，见renderItem.return。renderHistogramItem函数如下：renderHistogramItem:function(params,api){letyValue=api.value(2);让start=api.coord([api.value(0),yValue]);letsize=api.size([api.value(1)-api.value(0),yValue]);让样式=api.style();return{type:'rect',shape:{x:start[0]+1,y:start[1],width:size[0]-2,height:size[1]},style:风格};}3.非等距X轴的解决方案在此基础上，组内item新增一个要求：允许用户自定义X轴。这样会有一个问题：X轴不是等距的，X轴不能再用min/max/interval来生成了。解决方案：使用格式化程序功能。继续使用min/max/interval生成想要的X轴长度，在生成barChart的函数中传入X轴数据组，使用index获取真正需要渲染的数据。具体代码如下：xAxis:[{min:data[0],//使用原始索引max:_.round(data[13]+interval,3),interval:interval,name:"(ms)",type:'value',splitLine:false,axisLabel:{showMaxLabel:false,formatter:function(value,index){if(index===histogram.length-1){return'>'+xAxis[index];}返回xAxis[索引];}}}]，更多详情：https://blog.csdn.net/WuLex/a...
