Mikel
来源： 八、Echart图表 之 series盒须图（箱体图）基本使用与配置大全_echarts 盒须图-CSDN博客
🍓 作者主页：💖仙女不下凡💖
🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！
🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！
🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line
✨箱体图含义：1.箱子的中间一条线，是数据的中位数，代表了样本数据的平均水平。
2.箱子的上下限，分别是数据的上四位数和下四分位数，这意味着箱子包含了50%的数据，因此箱子的宽度在一定程度上反应了数据的波动程度。
3.在箱子的上方和下方，又各有一条线，有时候代表着最大最小值，有时候会有一些点“冒出去”。请千万不要纠结，理解成“异常值”就好。
✨盒须图（箱体图）的基本使用：我看了一下网上了一些案例全部都是用dataSet映射处理的数据，看的不太明白，下面我就使用series.data处理数据绘制简单的箱体图，如下图
itemStyle：盒须图样式
itemStyle.decal：图形的贴花图案
emphasis：盒须图高亮样式
blur：淡出时的图形样式和标签样式
select：数据选中时的图形样式和标签样式
data：数据
markPoint：图表标注
markLine：图表标线
markArea：图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告
universalTransition：全局过渡动画相关的配置
tooltip：本系列特定的 tooltip 设定
💕 盒须图（箱体图）还有很多配置属性，具体使用请参考一下内容
series: [{
type: ‘boxplot’, //这个配置表示显示的是箱体图
id: ”,
coordinateSystem: ‘cartesian2d’, //该系列使用的坐标系。使用二维的直角坐标系，通过xAxisIndex, yAxisIndex指定相应的坐标轴组件
xAxisIndex: 0, //使用的 x 轴的index，在单个图表实例中存在多个 x 轴的时候有用
xAxisIndex: 0, //使用的 x 轴的index，在单个图表实例中存在多个 x 轴的时候有用
name: ”, //系列名称，用于tooltip的显示，legend的图例筛选
colorBy: ‘series’, //从调色盘option.color中取色策略。series同一系列中的所有数据都是用相同的颜色/data每个数据项都使用不同的颜色
legendHoverLink: true, //是否启用图例hover时的联动高亮
hoverAnimation: true, //是否开启hover在box上的动画效果
layout: ‘horizontal’, //布局方式，属性值：horizontal/vertical
boxWidth: [7, 50], //box宽度。属性值：number/数组（意思是宽度的上下限：[min, max]）
itemStyle: {
color: none, /颜色，参考下面的文章/
borderColor: #666, //写法参考color
borderWidth: 1,
borderType: ‘solid’,
borderDashOffset: 0, //设置虚线偏移量，搭配borderType实现灵活的虚线效果
borderCap: ‘butt’, //指定线段末端绘制方式，属性值：butt/round/square
borderJoin: ‘bevel’, //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略），属性值：bevel/round/miter
borderMiterLimit: 10, //设置斜接面限制比例，只有当borderJoin为miter时才有效
shadowBlur: ”, //图形阴影模糊大小。该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: ”, //阴影颜色。支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1, //图形透明度
decal: {
symbol: ‘rect’, //贴花的图案，属性值也可以是数组表示循环使用，circle/rect/roundRect/triangle/diamond/pin/arrow/none
symbolSize: 1, //表示占图案区域的百分比，取值范围：0-1
symbolKeepAspect: true, //是否保持图案的长宽比
color: ”, /颜色，参考下面的文章/
backgroundColor: ”,
dashArrayX: 5,
dashArrayY: 5,
rotation: 0, //图案的整体旋转角度（弧度制）
maxTileWidth: 512, //生成的图案在未重复之前的宽度上限。通常不需要设置该值，当你发现图案在重复的时候出现不连续的接缝时，可以尝试提高该值
maxTileHeight: 512
}
},
emphasis: {
disabled: false, //是否关闭高亮状态。默认false
focus: ‘none’, //高亮图形时，是否淡出其它数据图形已达到聚焦的效果。属性值：none/self/series
blurScope: ‘coordinateSystem’, //在开启focus时，可以通过blurScope配置淡出的范围
itemStyle: {} //图形样式，参考上面itemStyle配置，但是没有itemStyle.decal
},
blur: {
itemStyle: {} //图形样式，参考上面itemStyle配置，但是没有itemStyle.decal
},
select: {
disabled: false, //是否可以被选中。默认false,在开启selectedMode时有效，可用于关闭部分数据
itemStyle: {} //图形样式，参考上面itemStyle配置，但是没有itemStyle.decal
},
selectedMode: []/{}, //选中模式的配置
dimensions: ”, //使用dimensions定义series.data或者dataset.source的每个维度的信息。
encode: ”, //可以定义 data 的哪个维度被编码成什么
dataGroupId: ”, //可以定义 data 的哪个维度被编码成什么
data: [],
markPoint: {},
markLine: {},
markArea: {},
clip: type,
z: 2,
silent: false,
animationDuration: 800,
animationEasing: elasticOut,
animationDelay: 0,
universalTransition: {},
tooltip: {}
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
👉推荐相关文章：Echart图表 之 基本使用及配置项
👉推荐相关文章：Echart图表 之 title配置项大全
👉推荐相关文章：Echart图表 之 颜色color配置项大全
👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全
👉推荐相关文章：Echart图表 之 legend图例组件配置项大全
👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全
👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全
————————————————
版权声明：本文为CSDN博主「仙女不下凡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_55181759/article/details/124819828
