数据可视化设计，仪表盘组件，指针式，适用于速度、温度、完成率等单一数值
·
触达云屏，仪表盘组件：
介绍
1. 添加组件
2. 配置样式
选中组件，右侧会出现相应的属性配置表单。
| 配置项 | 子项 | 示例值 | 说明 |
|---|---|---|---|
| 系统配色 | 开启后，选择内置的配色 | ||
| 设备像素比 | 2 | 一般不用设置。在某些设备中展示，出现图表模糊的情况时，可以尝试设置，如设置为 2 | |
| SVG渲染模式 | 一般不用开启，开启后图表使用SVG的渲染方式，显示效果更加清晰 | ||
| 仪表轴线宽度 | 仪表盘外圈线条宽度 | ||
| 刻度设置 | 刻度起点角度 | 3点钟方向为0度，逆时针计算角度，如设置90度，则刻度起点为12点方向。如起点角度设置为180，终点角度设置为0 ，则仪表为上半圆仪表盘 | |
| 刻度终点角度 | |||
| 刻度最小值 | 20 | 当数据中绑定仪表盘最大最小值时，取数据中的数值。反之取这里配置的数值。 | |
| 刻度最大值 | 90 | 当数据中绑定仪表盘最大最小值时，取数据中的数值。反之取这里配置的数值。 | |
| 刻度分割数量 | 刻度分割为几段 | ||
| 刻度分割线长 | 刻度分割线的长度 | ||
| 刻度分割线宽 | 刻度分割线的宽度 | ||
| 刻度线长 | 刻度线的长度 | ||
| 刻度线宽 | 刻度线的宽度 | ||
| 显示刻度值 | 是否显示刻度数值 | ||
| 刻度值距离 | 刻度值和刻度线之间的距离，支持负数 | ||
| 刻度值字号 | |||
| 刻度值字体 | |||
| 刻度值颜色 | |||
| 指针设置 | 指针图片 | 支持通过 svgpath、图片设置指针的样式 | |
| 指针长度 | 百分比，占仪表盘半径的比例，设置100时，指针长度和半径相同 | ||
| 指针位置 | 指针相对仪表盘中心点的位置，百分比，设置为0时 指针在中心点。设置为30，指针向下偏移半径的30%。设置为-30，指针向上偏移半径的30% | ||
| 指针颜色 | 指针设置为 svgpath时支持设置为指针颜色 | ||
| 指标设置 | 显示指标名称 | 开启后显示指标名称 | |
| 指标名称 | |||
| 指标名称字号 | |||
| 指标名称字体 | |||
| 指标名称颜色 | |||
| 指标名称位置 | 调节指标名称在垂直方向上的位置，支持负数 | ||
| 显示指标值 | 开启后显示指标数值 | ||
| 指标值字号 | |||
| 指标值字体 | |||
| 指标值颜色 | |||
| 指标值位置 | 调节指标数值在垂直方向上的位置，支持负数 | ||
| 指标值单位 | 指标值的计量单位，当数据中绑定单位时，取数据中的单位。反之取这里配置的单位。 | ||
| 提示框设置 | 显示 | 开启后鼠标移到指针上显示提示框 | |
| 字体名称 | |||
| 字体大小 | |||
| 字体颜色 | |||
| 字体加粗 | |||
| 提示框背景色 | |||
| 提示框边界颜色 | |||
| 提示框边界宽度 | |||
| 提示框内容边距 | |||
| 提示框位置 | |||
| 自定义配色 | 配色列表 | 添加多种颜色，颜色会自动按顺序匹配到图表中每一个数据系列。支持渐变色、透明度设置 | |
| 代码扩展 | 启用 | 开启和禁用代码扩展 | |
| 编辑代码 | 打开代码编辑器，编写少量代码，增加图表选项配置 |
3. 配置数据
切换到数据配置，配置数据来源，关于不同数据类型的区别，请参考文档：组件通用配置说明
零代码绑定数据，数据集中包含以下字段即可。
| 名称 | 说明 | 示例值 |
|---|---|---|
| 名称 | 指标名称 | |
| 数值 | ||
| 单位 | ||
| 表盘最小值 | ||
| 表盘最大值 |
4，自定义数据转换
通过编写 数据转换函数 实现自定义的数据格式转换和 个性化样式设定。
数据格式：
{
"min": 1,
"max": 100,
"label": "环境湿度",
"value": 90,
"unit": "%"
}
5，交互、事件
在点击事件、标签格式化、提示格式化 等函数中，除获取基本的name、value 等信息外，还支持获取扩展字段的数据。
6 ，代码扩展示例
参考示例：代码扩展
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
12
0- 0
已为社区贡献3条内容
所有评论(0)