@linkdesign/screen v0.1.0-beta1

@linkdesign/screen

IoT 城市屏组件库

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

安装

tnpm install @linkdesign/screen --save

依赖

• @alifd/next

npm install @alifd/next --save

引入

全量引入

import '@linkdesign/screen/build/index.css';
// 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/components/Title';
import '@linkdesign/screen/lib/components/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`;
  },
  customName: (name) => {
    if (['config', 'Utils'].includes(name)) {
      return `@linkdesign/screen/lib/${name}`;
    }

    return `@linkdesign/screen/lib/components/${name}`;
  },
}

能力一览

文本类

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

图表类

基于Echarts/G2/自定义

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

GIS/数据可视化类

• 高德在线地图
• 围栏编辑器（覆盖物可视化编辑器）
• 点、线、面覆盖物展示
• 位置预览
• 拖拽选址
• 区域分级统计图（2D/3D）
• 飞线（3D）
• 地图点组件（设备点、事件点、POI点、人）
• 散点图、气泡图、热力图（2D/3D）
• 离线地图（需要用户自己提供栅格图数据）
• 支持高德Loca（数据可视化）
• 支持L7（数据可视化）
• ......

媒体类

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

其他

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

文档

设计规范

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

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

组件文档

高德GIS

GIS组件库

图形标记工具的设计思路

TODO List

• ......

意见或建议

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

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