八、Echart图表 之 series盒须图（箱体图）基本使用与配置大全 |
您所在的位置：网站首页 › echarts坐标轴名称修改 › 八、Echart图表 之 series盒须图（箱体图）基本使用与配置大全 |
八、Echart图表 之 series盒须图（箱体图）基本使用与配置大全
|
🍓 作者主页：💖仙女不下凡💖 🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！ 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！ 🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line ✨箱体图含义：1.箱子的中间一条线，是数据的中位数，代表了样本数据的平均水平。 2.箱子的上下限，分别是数据的上四位数和下四分位数，这意味着箱子包含了50%的数据，因此箱子的宽度在一定程度上反应了数据的波动程度。 3.在箱子的上方和下方，又各有一条线，有时候代表着最大最小值，有时候会有一些点“冒出去”。请千万不要纠结，理解成“异常值”就好。 ✨盒须图（箱体图）的基本使用：我看了一下网上了一些案例全部都是用dataSet映射处理的数据，看的不太明白，下面我就使用series.data处理数据绘制简单的箱体图，如下图 💕 盒须图（箱体图）还有很多配置属性，具体使用请参考一下内容 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: {} }]👉推荐相关文章：Echart图表 之 基本使用及配置项 👉推荐相关文章：Echart图表 之 title配置项大全 👉推荐相关文章：Echart图表 之 颜色color配置项大全 👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全 👉推荐相关文章：Echart图表 之 legend图例组件配置项大全 👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全 👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全 |
【本文地址】
今日新闻 |
推荐新闻 |