@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 />