一起来玩echarts系列（一）------箱线图的分析与绘制

⼀起来玩echarts系列（⼀）------箱线图的分析与绘制
#⼀、箱线图 Box-plot
箱线图⼀般被⽤作显⽰数据分散情况。

具体是计算⼀组数据的`中位数`、`25%分位数`、`75%分位数`、`上边界`、`下边界`，来将数据从⼤到⼩排列，直观展⽰数据整体的分布情况。

 ⼤部分正常数据在箱体中，上下边界之外的就是异常数据了。

上下边界的计算公式是：
UpperLimit=Q3+1.5IQR=75%分位数+（75%分位数-25%分位数）1.5
LowerLimit=Q1－1.5IQR=25%分位数-（75%分位数-25%分位数）1.5
参数说明：
1.Q1表⽰下四分位数，即25%分位数；Q3为上四分位数，即75%分位数；IQR表⽰上下四分位差，系数1.5是⼀种经过⼤量分析和经验积累起来的标准，⼀般情况下
不做调整。

2.分位数的参数可根据具体预警结果调整：25%和75%，是⽐较灵敏的条件，在这种条件下，多达25%的数据可以变得任意远⽽不会很⼤地扰动四分位。

具体业务中
可结合拟合结果⾃⾏调整为其他分位
使⽤echarts时，这些计算通过调⽤echarts.dataTool.prepareBoxplotData()来完成。

说到这⾥，有⼀个预警，绘制箱线图除了要下载echart.js之外，还需要引⼊dataTool.js，否则浏览器会报错：Uncaught TypeError: Cannot read property 'prepareBoxplotData' of undefined(…)。

dataTool.js可以到上下载。

#⼆、echarts箱线图⽰例
echart官⽹给出的**[箱线图⽰例](/demo.html#boxplot-light-velocity)**有两种。

⼀种是单值对应（样本元素有⼀组对应的值数据）：
另⼀种是多值对应（样本元素有多个对应的值数据）：
#三、数据结构分析
###1.单值对应
单值对应的数据结构⽐较简单，⼀个样本信息的数据存储到对应的⼀个数组⾥，这些数组⼜存储在⼀个⼤数组⾥。

然后⽤echarts.dataTool.prepareBoxplotData()处理这个⼤数组。

2.多值对应
举⼀个栗⼦：线上地址在
两种性别的三种基因含量表。

（数据纯虚构）
那要提供什么样的数据才能使⽤echart⽣成对应的箱线图？
再来看⼀下echart官⽹给出栗⼦数据，是通过三个for循环随机⽣成的。

data = [];
for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
var seriesData = [];
for (var i = 0; i < 18; i++) {
var cate = [];
for (var j = 0; j < 100; j++) {
cate.push(Math.random() * 200);
}
seriesData.push(cate);
}
data.push(echarts.dataTool.prepareBoxplotData(seriesData));
}
通过在控制台console.log(data),console.log(seriesData),console.log(cate),
可以看出外层的循环是echarts.dataTool.prepareBoxplotData()执⾏的次数=5，可以理解为每个样本有5类元素。

内部的循环表⽰有18个样本，⼀类元素的样本数据有100条。

所以要实现的性别基因表的数据结构应该是：
弄清楚数据结构剩下的绘图操作就是按部就班了，完整代码我已提交到。

over。