0.3.23 • Published 9 months ago
@tuya-miniapp/charts v0.3.23
基础属性
基础属性适用所有图表组件.
/**
* 不可以数字开头, 用于设置 canvas ID
* 必填
*/
type canvasId = string; // 必填 不可以数字开头, 用于设置 canvas ID
/**
* 图表宽度, 基于 rpx 单位, 默认 750
*/
type width = number;
/**
* 图表高度, 基于 rpx 单位, 默认 422
*/
type height = number; // 默认 422 (基于 rpx 单位)
/**
* 图表主题色, 适用于折线图, 柱状图, 饼图等色块
*/
type colors = string[];
/**
* 图表主题, 默认 light 对文字, 线条等颜色有影响
*/
type theme = 'light' | 'dark';
/**
* 图标X轴是否动态调节文字, 设置为0,则全部显示
*/
type interval = 'auto';
line line-area bar 共享属性
/**
* 图表无数据时的占位文案, 默认为 'Loading...'
*/
type placeholder = string;
/**
* 图表无数据时的占位图标, 默认为 loading
* 展示在 placeholder 前面
*/
type placeholderIcon = 'none' | 'loading' | 'error';
/**
* 图表无数据时 x 轴占位文案 默认 ['6:00', '12:00', '18:00']
* 设置为 [] 则不展示 x 轴
*/
type placeholderXAxis = string[];
/**
* 图表无数据时 y 轴值上限, 默认 10
* 设置为 0 则不展示 y 轴
*/
type placeholderYAxis = number;
/**
* 图例的位置, 默认为 top (仅 line line-area bar 等图表组件支持)
* - none 表示不展示图例
*/
type legendPosition = 'top' | 'bottom' | 'none';
注意: 仅 line line-area bar 等图表组件支持
placeholder
placeholderIcon
属性,
当数据异常时, 可通过设置 placeholder 来显示提示文案
折线图
属性
/**
* 折线图数据, 多个表示多条线
*/
type Data = Array<{
name: string; // 线条名称
data: Array<{ value: number; name: string }> // 数据点
}>;
/**
* 数据单位,
* 如果为字符串则所有数据的 legend 及 tooltip 均使用该单位,
* 如果为数组则会和数据的索引互相匹配。
*/
type unit = string | string[]; // 数据点单位
type markLine = {
// 参考线名称
name: string;
// 参考线的值
value: number;
// 参考线颜色
color?: string;
};
组件路径
{
"usingComponents": {
"chart-line": "@tuya-miniapp/charts/line/index"
}
}
<chart-line data unit mark-line />
折线面积图
属性
/**
* 折线图数据, 多个表示多条线
*/
type Data = Array<{
name: string; // 线条名称
data: Array<{ value: number; name: string }> // 数据点
}>;
/**
* 数据单位,
* 如果为字符串则所有数据的 legend 及 tooltip 均使用该单位,
* 如果为数组则会和数据的索引互相匹配。
*/
type unit = string | string[]; // 数据点单位
type markLine = {
// 参考线名称
name: string;
// 参考线的值
value: number;
// 参考线颜色
color?: string;
};
组件路径
{
"usingComponents": {
"chart-line-area": "@tuya-miniapp/charts/line-area/index"
}
}
<chart-line-area data unit mark-line />
柱状图
属性
/**
* 折线图数据, 多个表示多条线
*/
type Data = Array<{
name: string; // 线条名称
data: Array<{ value: number; name: string }> // 数据点
}>;
/**
* 数据单位,
* 如果为字符串则所有数据的 legend 及 tooltip 均使用该单位,
* 如果为数组则会和数据的索引互相匹配。
*/
type unit = string | string[]; // 数据点单位
/**
* 设置后开启堆叠模式
*/
type stack = string;
/**
* 数据缩放 `1~100` `-100~-1`, 设置后可滑动, 数值表示默认可见数据占整体数据的百分比, 负数表示从右侧开始显示.
* 默认为 0, 表示启用数据缩放
* 例如: 50 表示默认显示 50% 的数据(0~25 条), -50 表示从右侧开始显示 50% 的数据 (26~50 条)
*/
type dataZoom = number;
组件路径
{
"usingComponents": {
"chart-bar": "@tuya-miniapp/charts/bar/index"
}
}
<chart-bar data unit stack dataZoom />
饼图
属性
/**
* 多个表示多个数据环
*/
type Data = Array<{
name: string; // 数据点名称, 用于图例
data: Array<{ value: number; name: string }> // 数据点
}>;
type theme = 'light' | 'dark';
type unit = string; // 数据点单位
type showLegend = boolean; // 是否显示图例 默认 false
组件路径
{
"usingComponents": {
"chart-pie": "@tuya-miniapp/charts/pie/index"
}
}
<chart-pie data unit showLegend />
仪表盘
属性
type value = number;
type unit = string; // 单位
type Data = { name: string; min: number; max: number };
组件路径
{
"usingComponents": {
"chart-gauge": "@tuya-miniapp/charts/gauge/index"
}
}
<chart-gauge value unit data />
0.3.23
9 months ago
0.3.22-beta-1
10 months ago
0.3.21
1 year ago
0.3.20
1 year ago
0.3.20-beta-4
1 year ago
0.3.20-beta-3
1 year ago
0.3.20-beta-1
1 year ago
0.3.20-beta-2
1 year ago
0.3.19-beta-1
2 years ago
0.3.19-beta-2
2 years ago
0.3.19
2 years ago
0.3.18
2 years ago
0.3.17
2 years ago
0.3.16
2 years ago
0.3.15
2 years ago
0.3.14
2 years ago
0.3.13
2 years ago
0.3.12
2 years ago
0.3.11
2 years ago
0.3.10
2 years ago
0.3.9
2 years ago
0.3.8
2 years ago
0.3.7
2 years ago
0.3.7-beta-3
2 years ago
0.3.7-beta-2
2 years ago
0.3.7-beta-1
2 years ago
0.3.6
2 years ago
0.3.5
2 years ago
0.3.4
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.0
2 years ago
0.2.4
2 years ago
0.2.3
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago