echarts统计x轴区间的数值实例代码详解

有时我们需要统计自定义展示图，统计x轴区间的y轴数量。

思路是利用展示的自定义配置：option.series[i].类型="自定义"中的renderItem(参数，应用编程接口)函数进行处理，这里包括了两个参数：参数是对应每一个属性的数据信息；美国石油学会(美国石油协会)是可调用的方法(api.value()和api.coord())。详情可以查看官方文档。

以下是改自官方实例：https://www.echartsjs.com/examples/editor.html？c=柱状图，把以下引用ecStat.js来处理数据的部分修改成自己拼装成需要的格式

var bins=ecStat。直方图（围长);定义变量最小值=无穷大；var max=-Infinity；edata=echart。乌提尔。地图(bin。数据、函数(项目、索引){ var x0=bin。bin[索引]。x0；var x1=bin。bin[索引]。x1；区间=x1-x0；min=Math.min(min，x0)；max=Math.max(max，x1)；返回[x0，x1，项[1]];});原因是引用ecStat.js处理数据时，有时出现以下错误，暂时没找到解决方法。

改写后的代码显示效果如下：

div id=' main 1 ' style=' width : 1000 px；高度： 500 px '/div脚本类型=' text/JavaScript ' $(function(){ generateChart()；});函数generate chart(){ var my chart 1=echart。init(文档。getelementbyid(' main 1 ')；定义变量围长=[19,26.4,34,41.4,42.4,42.7,42.9,43.1,43.2,43.3,43.3,43.3,44.9,45.4,46.2,46.7,48,48,49.1,54.2];//自定义拼装数据方式var edata=new Array()；var范围最小值=0；var scopeMax=100var区间=(范围最大-范围最小)/10；var tmin=scopeMinwhile(tmin scope max){ var x0=tmin；var x1=tmin区间；var samplenum=0；for(var I=0；igirth . lentigi){ if((scope min==x0围长[i] x0) || (x0=围长[i] x1围长[i]) ||(scopeMin==x1围长[I]x1)){ samplenum；} } tmin=interval data . push([x0，x1，samplenum])；} var option={ color: ['rgb(25，183，207)']，grid: { top: 80，containLabel: true }，xaxis 3360[{ type : ' value '，min: scopeMin，max: scopeMax，interval: interval }]，yaxis 3360[{ type : ' value '，}，]my选项);窗户。onresize=function(){ mychart 1。resize()；} }函数renderItem(参数，API){ var yValue=API。值(2)；var start=API。coord([API。value(0)，yValue])；var size=API。大小([API。值(1)-API。value(0)，yValue])；var style=API。style()；返回{ type: 'rect '，shape: { x: start[0] 1，y: start[1]，width: size[0] - 2，height: size[1] }，style : style }；}/脚本总结

以上所述是小编给大家介绍的展示统计x轴区间的数值实例代码详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！