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

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

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

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章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同一系列中的所有数据都是用