DataV 项目教程

最新推荐文章于 2024-08-12 08:31:44 发布

魏真权

最新推荐文章于 2024-08-12 08:31:44 发布

阅读量810

点赞数 21

本文链接：https://blog.csdn.net/gitblog_00976/article/details/141009600

版权

DataV 项目教程

DataVVue数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新(React版已发布)项目地址:https://gitcode.com/gh_mirrors/da/DataV

1. 项目介绍

DataV 是一个基于 Vue.js 的数据可视化构建工具，提供丰富的图表组件和模板，适用于创建各种监控大屏、控制中心以及地理分析场景。它支持动态请求数据库（如阿里巴巴云的 AnalyticDB 和 ApsaraDB for RDS）及 API，可读取静态的 CSV 和 JSON 数据。用户通过其图形化的界面和配置小部件，无需大量编程即可制作专业的可视化效果。

2. 项目快速启动

安装依赖

首先确保你已安装了 Node.js。然后，通过以下命令在你的项目中安装 DataV：

npm install @jiaminghi/data-view
# 或者使用 Yarn
yarn add @jiaminghi/data-view

引入并使用

在 Vue 应用中引入 DataV：

import dataV from '@jiaminghi/data-view'
import Vue from 'vue'

Vue.use(dataV)

如果你只需要某个特定组件，可以按需导入以优化体积：

import { BorderBox1 } from '@jiaminghi/data-view'
Vue.use(BorderBox1)

创建基本实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DataV 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 添加 DataV 组件 -->
    <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.js"></script>
    <style>
        html, body, #app {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .border-box-content {
            color: rgb(66, 185, 131);
            font-size: 40px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div id="app">
    <dv-border-box-1 class="border-box-content">欢迎使用 DataV</dv-border-box-1>
</div>
<script>
    new Vue({
        el: '#app',
    });
</script>
</body>
</html>