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

相关推荐
会飞的鱼先生30 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
苹果酱056744 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
咪库咪库咪3 小时前
vue1
前端·vue.js
洋333 小时前
[纯原创无Ai] 我把React调教成vue的模样了
vue.js·react.js
李是啥也不会3 小时前
Vue中Axios实战指南:高效网络请求的艺术
前端·javascript·vue.js
JavaDog程序狗4 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
じ☆ve 清风°4 小时前
Vue.js 核心特性解析:响应式原理与组合式API实践
前端·vue.js
Sahas10196 小时前
vite+vue2+elementui构建之 vite.config.js
vue.js·elementui
灏瀚星空6 小时前
从基础到实战的量化交易全流程学习:1.2 金融市场基础
笔记·python·信息可视化·系统架构·开源
itsOli6 小时前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js