dataV教程-浅用dataV

一别多日，好久没有和大家相见了。其一的原因是因为公司的项目，其二就是因为太懒了。现在给大家浅浅的介绍一下这个好用的大屏展示框架吧。如果后续有深入的话，我会出一个详解版本的。

一、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>