举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > ECharts箱形的使用

ECharts箱形的使用

2023-04-23 00:18 ECharts教程

 ECharts箱形的使用

series[i]-boxplot

通过 Boxplot 可以设置 ECharts 的箱形图,Boxplot 又被称为:盒须图、盒式图、盒状图以及箱线图,是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。

示例如下:

1510277502636993

点击编辑实例 》》

它也支持多个 series 在同一个坐标系中,参见 例子。

ECharts 箱形图属性

type 属性

系列类型为 boxplot 以表示箱形图。

coordinateSystem 属性

该系列使用的坐标系,可选值:

  • 'cartesian2d'使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex、yAxisIndex指定相应的坐标轴组件。
xAxisIndex 属性

使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。

yAxisIndex 属性

使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。

name 属性

系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。

legendHoverLink 属性

是否启用图例 hover 时的联动高亮。为 boolean 类型的值,默认值为 true。

hoverAnimation 属性

是否开启 hover 在 box 上的动画效果。为 boolean 类型的值,默认值为 true。

layout 属性

布局方式,不设置时,取值为 null,可选值:

  • 'horizontal':水平排布各个 box。
  • 'vertical':竖直排布各个 box。

默认值根据当前坐标系状况决定:如果 category 轴为横轴,则水平排布;否则竖直排布;如果没有 category 轴则水平排布。

boxWidth 属性

box 的宽度的上下限。数组的意思是:[min, max],默认值为:[7, 50]。

可以是绝对数值,如 [7, 50],也可以是百分比,如 ['40%', '90%']。百分比的意思是,最大可能宽度(bandWidth)的百分之多少。

itemStyle 属性

boxplot 图形样式,有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。

dimensions 属性

使用 dimensions 定义 data 每个维度的信息。例如:

series: {
    type: 'xxx',
    // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。
    dimensions: ['date', 'open', 'close', 'highest', 'lowest']
    data: [
        // 有了上面 dimensions 定义后,下面这五个维度的名称分别为:
        // 'date', 'open', 'close', 'highest', 'lowest'
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}
series: {
    type: 'xxx',
    dimensions: [
        null,                // 如果此维度不想给出定义,则使用 null 即可
        {type: 'ordinal'},   // 只定义此维度的类型。
                             // 'ordinal' 表示离散型,一般文本使用这种类型。
                             // 如果类型没有被定义,会自动猜测类型。
        {name: 'good', type: 'number'},
        'bad'                // 等同于 {name: 'bad'}
    ]
}

dimensions 数组中的每一项可以是:

  • string,如 'someName',等同于 {name: 'someName'}
  • Object,属性可以有:name: string。type: string,支持numberfloat,即 Float64Arrayint,即 Int32Arrayordinal,表示离散数据,一般指字符串。time,表示时间类型,时间类型的支持参见 data

值得一提的是,当定义了 dimensions 后,默认 tooltip 中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。如果没有定义 dimensions,则默认 tooltip 会横排显示,且只显示数值没有维度名称可显示。

encode 属性

可以定义 data 的哪个维度被编码成什么。比如:

series: {
    type: 'xxx',
    encode: {
        x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。
        y: 2,              // 表示维度 2 映射到 y 轴。
        tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
        label: 3           // 表示 label 使用维度 3。
    },
    data: [
        // 每一列称为一个『维度』。
        // 这里分别是维度 0、1、2、3、4。
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

encode 支持的属性,根据坐标系不同而不同。 对于直角坐标系(cartesian2d),支持 x、y。 对于 极坐标系(polar),支持 radius、angle。 对于 地理坐标系(geo),支持 lng,lat。 此外,均支持 tooltip 和 label 和 itemName(用于指定 tooltip 中数据项名称)。

当使用 dimensions 给维度定义名称后,encode 中可直接引用名称,例如:

series: {
    type: 'xxx',
    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
    encode: {
        x: 'date',
        y: ['open', 'close', 'highest', 'lowest']
    },
    data: [ ... ]
}
zlevel 属性

盒须图所有图形的 zlevel 值。

zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段,默认的 zlevel 值为0。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

z 属性

盒须图组件的所有图形的 z 值,默认的 z 值为2。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

silent 属性

图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

animationDuration 属性

初始动画的时长,默认时长为 800,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:

animationDuration: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}
animationEasing 属性

初始动画的缓动效果,默认值为 elasticOut。不同的缓动效果可以参考 缓动示例。

animationDelay 属性

初始动画的延迟,默认为 0,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

阅读全文
以上是编程学为你收集整理的 ECharts箱形的使用全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部