Yzd-cockpit-components NPM

驾驶舱孵化器-组件系统v1.0

概要

为驾驶舱孵化器，移动驾驶舱提供统一组件元素

详细设计

基础组件

分组编号：101

文本组件 YzdText

组件标签：

组件编号：101001

属性

数据

数据类型：text

data: {
  text: '我是一个文本',
},

表格组件 YzdTable

组件标签：

组件编号：101003

属性

数据

数据类型：table

 data: {
   header: ['列1', '列2', '列3'],
   data: [
     ['行1列1', '行1列2', '行1列3'],
     ['行2列1', '行2列2', '行2列3'],
     ['行3列1', '行3列2', '行3列3'],
     ['行4列1', '行4列2', '行4列3'],
     ['行5列1', '行5列2', '行5列3'],
     ['行6列1', '行6列2', '行6列3'],
     ['行7列1', '行7列2', '行7列3'],
     ['行8列1', '行8列2', '行8列3'],
     ['行9列1', '行9列2', '行9列3'],
     ['行10列1', '行10列2', '行10列3'],
   ],
 },

辅助组件

分组编号：102

图片组件 YzdImage

组件标签：

组件编号：102001

属性

数据

数据类型：image

data: {
  url:
  'https://easyv.assets.dtstack.com/data/9861/80675/img/LXddhfIVX_1608014457672_XZo9FoyS3-.jpg',
},

指标组件

分组编号：103

数字翻牌器 YzdDIgitalFlop（废弃）

组件标签：

组件编号：103001

属性

数据

数据类型：digital-flop

data: {
  number: [123456],
  content: '秒',
},

标准翻牌器 YzdTitleFlop

组件标签：

组件编号：103002

属性

数据

数据类型：flop

data: {
  title: '翻牌器标题'
  number: 12345,
},

图表组件

分组编号：104

普通柱状图 YzdBaiscBar

组件标签：

组件编号：104001

属性

数据

数据类型：chart-bar

data: {
  xAxis: {
    data: ['新荣区', '平城区', '云冈区', '云州区', '阳高县'],
  },
  series: [
    {
      name: '秋季',
      data: [920, 1202, 981, 634, 1390],
    },
    {
      name: '春季',
      data: [790, 1002, 1271, 1134, 1090],
    },
  ],
},

斑马纹理柱状图 YzdZebraBar

组件编号：104002

属性

数据

数据类型：chart-bar

横向堆叠柱状图 YzdHorizontalBar

组件编号：104003

属性

数据

数据类型：chart-bar

普通折线图 YzdBaiscLine

组件标签：

组件编号：104011

属性

数据

数据类型：chart-line

data: {
  xAxis: {
    data: ['新荣区', '平城区', '云冈区', '云州区', '阳高县'],
  },
  series: [
    {
      name: '秋季',
      data: [920, 1202, 981, 634, 1390],
    },
    {
      name: '春季',
      data: [790, 1002, 1271, 1134, 1090],
    },
  ],
},

光滑折线图 YzdSmoothLine

组件编号：104012

属性

数据

数据类型：chart-line

普通饼图 YzdBaiscPie

组件标签：

组件编号：104021

属性

数据

数据类型：chart-pie

data: {
  series: [
    {
      name: '访问来源',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' },
      ],
    },
  ],
},