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

🍓 作者主页：💖仙女不下凡💖🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line有没有人看不懂箱体图的意义，如果

仙女不下凡

6898人浏览 · 2022-05-31 17:29:06

仙女不下凡 · 2022-05-31 17:29:06 发布

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

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

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章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: {}
}]