Vue大屏数据实战

原创已于 2024-06-27 11:51:37 修改 · 2.7k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-03-29 16:05:16 首次发布

本文介绍了使用VueCLI快速搭建项目的方法，区分了开发环境和生产环境的依赖管理，并详细讲解了DataV大屏组件库的安装与使用，以及如何结合Echarts创建图表。

一、项目环境搭建

1、该命令行工具可快速搭建大型单页应用。

cnpm install -g @vue/cli

2、查看脚手架版本

vue -V

3、创建项目

vue create 项目名称

二、生产环境和开发环境的区别

devDependencies中的插件只用于开发环境，不用于生产环境。

而dependencies是要发布到生产环境的。

比如，babel有关的转化es6到es5的依赖只是开发环境下转化用，生产过程中是用不到。

而vue，或element-ui这种实际运行中会调用，得写在dependencies中。

例如安装axios

安装到开发环境

npm axios --save-dev

安装到生产环境

npm axios --save

dependencies：表示生产环境下的依赖管理，npm install name -save

简写（npm i name -S）自动把模块和版本号添加到dependencies。

devDependencies：表示开发环境下的依赖管理，npm install name -save-dev

简写（npm i name -D）自动把模块和版本号添加到devDependencies。

三、DataV 大屏数据展示组件库

DataV，主要用于构建大屏（全屏）数据展示页面即数据可视化，提供多种类型组件可供使用。

3.1、npm安装

npm i @jiaminghi/data-view -S

3.12、在main.js全局导入

import dataV from '@jiaminghi/data-view' // 将自动注册所有组件为全局组件
Vue.use(dataV)

3.13 我用的是vue版本，可能会遇到这个问题：

无法找到模块“@jiaminghi/data-view”的声明文件。“c:/User/Senleo/Desktop/erp/ffep-manage-vue/node_modules/@jiaminghi/data-view/lib/index/index.js”隐式拥有 “any” 类型。
尝试使用 npm i --save-dev @types/jiaminghi__data-view (如果存在)，或者添加一个包含 declare module '@jiaminghi/data-view'; 的新声明(.d.ts)文件

解决办法

在src目录下新建一个datav.d.ts文件，然后写上这句内容

declare module "@jiaminghi/data-view" ，保存，关闭项目，重新打开项目运行即可。

3.2、全屏容器

数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。

注意：

建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。
使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕。

<dv-full-screen-container>

content

</dv-full-screen-container>

3.3 边框

边框均由SVG元素绘制，体积轻量不失真，它们的使用极为方便。

<template>
  <div class="content bg">
    <!-- 全屏容器 -->
    <dv-full-screen-container>
      <!-- 横排 等比例排放 一行展示2个 -->
      <div class="module_box">
        <div style="flex:0 1 50%">
          <dv-border-box-5 style="width:100%;height:200px;">dv-border-box-5</dv-border-box-5>
        </div>
        <div style="flex:0 1 50%">
          <dv-border-box-5 style="width:100%;height:200px;">dv-border-box-5</dv-border-box-5>
        </div>
      </div>
      <!-- 横排 等比例排放 一行展示4个 -->
      <div class="module_box">
        <div style="flex:0 1 25%">
          <dv-border-box-1 style="width:100%;height:200px;">dv-border-box-1</dv-border-box-1>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-2 style="width:100%;height:200px;">dv-border-box-2</dv-border-box-2>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-3 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-3>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-4 style="width:100%;height:200px;">dv-border-box-4</dv-border-box-4>
        </div>
      </div>
      <!-- 横排 等比例排放 一行展示4个 -->
      <div class="module_box">
        <div style="flex:0 1 25%">
          <dv-border-box-6 style="width:100%;height:200px;">dv-border-box-6</dv-border-box-6>
        </div>
        <div style="flex:0 1 50%">
          <dv-border-box-7 style="width:100%;height:200px;">dv-border-box-7</dv-border-box-7>
        </div>
        <div style="flex:0 1 25%">
          <dv-border-box-8 style="width:100%;height:200px;">dv-border-box-8</dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

注意：

flex: 0 1 50%;

参数解释：

第一个参数：flex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

第二个参数：flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

第三个参数：flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex: 1 ; => flex : 1 1 0%; 表示在分配前不占据主轴空间，根据剩余或缺少的部分等比放大和缩小的项目。

     <!-- 顶部 -->
      <div class="module_box">
        <div style="flex:0 1 30%">
          <dv-decoration-10 style="height:5px;" />
        </div>
        <div style="flex:0 1 40%">
          <div class="d_flex">
            <!-- 三等分，三个同时设置flex:1，平均分配，相当于每等分均分 -->
            <dv-decoration-8 style="width:300px;height:50px; flex:1;" />
            <div style="flex:1;" class="tc box_middle">
              <dv-decoration-11 style="height:60px;">智慧工厂数据中心</dv-decoration-11>
            </div>
            <dv-decoration-8 :reverse="true" style="width:300px;height:50px;flex:1;" />
          </div>
        </div>
        <div style="flex:0 1 30%">
          <dv-decoration-10 style="height:5px; transform:rotate(180deg);" />
        </div>
      </div>

四、DataV结合Echarts图表

4.1、安装依赖包

npm i echarts -S

4.2、导入使用

在 main.js 做全局组件导入

import echarts from 'echarts' // 全局组件导入

组件中引入

<template>
  <!-- 为Echarts 准备一个定义了宽高的 DOM -->
  <!-- <div id="main" style="width: 100%; height: 400px"></div> -->
  <div ref="chart" style="width: 100%; height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts/core';
export default {
  data() {
    return {};
  },
  mounted() {
    this.initCharts();  //绘制图表
  },
  methods: {
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById("main"));
      var myChart = echarts.init(this.$refs.chart);

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>