本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization箱形图是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。
在ECharts中绘制箱形图，只需要将series中的type设置为"boxplot"即可。
另外，series中的数据格式是二维数组，并且二维数组的每一个数据项（每行）用于渲染一个box，包含五个量值，分别对应箱型图中的最小值、下四分位数、中位数、上四分位数、最大值：
1[min, Q1, median (or Q2), Q3, max]
需要注意的是，ECharts 并不内置对原始数据的处理，输入给 boxplot 的数据须是如上五个统计结果量值。
箱型图中的异常值，需要通过添加数据系列的方式单独绘制一个散点图来完成。
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "箱型图",
5 left:"center"
6 },
7
8 tooltip: {},
9
10 // legend: {},
11
12 xAxis: {
13 type: 'category',
14 data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
15 },
16
17 yAxis: {
18 splitArea:{
19 show:true // y轴网格间通过阴影区分显示
20 }
21 },
22
23 // 数据系列
24 series: [{
25 name: "五个统计结果量值",
26 type: "boxplot",
27 data: [
28 [655, 850, 940, 980, 1175],
29 [672.5, 800, 845, 885, 1012.5],
30 [780, 840, 855, 880, 940],
31 [621.25, 767.5, 815, 865, 1011.25],
32 [713.75, 807.5, 810, 870, 963.75]
33 ],
34 }, {
35 name: "异常值",
36 type: "scatter",
37 data: [
38 [0, 650],
39 [2, 620],
40 [2, 720],
41 [2, 950],
42 [2, 970]
43 ]
44 }],
45 };
可视化结果如下图所示：
ECharts数据处理方式：
在ECharts中使用原始数据绘制箱型图时，一般依托于数据集（dataset）完成数据转换（ data transform ）功能来实现。数据转换属于更高一层的操作，后续会专门介绍。
另外，ECharts 也额外提供了简单的 原始数据处理函数，例如可以使用echarts.dataTool.prepareBoxplotData 来进行简单的数据统计。
需要注意的是，需要引入dataTool.js（可在Echarts官方仓库中下载），
1<script type="text/javascript" src="js/dataTool.js"></script>
否则会报如下错误：
1Uncaught TypeError: echarts.dataTool.prepareBoxplotData is not a function at ......
2
代码如下所示：
1 // 通过echarts.dataTool.prepareBoxplotData()方法对原始数据进行预处理
2 var data = echarts.dataTool.prepareBoxplotData([
3 [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
4 [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
5 [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
6 [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
7 [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
8 ]);
9
10 // 设置图表的参数
11 var option = {
12 title: {
13 text: "箱型图",
14 left: "center"
15 },
16
17 tooltip: {},
18
19 // legend: {},
20
21 xAxis: {
22 type: 'category',
23 data: data.axisData, // 使用data处理后的axisData数据
24 axisLabel:{
25 formatter:"类别{value}" // x轴名称模板
26 }
27 },
28
29 yAxis: {
30 splitArea: {
31 show: true // y轴网格间通过阴影区分显示
32 }
33 },
34
35 // 数据系列
36 series: [{
37 name: "五个统计结果量值",
38 type: "boxplot",
39 data:data.boxData, // 使用data处理后的boxData数据
40 }, {
41 name: "异常值",
42 type: "scatter",
43 data:data.outliers // 使用data处理后的outliers数据
44 }],
45 };
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
