Package Exports

roy-datav-libs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (roy-datav-libs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>