功能简介

large-screen组件可以帮忙你快速实现一个大屏可视化的布局。你可以通过插槽的方式把图表组件插入到我们的框架中，只需要简单的修改配置参数。

使用方法

一、安装

npm install large-screen-zyk

二、引入模块

<Dashboard :dashboardConfig="dashboardConfig"/>

三、配置参数介绍

dashboardConfig: {
    bacckgroundUrl: '',//背景图片的路径
    nav: {
      title: 'xx电商大数据平台', //标题
      titleColor: '#b3efff', //标题颜色
      imageUrl: 'src/assets/images/nav.png' //顶部导航栏的背景图片
    },
    cardData: {
      //卡片border样式，参考DataV Vue3（https://datav-vue3.netlify.app/Guide/Guide.html）
      borderType: 'dv-border-box2',
      //卡片背景颜色
      backgroundColor: 'transparent',
      //卡片标题的颜色
      cardTitlteColor: '#b3efff',
      cardList: [{
        key: '1', //卡片唯一的key
        title: '总交易额', //卡片的标题
        <!-- 卡片纵向位置（开始、结束） -->
        column: {
          start: 1,
          end: 4
        },
        <!-- 卡片横向位置（开始、结束） -->
        row: {
          start: 1,
          end: 7
        },
        <!-- 卡片插槽的组件名-需要自定义组件 -->
        chartsType: 'LineChart'
      }]
    }
  }

四、布局设置介绍

eg：  column: { start: 1，end: 4 }, row: { start: 1, end: 7 }
符合display：grid 布局的'grid-column': 1/4 'grid-row': 1/7的布局方式

1 2 3 4 5 6 7 8 9 10 11 12 13

2

3

4

5

6

7

8

9

10

11

12

13