创新互联ECharts教程: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日历坐标系属性
标题链接:http://www.shufengxianlan.com/qtweb/news14/124064.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联