定义图表
点击主页左侧导航菜单的【图表】菜单项,打开图表管理页面,点击【添加】按钮,填写图表信息,选定图表类型,绑定数据集后,点击【保存并展示】按钮,即可打开图表展示页面。
一个图表可绑定添加任意多个数据集,一个数据集通常被绘制为图表中的一个图形条目系列。
如果设置了更新间隔,图表展示时将会定时刷新数据。
系统内置支持
70+图表类型,包括折线图、柱状图、饼图、散点图、雷达图、地图、表格、标签卡等常用图表,以及较为复杂专业的箱型图、关系图、树图、K线图等等。
它们都是开箱即用的,基本可以满足大部分应用需求。
对于新建图表,应使用
API-2.0的图表类型,API-1.0的图表类型仅用于兼容旧版系统,已不再维护。
企业版支持扫码打开图表展示页面,在图表管理页面点击【展示】按钮右侧下拉箭头,在下拉菜单中点击【扫码展示】,
扫描面板中的二维码即可。
绑定数据标记
在【数据集绑定】栏中,将会列出已绑定添加的数据集字段信息表格,点击【数据标记】列的【+】按钮设置必要的数据标记,
即可定义字段数据要绘制的图表维度和系列。
数据标记是由选定图表类型对应的图表插件定义的,
用于声明插件支持的数据结构,需要在定义图表时将它们绑定至数据集/字段,在绘制图表时,插件将根据这些绑定信息,读取数据,绘制图表元素。
某些图表插件可能未定义任何数据标记,此时则无需绑定; 某些图表插件,除了会定义能够绑定至数据集字段的数据标记,也可能会定义绑定至数据集的数据标记,此时, 页面上会出现数据集标记设置框,需要先设置数据集数据标记后,再设置相关字段数据标记。
某些图表插件可能未定义任何数据标记,此时则无需绑定; 某些图表插件,除了会定义能够绑定至数据集字段的数据标记,也可能会定义绑定至数据集的数据标记,此时, 页面上会出现数据集标记设置框,需要先设置数据集数据标记后,再设置相关字段数据标记。
设置字段别名和排序
在【数据集绑定】栏列出数据集字段信息表格中,点击【更多】列中的【...】按钮,可以设置数据集字段对应的别名和排序。
别名通常会作为图表的坐标轴名、系列名、列名等信息显示;排序值越小的通常越靠前显示。
设置数据集参数
如果添加的数据集是参数化数据集,可以点数据集底部的【参数 - 编辑】按钮,设置其展示时的初始参数值,
也可不在此设置,而在图表展示页面动态设置。
如果在图表展示时有数据集的必填参数未填写,那么需要用户点击图表右上角的【参数】按钮,
填写参数值并点击【确定】后,图表才会绘制。
在图表展示页面设置的数据集参数值不会被保存。
设置附件数据集
在【数据集绑定】栏下的【附件】栏,可以将数据集设置为附件,附件数据集无需绑定数据标记,通常不用于绘制图表,仅为图表提供附件数据,用于在看板中扩展图表功能,
比如在图表监听器的
onUpdate()、update()函数中读取附件数据,扩展图表。
设置数据格式
点击【数据集绑定】底部右侧的【数据格式】按钮,可设置数据在图表展示时的格式,例如:
日期格式:
时间格式:
日期时间格式:
日期格式:
yyyy年MM月dd日
时间格式:
HH时mm分ss秒
日期时间格式:
yyyy年MM月dd日HH时mm分ss秒
如果将类型设置为【数值】,将显示为毫秒数值而非字符串(例如日期
2021-06-01将显示为1622476800000)。
详细日期格式参考chart.resultDataFormat()函数中的日期格式符号说明。
设置图表配置
当选定图表类型对应的图表插件定义了配置表单时,【图表配置】栏的【编辑】按钮会自动激活,
点击将打开配置表单面板,可以通过文本框/下拉框/单选框/复选框等表单组件的方式设置图表效果。
图表配置可以在定义图表时设置,也可以在看板中设置,看板中的设置会覆盖图表中的同名项,
详细参考设置图表配置章节。
设置图表选项
示例:
隐藏内置
基本折线图图表的标题栏:
{
title: { show: false }
}
将内置
基本柱状图图表的第一个柱条颜色设为红色,第二个柱条颜色设为绿色:
{
series: [{
data: [
{ itemStyle: { color: 'red' } },
{ itemStyle: { color: 'green' } }
]
}]
}
将内置
基本地图图表切换为北京地图:
{
mapName:'北京'
}
详细的图表选项格式,请参考对应图表类型的相关文档。
对于系统内置的图表类型,在内置图表类型章节,详细列出了它们支持的图表选项格式。
除了各图表类型定义的各自图表选项,所有图表都可以设置一些通用选项,
比如
disableTool选项可以禁用图表的参数/数据面板功能,
详细参考通用图表选项章节。
设置图表选项时,通常无需设置数据部分,图表在绘制时会自动从其绑定的数据集中读取数据,填充图表选项的数据部分。
图表选项可以在定义图表时设置,也可以在看板中设置,看板中的设置会覆盖图表中的同名项, 详细参考设置图表选项章节。
图表选项可以在定义图表时设置,也可以在看板中设置,看板中的设置会覆盖图表中的同名项, 详细参考设置图表选项章节。
自定义图表
在定义图表时,将【图表类型】选定为【自定义】,即可自定义图表。
自定义图表在展示时,默认仅会以JSON格式显示其包含的数据集数据,便于浏览和调试数据,
需要在引入它的看板中自定义图表完全实现图表渲染逻辑。
分享图表
在图表管理页面,选中一条记录后,点击【分享】按钮,可以将图表分享给指定用户/角色。
如果图表加入了项目,将会继承项目的分享设置。