Echarts 箱线图是一种用于显示数据分布的图表,它可以帮助我们更好地理解数据的分布情况。它由一个矩形和两条“箱子”组成,其中矩形代表数据的中位数,而两条“箱子”代表数据的最大值和最小值。
Echarts 的箱线图可以用来显示一个样本集合中各变量之间的关联性,也可以用来显示一个样本集合中各变量之间的差异性。它还可以用来显示一个样本集合中各变量之间的相关性。
var myChart = echarts.init(document.getElementById('main')); option = { title: { text: 'ECharts 箱形图' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, xAxis : [{ // X 轴信息配置 type : 'category', // 表明这是一个分类信息 data : ['A','B','C','D','E'] // X 轴上的分类信息 }], yAxis : [{ // Y 轴信息配置 type : 'value' // Y 轴上是一个连续信息 }], series : [{ // 数据序列配置 name:'boxplot', // 数据序列名字 type:'boxplot', // 数据序列图表类型 data:[ // 数据序列内容:[min, Q1, median (or Q2), Q3, max] [850, 740, 900, 1070, 930], // A 的五数情况 [960, 940, 1200, 1170, 1000], // B 的五数情况 [880, 880, 880, 880, 880], // C 的五数情况 [1000, 1170 ,860 ,720 ,820], // D 的五数情况 [980 ,830 ,790 ,810 ,870] // E 的五数情况 ] // 如此多重嵌套也就是 ECharts 散开多重 Array 嵌套的特性了。 ]};myChart.setOption(option);
用于设置 ECharts 箱形图标线。
silent
图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
symbol
设置箱形图标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。
symbolSize
箱形图标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。
注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。
precision
标线数值的精度,在显示平均值线的时候有用,默认值为 2。
label
设置箱形图标线的文本。
lineStyle
设置箱形图标线的样式
data
标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。
当多个属性同时存在时,优先级按上述的顺序。
也可以是直接通过 type 设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex 指定维度。
data: [
{
name: '平均线',
// 支持 'average', 'min', 'max'
type: 'average'
},
{
name: 'Y 轴值为 100 的水平线',
yAxis: 100
},
[
{
// 起点和终点的项会共用一个 name
name: '最小值到最大值',
type: 'min'
},
{
type: 'max'
}
],
[
{
name: '两个坐标之间的标线',
coord: [10, 20]
},
{
coord: [20, 30]
}
], [{
// 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
yAxis: 'max',
x: '90%'
}, {
type: 'max'
}],
[
{
name: '两个屏幕坐标之间的标线',
x: 100,
y: 100
},
{
x: 500,
y: 200
}
]
]
animation
是否开启动画,默认为开启,即取值 true。
animationThreshold
是否开启动画的阈值,默认的阈值为 2000,当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration
初始动画的时长,默认时长为 1000,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:
animationDuration: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
animationEasing
初始动画的缓动效果,默认的缓动效果为 cubicOut。不同的缓动效果可以参考 缓动示例。
animationDelay
初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
如下示例:
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
animationDurationUpdate
数据更新动画的时长,默认时长为 300。
支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:
animationDurationUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
animationEasingUpdate
数据更新动画的缓动效果,默认缓动效果与初始动画的相同,为 cubicOut。
animationDelayUpdate
数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
如下示例:
animationDelayUpdate: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
}
也可以看该示例
series[i]-parallel设置 ECharts 平行坐标系的系列。什么是平行坐标系?平行坐标系(Parallel Coordinates)指的是一种常用的可...
Highcharts 百分比堆叠区域图Highcharts 区域图以下实例演示了百分比堆叠区域图。我们在前面的章节已经了解了 Highcharts 基本配...
Highcharts 区间区域图Highcharts 区域图以下实例演示了区间区域图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接下...
Highcharts 使用 HTML 表格数据的柱形图Highcharts 柱形图以下实例演示了使用 HTML 表格数据的柱形图。我们在前面的章节已经了解...
Highcharts 堆叠组柱形图Highcharts 柱形图以下实例演示了堆叠组柱形图。我们在前面的章节已经了解了 Highcharts 基本配置语法。...
Highcharts 固定布局柱形图Highcharts 柱形图以下实例演示了固定布局柱形图。我们在前面的章节已经了解了 Highcharts 基本配置语...
管理数据本章基于以一个基本Angular应用快速上手的第二步——添加导航。在此开发阶段,本商店应用具有一个包含两个视图的商品名...
动态组件加载器译注:本页讲的是一个用于显示广告的范例,而部分广告拦截器插件,比如Chrome的AdGuard,可能会破坏其工作逻辑,...