使用DataV插件

DataV 组件库基于 Vue 或者 React ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：

提示

Vue3 版：http://datav.jiaminghi.com/

React 版：http://datav-react.jiaminghi.com/

---

我们以 Vue 为例进行下面的学习

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

npm install @kjgl77/datav-vue3 --save

• 在 main.ts 中完整引入

// main.ts中全局引入
import { createApp } from "vue";
import DataVVue3 from "@kjgl77/datav-vue3";
const app = createApp(App);
app.use(DataVVue3);
app.mount("#app");

提示

引入后在.vue 文件中可以直接使用

<dv-decoration-1 :color="['pink', 'yellow']" style="width:200px;height:50px;" />

• 推荐按需引入

<template>
  <!-- 引入之后就可以在vue的template中直接使用 -->
  <decoration-1 :color="['pink', 'yellow']" style="width:200px;height:50px;" />
  <decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>

<!-- 在.vue文件的script中import部分组件 -->
<script setup lang="ts">
import { Decoration1, Decoration2 } from "@kjgl77/datav-vue3";
</script>

<style>
.container {
  width: 700px;
  height: 500px;
}
</style>

• 加载完整的效果

<template>
  <dv-border-box-11 title="词云图" :color="['red', 'green']" style="padding: 50px;box-sizing: border-box;">
    <div id="container"></div>
  </dv-border-box-11>
</template>

<script setup lang="ts">
import { BorderBox11 as DvBorderBox11 } from '@kjgl77/datav-vue3'
import { onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any
onMounted(() => {
  proxy.$leida("container")
})
</script>

<style>
#container {
  width: 300px;
  height: 300px;
}
</style>