roy-datav-libs

下载

npm install -S roy-datav-libs echarts

导入

import datav from 'roy-datav-libs'
createApp(App)
  .use(datav)

VueCountTo用法

<VueCountTo
    :start-val="startVal"
    :end-val="endVal"
    :duration="1000"
    separator=","
    autoplay
/>
1,000,000
<VueCountTo
    :start-val="startVal"
    :end-val="endVal"
    :duration="1000"
    :decimals="2"
    suffix="%"
/>
0.21%

参数说明:

startVal:开始数值
endVal:结束数值
duration:动画时间
autoplay:自动播放
separator:分隔符
decimals:多少位小数
suffix:末尾字符串

Loading用法

<RoyLoading v-if="loading">
    <div class="loading-text">加载中...</div>
</RoyLoading>

RoyContainer用法

//锁定屏幕尺寸
<RoyContainer :options="{ width: 3840, height: 2160 }">
</RoyContainer>

RoyFlyBox用法

//该插件是用于边框上有一个线在循环往复得动画
<RoyFlyBox  starColor="rgb(251,253,142)">
    
</RoyFlyBox>
//参数说明
lineColor:线的颜色
starColor:线头部颜色
starLength:线的长度
duration:动画时间

VueEcharts用法

<VueEcharts :options="options"/>
//options参数和echarts参数一样 

BaseScrollList用法

 <BaseScrollList :config="config" />

//config参数说明
// 标题数据，格式['a','b','c']
headerData: [],
//标题样式,格式[{},{},{}]
headerStyle: [],
headerBg: "rgb(90,90,90)",
//标题高度
headerHeight: 35,
//标题是否展示序号
headerIndex: false,
//扩展符
headerIndexContent: "#",
// 序号列标题的样式
headerIndexStyle: {
width: "50px",
},
//序号列的布局
headerIndexData: [],
// 数据项，二维数组
data: [],
//每页显示数据量
rowNum: 0,
// 行样式
rowStyle: [],
// 序号列内容的样式
rowIndexStyle: {
width: "50px",
},
// 行背景色
rowBg: [],
//头部字体大小
headerFontSize: 28,
//行的字体大小
rowFontSize: 28,
// 居中方式
aligns: [],
headerColor: "#fff",
rowColor: "#000",
moveNum: 1, // 移动的位置
duration: 2000, // 动画间隔Î

实例:

<template>
  <div class="sale-list">
    <div class="title">区域销售大盘环比分析</div>
    <div class="list">
      <BaseScrollList :config="config" />
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
export default {
  props: {
    data: Array
  },
  setup (props) {
    const config = ref({})

    const update = () => {
      const data = []
      const aligns = []
      const headerIndexData = []
      for (let i = 0; i < props.data.length; i++) {
        data[i] = []
        aligns[i] = 'center'
        if (i % 2 === 0) {
          headerIndexData[i] = `
            <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgb(40,40,40)">
              <div style="width:15px;height:15px;background:rgb(72,122,72);border-radius:50%;border:1px solid #fff;"/>
            </div>
          `
        } else {
          headerIndexData[i] = `
            <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgb(40,40,40)">
              <div style="width:15px;height:15px;background:rgb(38,88,104);border-radius:50%;border:1px solid #fff;"/>
            </div>
          `
        }
        for (let j = 0; j < 5; j++) {
          let text = ''
          switch (j) {
            case 0:
              text = props.data[i].order
              break
            case 1:
              text = props.data[i].shop
              break
            case 2:
              text = props.data[i].rider
              break
            case 3:
              text = props.data[i].newShop
              break
            case 4:
              text = props.data[i].avgOrder
              break
            default:
              break
          }
          if (j === 1 || j === 3) {
            data[i].push(`<div style="color:rgb(178,209,126)">${text}</div>`)
          } else {
            data[i].push(`<div>${text}</div>`)
          }
        }
      }

      config.value = {
        headerData: [
          '城市订单量',
          '店铺数',
          '接单骑手人数',
          '新店铺数量',
          '人均订单量'
        ], // 表头数据
        headerHeight: '55', // 表头高度
        headerIndex: 'true',
        headerFontSize: 24, // 头部文字大小
        headerColor: '#fff',
        headerBg: 'rgb(80,80,80)', // 表头背景色
        headerIndexContent: '', // 表头序号列文字
        headerIndexData,
        data,
        aligns,
        rowNum: 10,
        rowBg: ['rgb(40,40,40)', 'rgb(55,55,55)'],
        rowFontSize: 24,
        rowColor: '#fff'
      }
    }
    onMounted(() => {
      update()
    })
    watch(
      () => props.data,
      () => {
        update()
      }
    )
    return {
      config
    }
  }
}
</script>

<style lang="scss" scoped>
.sale-list {
  background: rgb(55, 55, 55);
    padding: 20px 40px;
    box-sizing: border-box;

    .title {
      font-size: 36px;
      margin-left: 20px;
    }

    .list {
      width: 100%;
      height: 880px;
      margin-top: 20px;
      padding: 30px 0;
      box-sizing: border-box;
      background: rgb(40, 40, 40);
    }
}

</style>