codecamp

设置ECharts箱形图的标域属性

eries[i]-boxplot.markArea 

用于设置 ECharts 箱形图的标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

ECharts 箱形图标域的属性

silent

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

label

标域文本配置。

itemStyle

设置箱形图标域的样式。

data

箱形图标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置:

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
  2. 用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'。
  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
  4. 如果是笛卡尔坐标系的话,也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标域,见示例 scatter-weight

当多个属性同时存在时,优先级按上述的顺序实现。

data: [
    [
        {
            name: '平均值到最大值',
            type: 'average'
        },
        {
            type: 'max'
        }
    ],
    [
        {
            name: '两个坐标之间的标域',
            coord: [10, 20]
        },
        {
            coord: [20, 30]
        }
    ], [
        {
            name: '60分到80分',
            yAxis: 60
        },
        {
            yAxis: 80
        }
    ], [
        {
            name: '所有数据范围区间'
            coord: ['min', 'min']
        },
        {
            coord: ['max', 'max']
        }
    ],
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]
animation

是否开启动画,boolean 值,默认值为 false。

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

数据更新动画的缓动效果,默认值同初始动画。

animationDelayUpdate

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

如下示例:

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

也可以看该示例

ECharts设置箱形图标线的属性
ECharts箱形图的提示框浮层设置
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }