codecamp

ECharts日历坐标系属性

calendar.zlevel   |   number

[ default: 0 ]

所有图形的 zlevel 值。

zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。

需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。 

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

calendar.z   |   number

[ default: 2 ]

得到日历坐标系组件的所有图形的 z 值。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。

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

calendar.left   |   string, number

[ default: 80 ]

日历坐标系组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。

calendar.top   |   string, number

[ default: 60 ]

日历坐标系组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。

calendar.right   |   string, number

[ default: 'auto' ]

日历坐标系组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

calendar.bottom   |   string, number

[ default: 'auto' ]

日历坐标系组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。

calendar.width   |   number, string

[ default: auto ]

日历坐标的整体宽度

注意: 默认cellSize 为20,若设置了width的值, 则cellSize中的宽度强制转为auto;

calendar.height   |   number, string

[ default: auto ]

日历坐标的整体高度,

注意: 默认cellSize 为20,若设置了height的值, 则cellSize中的高度强制转为auto;

calendar.range   |   number, string, Array

必填项,日历坐标的范围,支持多种格式

使用示例:


// 某一年
range: 2017

// 某个月
range: '2017-02'

// 某个区间
range: ['2017-01-02', '2017-02-23']

// 注意 此写法会识别为['2017-01-01', '2017-02-01']
range: ['2017-01', '2017-02']

calendar.cellSize   |   number, Array

[ default: 20 ]

设置日历每格框的大小,可设置为单值或数组,其中,第一个元素是宽,第二个元素是高。 支持设置自适应:auto, 默认为高宽均为20

使用示例:


// 设置宽高均为20
cellSize: 20

// 设置宽为20,高为40
cellSize: [20, 40]

// 设置宽高均为40
cellSize: [40]

// 设置宽高均自适应
cellSize: 'auto'

// 设置宽自适应,高为40
cellSize: ['auto', 40]

calendar.orient   |   string

[ default: 'horizontal' ]

日历坐标的布局朝向。

可选:

  • 'horizontal'
  • 'vertical'

calendar.silent   |   boolean

[ default: false ]

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

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; }