一:什么是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的
javascript
//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
html
<div class="app"> </div>
3,在DataV 官网 copy一个 标签
html
<dv-capsule-chart :config="config" style="width:300px;height:200px" />
4,声明Vue的一个实例
javascript
<script>
var app = new Vue({
el: '#app'
})
</script>
四:两个案例展示
5,完整代码
注:Vue.js 引用时可能无效,可自行去官网下载
html
<!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,第二个案例,完整代码
javascript
<!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,效果图