November Perfect Moustache

    @linkdesign/screen
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    @linkdesign/screen

    IoT 城市屏组件库

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

    安装

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

    能力一览

    文本类

    • [x] 标题
    • [x] 子屏标题
    • [x] 筛选按钮
    • [x] (高德)天气
    • [x] 时间器
    • [x] 指标
    • [x] 轮播表格
    • [x] 排序列表
    • [x] 键值表格
    • [ ] ......

    图表类

    基于Echarts/G2/自定义

    • [x] 条形占比统计图(条形图)
    • [x] 条形堆叠占比图(条形图)
    • [x] 饼状标签占比图(饼图)
    • [x] 环状占比统计图(环状图)
    • [x] 环状堆叠占比图(环状图)
    • [x] 仪表盘
    • [x] echarts图表
    • [x] g2图表
    • [ ] ......

    GIS/数据可视化类

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

    媒体类

    • [ ] 图片
    • [x] 视频(录像、rtmp直播)
    • [ ] ......

    其他

    • [x] 全屏切换
    • [x] 实时感知(雷达动画)
    • [x] 图形标记工具
    • [ ] ......

    文档

    设计规范

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

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

    组件文档

    高德GIS

    GIS组件库

    图形标记工具的设计思路

    TODO List

    • [ ] ......

    意见或建议

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

    Install

    npm i @linkdesign/screen

    DownloadsWeekly Downloads

    155

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    6.54 MB

    Total Files

    225

    Last publish

    Collaborators

    • h5devhoward
    • linkdesign