Vue2使用Data-v可视化工具

1、主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用

● 边框
带有不同边框的容器
● 装饰
用来点缀页面效果，增加视觉效果
● 图表
图表组件基于Charts(opens new window)封装，轻量，易用
● 其他
飞线图/水位图/轮播表/…

2、安装

在Vue项目下进行组件库安装。
● npm安装

npm install @jiaminghi/data-view

● yarn安装

yarn add @jiaminghi/data-view

2-1、使用

// 将自动注册所有组件为全局组件

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

2-2、这个是按需引入的引入
按需引入仅支持基于ES module的tree shaking，按需引入示例如下：

import { borderBox1 } from ‘@jiaminghi/data-view’

Vue.use(borderBox1)

3、代码案例如下

<template>
    <div>
        <dv-border-box-11 title="数据看表"><br><br>
            <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6">
                        <div class="grid-content bg-purple">
                        <dv-scroll-ranking-board :config="gundoconfig" style="width:500px;height:300px" />
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <dv-capsule-chart :config="capsuleconfig" style="width:500px;height:300px" />
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <dv-active-ring-chart :config="ringconfig" style="width:310px;height:300px" />
                    </div>
                </el-col>
            </el-row>
        </dv-border-box-11>
    </div>
</template>
<script>
export default {
    name: "index",
    data() {
        return {
            // dv-capsule-chart  胶囊柱图的数据
            capsuleconfig: {
                data: [{
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 123
                    },
                    {
                        name: '漯河',
                        value: 98
                    },
                    {
                        name: '郑州',
                        value: 75
                    },
                    {
                        name: '西峡',
                        value: 66
                    },
                ],
                colors: ['#7991d1', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                unit: '单位',
                showValue: true,
            },


            //  dv-active-ring-chart 的数据
            ringconfig: {
                radius: '50%',
                activeRadius: '55%',
                data: [{
                        name: '周口',
                        value: 55
                    },
                    {
                        name: '南阳',
                        value: 120
                    },
                    {
                        name: '西峡',
                        value: 78
                    },
                    {
                        name: '驻马店',
                        value: 66
                    },
                    {
                        name: '新乡',
                        value: 80
                    }
                ],
                digitalFlopStyle: {
                    fontSize: 20,
                    fill: '#084495'
                },
                showOriginValue: true,
                animationFrame: 20,
            },

            // 滚动数据
            gundoconfig: {
                data: [{
                        name: '周口1',
                        value: 55
                    },
                    {
                        name: '南阳2',
                        value: 120
                    },
                    {
                        name: '西峡3',
                        value: 78
                    },
                    {
                        name: '驻马店',
                        value: 66
                    },
                    {
                        name: '新乡',
                        value: 80
                    },
                    {
                        name: '信阳',
                        value: 45
                    },
                    {
                        name: '漯河',
                        value: 29
                    }
                ]
            }
        }
    },
    mounted() {

    },
    computed: {

    },
    methods: {

    },
}
</script>
<style scoped>
/*  #胶囊柱图柱状样式  */
.dv-capsule-chart {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    color: #084495 !important;
}

/* 环形样式 */
/deep/ .dv-active-ring-chart .active-ring-info .active-ring-name {
    width: 100px;
    height: 30px;
    color: #3d6e53 !important;
    text-align: center;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/*   滚动样式css */
.dv-scroll-ranking-board {
    width: 100%;
    height: 100%;
    color: #3d6e53 !important;
    overflow: hidden;
}

/*element ui 样式 */
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    /* background: #99a9bf; */
}
.bg-purple {
    /* background: #d3dce6; */
}
.bg-purple-light {
    /* background: #e5e9f2; */
}
.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 30px 16px 16px 16px;
    /* background-color: #f9fafc; */
}

  
</style>