Vue2
注意vue2與3安裝DataV命令命令是不同的
Vue3
DataV - Vue3
官網地址
注意vue2與3安裝DataV命令命令是不同的
vue3+vite 與 Vue3+webpack 對應安裝也不同
vue3+vite
npm install @kjgl77/datav-vue3
全局引入
// 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 lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
如下案列所示:
膠囊柱圖
<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>
