一别多日，好久没有和大家相见了。其一的原因是因为公司的项目，其二就是因为太懒了。现在给大家浅浅的介绍一下这个好用的大屏展示框架吧。如果后续有深入的话，我会出一个详解版本的。
一、dataV介绍
前言:由于当前的大数据时代，人们对所产生的数据都有十分大的展示需求，都需要更美观，更加直接的方式去查看数据。
datav网址：Welcome | DataV
二、dataV的使用
注意：目前的使用版本只支持vue2，不支持vue3.虽然官网上面有vue3的版本，但是我实际用起来很麻烦，网上看了很多的解决办法，选择了使用了有人把datav重新改写了一次的版本。但是内容是完全一致的。如果你的项目是vue3的话可以选择使用这个网站
套壳网站：DataV Vue3+TS+Vite版 | DataV - Vue3
由于我使用的是这个修改版本，那我就这个版本+vue3来进行讲解。
2.1 安装
-
安装，此处使用pnpm工具，也可以yarn,npm等
pnpm install @kjgl77/datav-vue3
2.2全局引入
// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'
const app = createApp(App)
app.use(DataVVue3)
app.mount('#app')
2.3使用全屏容器
数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。
<dv-full-screen-container>content</dv-full-screen-container>
使用datav可以快速的构建出一个大屏框架
<template> <!-- 我是大屏--> <dv-full-screen-container style="background-color: black"> <div class="module-box"> <div style="flex: 0 1 30%"> <div class="flex flex-direction"> <dv-border-box-5 style="height: 20vh;">dv-border-box-8</dv-border-box-5> <dv-border-box-6 style="height: 20vh;">dv-border-box-8</dv-border-box-6> <dv-border-box-11 style="height: 20vh;">dv-border-box-8</dv-border-box-11> </div> </div> <div style="flex: 0 1 40%"> <dv-border-box-11 style="height: 60vh;width: 100%" title="dv-border-box-11"> </dv-border-box-11> </div> <div style="flex: 0 1 30%"> <div class="flex flex-direction"></div> <dv-border-box-11 style="height: 30vh;" title="dv-border-box-11"> </dv-border-box-11> <dv-border-box-11 style="height: 30vh;" title="dv-border-box-11"></dv-border-box-11> </div> </div> <div class="module-box"> <div style="flex: 0 1 50%"> <dv-border-box-11 style="height: 38vh;" title="dv-border-box-11"> </dv-border-box-11> </div> <div style="flex: 0 1 50%"> <dv-border-box-11 style="height: 38vh;" title="dv-border-box-11"></dv-border-box-11> </div> </div> </dv-full-screen-container> </template>
三、使用echarts
3.1 下载echarts
从npm获取
npm install echarts
3.2示例代码
第一步：引入
import * as echarts from "echarts";
第二步：在mounted生命周期函数中调用方法
mounted() {
this.setMap()
},
第三步：创建一个dom元素
<div ref="chart" id="map3" style="width: 100%;height: 100%;"></div>
第四步：在setMap()方法中找到这个dom元素
let myChart = echarts.init(this.$refs.chart)
第五步：将echarts中的示例option引入进来
const option = {...你需要的配置}
第六步：将刚才的设置挂载到上这个dom元素中去
myChart.setOption(option)
将这个封装成一个组件，然后使用组件。
<template>
<div ref="chart" id="map3" style="width: 100%;height: 100%;"></div>
</template>
<script>
//引入echarts
import * as echarts from "echarts";
export default {
name: "lineChart",
data(){
},
mounted() {
this.setMap()
},
methods:{
setMap(){
let myChart = echarts.init(this.$refs.chart)
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
}
myChart.setOption(option)
//第二种
// this.$nextTick(() => {
// let map2 = echarts.init(document.getElementById('map3'))
// this.chart2 = map2
// map2.setOption( {
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// data: [120, 200, 150, 80, 70, 110, 130],
// type: 'bar',
// showBackground: true,
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
// }
// ]
// })
// })
}
}
}
</script>
<style scoped>
</style>
