本文主要是介绍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，效果图
这篇关于DataV 在HTML中使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
