一：什么是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，效果图
