八、Echart图表之 series盒须图（箱体图）基本使用与配置大全

article/2025/8/26 23:53:20

🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章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/verticalboxWidth: [7, 50],  //box宽度。属性值：number/数组（意思是宽度的上下限：[min, max]）itemStyle: {color: none,  /颜色，参考下面的文章/borderColor: #666,  //写法参考colorborderWidth: 1,borderType: 'solid',borderDashOffset: 0,  //设置虚线偏移量，搭配borderType实现灵活的虚线效果borderCap: 'butt',  //指定线段末端绘制方式，属性值：butt/round/squareborderJoin: 'bevel',  //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略），属性值：bevel/round/miterborderMiterLimit: 10,  //设置斜接面限制比例，只有当borderJoin为miter时才有效shadowBlur: '',  //图形阴影模糊大小。该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果shadowColor: '',  //阴影颜色。支持的格式同colorshadowOffsetX: 0,  //阴影水平方向上的偏移距离shadowOffsetY: 0,  //阴影垂直方向上的偏移距离opacity: 1,  //图形透明度decal: {symbol: 'rect',  //贴花的图案，属性值也可以是数组表示循环使用，circle/rect/roundRect/triangle/diamond/pin/arrow/nonesymbolSize: 1,  //表示占图案区域的百分比，取值范围：0-1symbolKeepAspect: true,  //是否保持图案的长宽比color: '',  /颜色，参考下面的文章/backgroundColor: '',dashArrayX: 5,dashArrayY: 5,rotation: 0,  //图案的整体旋转角度（弧度制）maxTileWidth: 512,  //生成的图案在未重复之前的宽度上限。通常不需要设置该值，当你发现图案在重复的时候出现不连续的接缝时，可以尝试提高该值maxTileHeight: 512}},emphasis: {disabled: false,  //是否关闭高亮状态。默认falsefocus: 'none',  //高亮图形时，是否淡出其它数据图形已达到聚焦的效果。属性值：none/self/seriesblurScope: '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: {}
}]