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

相关推荐
ElasticPDF-新国产PDF编辑器13 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin15 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌15 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光15 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs15 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石15 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking17 小时前
解决 axios get请求瞎转义问题
vue.js
向阳25617 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特17 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~17 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习