Vue2/Vue3使用DataV

Vue2

javascript 复制代码
注意vue2与3安装DataV命令命令是不同的

Vue3

DataV - Vue3

官网地址

javascript 复制代码
注意vue2与3安装DataV命令命令是不同的
vue3+vite 与 Vue3+webpack 对应安装也不同

vue3+vite

javascript 复制代码
npm install @kjgl77/datav-vue3

全局引入

javascript 复制代码
// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'

const app = createApp(App)

app.use(DataVVue3)
app.mount('#app')

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

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

局部引入

javascript 复制代码
<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 lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
javascript 复制代码
如下案列所示:

胶囊柱图

javascript 复制代码
<template>
  <div w50rem h25rem flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-capsule-chart :config="config" style="width:25rem;height:15rem; color: black" />
    </div>
    <div pt5>
      <button btn @click="addData">增加数据</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
const addData = ()=>{
  config.data.push({
    name: '测试'+Math.floor(Math.random() * 100),
    value: Math.floor(Math.random() * 100)
  })
}
const config = reactive({
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '万元',
  labelNum: 8,
})
</script>
<style scoped>
</style>
相关推荐
百锦再1 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code1 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16881 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员2 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_2 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte2 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj12 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D12 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说12 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说12 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画