DataV 在HTML中使用

2024-03-24 13:52

文章标签 使用 html frontend datav

本文主要是介绍DataV 在HTML中使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一：什么是DataV

介绍 | DataV (jiaminghi.com) 组件库基于Vue （React版 (opens new window)），主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：

这里是DataV官网介绍地址介绍 | DataV (jiaminghi.com)

二：效果图

下图是DataV官网 Demo 案例

三：如何使用DataV

官网已经有Vue和React使用教程，接下来讲述的是在html中使用。

1，引用Vue.js h和 DataV.js的

//Vue.js
<script src="//unpkg.com/vue@3"></script>
//Data.js
<script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>

2,添加一个div 设置id

<div class="app"> </div>

3,在DataV 官网 copy一个标签

<dv-capsule-chart :config="config" style="width:300px;height:200px" />

4，声明Vue的一个实例

<script>var app = new Vue({el: '#app'})
</script>

四：两个案例展示

5，完整代码

注：Vue.js 引用时可能无效，可自行去官网下载

<!DOCTYPE html>
<html><head><title>DataV</title><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script></head><body><div id="app"><div style="background:black"><dv-capsule-chart :config="config" style="width:300px;height:200px" /></div></div><script>var app = new Vue({el: '#app',data() {return {"config": {'data': [{name: '南阳',value: 167},{name: '周口',value: 67},{name: '漯河',value: 123},{name: '郑州',value: 55},{name: '西峡',value: 98}]}}}})</script></body>
</html>

6，效果图

7，第二个案例，完整代码

<!DOCTYPE html>
<html><head><title>DataV</title><script src="https://unpkg.com/vue"></script><script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script></head><body><div id="app"><dv-water-level-pond :config="config1" style="width:150px;height:200px" /></div><script>var app = new Vue({el: '#app',data() {return {"config1": {'data': [55],'shape': 'round'},}}})</script></body>
</html>

8，效果图