前端基于 Vue3 数据可视化大屏组件库

About

前端数据可视化大屏组件库

Getting Started

安装：

npm install kpzc-datav-libs

目前组件

自动轮播列表组件

<base-scroll-list :config="config"></base-scroll-list>
config.value = {
        headerData: ['城市订单量', '店铺数', '接单骑手人数', '新店铺数量', '人均订单量'],
        headerHeight: 55,
        headerFontSize: 24,
        headerColor: '#fff',
        headerBg: 'rgb(80,80,80)',
        headerIndexContent: '', // 表头序号列内容
        headerIndex: true,
        rowNum: 10,
        rowBg: ['rgb(40,40,40)', 'rgb(55,55,55)'],
        rowFontSize: 24,
        rowColor: '#fff',
        data,
        headerIndexData,
        aligns
}

SVG loading 组件

<kpzc-loading v-if="loading" width="100" height="100">
      <div class="loading-text">数据可视化大屏加载中...</div>
</kpzc-loading>

SVG 飞线动画组件

<kpzc-fly-box starColor="rgb(251,253,142)"></kpzc-fly-box>

Vue Echart 组件

<vue-echarts :options="options" />

Svg Icon 组件

<icon :name="iconData[index]" />

数字动画跳自增组件

 <count-to :start-val="item.startValue" :end-val="item.value" :duration="1000" />

数据可视化大屏地址