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,效果图

相关推荐
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
getaxiosluo6 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v6 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家7 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙7 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds8 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果8 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot