12.18 Datav的使用
vue2使用DataV：http://datav.jiaminghi.com/guide/
vue3使用DataV：https://datav-vue3.jiaminghi.com/guide/
注意：目前为止，文档中的使用方式是vue2的使用方式，所以必须使用vue2的方式搭建环境
创建vue项目
查看是否安装vue
vue -V
创建vue项目
vue create vuedatav
进入项目
cd vuedatav
启动项目
npm run dev
访问项目
![[07985d41-935c-4422-a0dc-289e20846c03.png]]
DataV-大屏数据展示组件库
官网地址：http://datav.jiaminghi.com/
![[e309b893-8732-47cd-ba59-cb434c15435f.png]]
组件库基于Vue （React版） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：
- 边框
带有不同边框的容器
- 装饰
用来点缀页面效果，增加视觉效果
- 图表
图表组件基于Charts (opens new window)封装，轻量，易用
- 其他
飞线图/水位图/轮播表/…
安装
cd datav-project
在Vue项目下进行组件库安装。
npm安装
npm install @kjgl77/datav-vue3yarn安装
yarn add @kjgl77/datav-vue3全局使用
main.js
import dataV from "@kjgl77/datav-vue3"; ... app.use(dataV); app.mount('#app')结构布局
div+css
flex
Scss
rem适配
设计稿是1920px
flexable.js把屏幕分为24等份
cssrem插件的基准值是80px
插件-配置按钮-配置扩展设置-Root Font Size里面设置。但是别忘记重启vscode软件保证生效
echarts基础
添加背景
<template> <div class="container"> <dv-border-box-1>dv-border-box-1</dv-border-box-1> </div> </template> <style> .container{ color: #fff; background-color: #000; width: 100%; height: 100vh; background: url('@/assets/bg.png') no-repeat; background-size: 100% 100%; } </style>头部效果
<!-- 顶部标题 --> <div class="top"> <dv-decoration-10 style="width:90%;height:5px;" /> <dv-decoration-8 style="width:300px;height:50px;" /> <dv-decoration-11 style="width:400px;height:60px; font-size: .09rem;">智慧工程数据中心</dv-decoration-11> <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" /> <dv-decoration-10 style="width:90%;height:5px;" /> </div> <style> .container { color: #fff; background-color: #000; width: 100%; height: 100vh; background: url('@/assets/bg.png') no-repeat; background-size: 100% 100%; } .top { height: 10vh; display: flex; align-items: center; } </style>中间部分
<!-- 中间部分 --> <div class="cent"> <div class="chart1"> <dv-border-box-13>dv-border-box-13</dv-border-box-13> <dv-border-box-1>dv-border-box-1</dv-border-box-1> <dv-border-box-2>dv-border-box-2</dv-border-box-2> </div> <div class="chart2"> <dv-border-box-12>dv-border-box-12</dv-border-box-12> </div> <div class="chart3"> <dv-border-box-1>dv-border-box-1</dv-border-box-1> <dv-border-box-8 :reverse="true">dv-border-box-8</dv-border-box-8> </div> </div> <style> .cent { display: flex; } .chart1 { height: 21.5vh; flex: 2; } .chart2 { flex: 3; height: 65vh; } .chart3 { flex: 2; height: 32.5vh; } </style>![[d6010795-3298-4f38-a719-2d8ebc4270f7.png]]
底部内容
<!-- 底部内容 --> <div class="footer"> <div class="foot-one"> <dv-border-box-8 :reverse="true">dv-border-box-8</dv-border-box-8> </div> <div class="foot-two"> <dv-border-box-13>dv-border-box-13</dv-border-box-13> </div> <div class="foot-thr"> <dv-border-box-8 :reverse="true">dv-border-box-8</dv-border-box-8> </div> </div> <style> .footer { display: flex; } .foot-one { flex: 3; height: 25vh; } .foot-two { flex: 2; height: 25vh; } .foot-thr { flex: 2; height: 25vh; } </style>![[c1ff356d-6199-44ee-a5b5-aa22fdb1fb79.png]]
添加图表
直接复制datav官网的代码
![[4dcb74ab-8b08-47f1-a5ab-97e92b110bd0.png]]
Echarts添加图表
在main.js中引入echarts
import echarts from "echarts"创建元素
<div ref="chart" style="width: 100%;height: 160px;"></div>在页面中引入echarts
import * as echarts from "echarts/core" export default { name: 'LargeScreen', mounted() { this.initChart();//绘制图表 }, methods: { initChart() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(this.$refs.chart); // 指定图表的配置项和数据 var option = { tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, grid: { x: 50, y: 25, x2: 30, y2: 35 }, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } } }添加datav中的图表
飞行图
<div class="content" style="height: 100vh; background-color: black;"> <dv-flyline-chart :config="config" :dev="true" style="width:100%;height:100%;" /> </div> <script> export default { name: 'App', data(){ return { config:{ centerPoint: [0.48, 0.35], points: [ // 飞行线路 [0.52, 0.23], [0.43, 0.29], [0.59, 0.35], [0.53, 0.47], [0.45, 0.54], [0.36, 0.38], [0.62, 0.55], [0.56, 0.56], [0.37, 0.66], [0.55, 0.81], [0.55, 0.67], [0.37, 0.29], [0.20, 0.36], [0.76, 0.41], [0.59, 0.18], [0.68, 0.17], [0.59, 0.10] ], bgImgUrl: 'http://datav.jiaminghi.com/img/flylineChart/map.jpg' // 地图背景 } } } } </script>![[59ea01c6-65e1-4703-8084-f140c4ab371c.png]]
水位图
<dv-water-level-pond :config="config" style="width:150px;height:200px" /> <script> export default { name: 'App', data(){ return { config:{ data:[66], shape:"roundRect" } } } } </script>![[49884a43-f8da-4819-929b-128401457cd1.png]]