DataV 在HTML中使用

云边小卖铺.2024-03-27 18:08

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