DataV 在HTML中使用

一:什么是DataV

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

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

二:效果图

下图是DataV官网 Demo 案例

三:如何使用DataV

官网已经有VueReact使用教程,接下来讲述的是在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,效果图

相关推荐
soso196814 分钟前
DataWorks快速入门
大数据·数据仓库·信息可视化
前端拾光者18 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
运维-大白同学2 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
星星会笑滴3 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish4 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5414 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.4 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普4 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King4 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui