@linkdesign/screen v0.1.1-beta5

@linkdesign/screen

IoT 城市屏组件库

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

安装

npm install @linkdesign/screen --save

依赖

• @alifd/next

npm install @alifd/next --save

引入

全量引入

import '@linkdesign/screen/lib/index.less';
import { Title, BarChart } from '@linkdesign/screen';

按需引入

0. 引入全局样式（字体等）

// in your entry
import '@linkdesign/screen/lib/_reset.less';

1. 手动引入

import Title from '@linkdesign/screen/lib/title';
import '@linkdesign/screen/lib/title/style';

2. 使用 babel-plugin-import

babel配置

{
  libraryName: '@linkdesign/screen',
  camel2DashComponentName: false,
  style: (name) => {
    if (name.endsWith('config') || name.endsWith('Utils')) {
      return false;
    }

    return `${name}/style`;
  },
}

能力一览

文本类

• 标题
• 子屏标题
• 筛选按钮
• 天气
• 时间器
• 指标
• 轮播表格
• 排序列表
• 键值表格
• ......

图表类

基于Echarts/G2/自定义

• 条形占比统计图（条形图）
• 条形堆叠占比图（条形图）
• 饼状标签占比图（饼图）
• 环状占比统计图（环状图）
• 环状堆叠占比图（环状图）
• 仪表盘
• echarts图表
• g2图表
• ......

媒体类

• 图片
• 视频（录像、rtmp直播）
• ......

其他

• 全屏切换
• 实时感知（雷达动画）
• 图形标记工具
• ......

文档

设计规范

城市数据大盘_大屏设计规范V1.0

大屏标准套件& BI指标看板

组件文档

高德GIS

GIS组件库

图形标记工具的设计思路

TODO List

• ......

意见或建议

对组件库的建设有任何想法或建议，请联系：

• 翊安 (howard.zh@alibaba-inc.com)