配置属性

图表容器

width

可选, number

功能描述： 设置图表宽度。

默认配置： 400

height

可选, number

功能描述： 设置图表高度。

默认配置： 400

forceFit

可选, boolean

功能描述： 图表是否自适应容器宽高。当 forceFit 设置为 true 时，width 和 height 的设置将失效。

默认配置： true

pixelRatio

可选, number

功能描述： 设置图表渲染的像素比

默认配置： 2

renderer

可选, string

功能描述: 设置图表渲染方式为 canvas 或 svg

默认配置： canvas

数据映射

data 📌

必选, array object

功能描述： 设置图表数据源

默认配置： 无

数据源为对象集合，例如：[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]。

dateField 📌

必选，string

功能描述： 日历图中对应日期数据的字段。

默认配置： 无

valueField 📌

必选, string

功能描述： 日历图中对应每个格子中值的字段。

默认配置： 无

months: string[] ✨

可选, string[]

功能描述：对应月份名称的数组。

默认配置：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

weeks: boolean ✨

可选，string[]

功能描述：对应星期名称的数组，从周日开始。

默认配置：['S', 'M', 'T', 'W', 'T', 'F', 'S']

图形样式

colors

可选, string | string[]

功能描述： 日历图中对应 valueField 值映射的颜色数组或者字符串，例如：'#BAE7FF-#1890FF-#0050B3' 或者 ['#BAE7FF', '#1890FF', '#0050B3']。

默认配置： theme 中的默认色板

图表组件

title

可选, optional

DEMOS

功能描述： 配置图表的标题，默认显示在图表左上角。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 18,
    fill: 'black',
}

description

可选, optional

DEMOS

功能描述： 配置图表的描述，默认显示在图表左上角，标题下方。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 12,
    fill: 'grey',
}

xAxis

可选, object

DEMOS

功能描述： x 方向上的坐标轴，用于展示 xField 对应的映射信息

默认配置：

visible: true,
grid: {
    visible: false,
},
line: {
    visible: true
},
tickLine: {
     visible: true,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: false,
    offset: 12,
},

yAxis

可选, object

DEMOS

功能描述： y 方向上的坐标轴，用于展示 yField 对应的映射信息

默认配置：

visible: true,
grid: {
    visible: true,
},
line: {
    visible: false,
},
tickLine: {
    visible: false,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: true,
    offset: 12,
},

tooltip

可选, object

功能描述：信息提示框

默认配置：

visible: true,
offset: 20,

label

可选, object

功能描述： 标签文本

默认配置：

visible: false
offsetX: 6
offsetY: 6
style:{
  fill: 'rgba(0, 0, 0, 0.65)',
  stroke: '#ffffff',
  lineWidth: 2,
}

事件

矩形事件

图表区域事件

图形标签事件

标题事件

描述事件

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

plot.updateConfig({
  width: 500,
  height: 600,
  legend: {
    visible: false,
  },
});

plot.render();

changeData()

可选

更新图表数据。updateConfig()方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。

何时使用

日历图是通过一个日历形态的图形来显示数据在一个日期范围内的对比情况。

数据类型