Vue大屏数据实战

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

一、项目环境搭建

        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进行布局,以便于在不同的分辨率下得到较为一致的展示效果。
  • 使用前请注意将bodymargin设为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>

  • 12
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火乐暖阳85105

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值