vue的简单学习_大屏

一、 vue-cli的配置

1.1 vue-cli的安装

npm install -g @vue/cli
# 或
yarn global add @vue/cli
# 使用npm install -g @vue/cli安装出现npm warn错误。通过npm install -g yarn 然后使用第二条命令下载。下载后并没有将vue加到环境变量中，需要在c盘中找到路径加到环境变量C:\Users\用户名\AppData\Local\Yarn\Data\global\node_modules\.bin

1.2 查看vue-cli版本

vue	--version/vue -V

1.3 创建项目

# 进入项目目录
vue create 项目名称
#--> 手动设置
#-->选择路由（Router）和Vuex
#-->选择vue2
#-->不适用history模式
#--->添加特定的配置文件
#--->不将项目保存为预设
# 项目的启动
# 进入项目
cd 项目
yarn serve
npm run serve

1.4 DataV（大屏数据展示组件库）

网址：https://datav.jiaminghi.com

1.4.1 安装DataV

# 安装DataV
cnpm i @jiaminghi/data-view -S/yarn add @jiaminghi/data-view -S
# -S:在生产环境下
# -D:在开发环境下
#app.vue ---->main.js设置 ---->路由设置---->views设置

1.4.2 全屏

# 全屏容器
#DataV网站--->全屏容器
# 边框

1.4.3 一行二等分

<template>
  <div class="content bg">
    <dv-full-screen-container>
      <!-- 一行二等分 -->
      <div class="module-box">
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

1.4.4 二行二等分

 <!-- 两行二等分 -->
      <div class="module-box">
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 100px;">dv-border-box-1</dv-border-box-8>
        </div>
      </div>

1.4.5 三行三分

<div class="module-box">
        <div style="flex: 0 1 25%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 400px;">dv-border-box-1</dv-border-box-8>
        </div>
        <div style="flex: 0 1 25%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
          <dv-border-box-8 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-8>
        </div>
      </div>

1.4.6 柱图

<div style="flex: 0 1 50%;">
		          <dv-border-box-8 style="width: 100%;height: 200px;">
		            <dv-capsule-chart :config="config" style="width:100%;height:200px" />
		          </dv-border-box-8>
 </div>
 # 数据
 export default{
  name: 'HomeView',
  data(){
    return{
      config:{
        data: [
              {
                name: '南阳',
                value: 167
              },
              {
                name: '周口',
                value: 67
              },
              {
                name: '漯河',
                value: 123
              },
              {
                name: '郑州',
                value: 55
              },
              {
                name: '西峡',
                value: 98
              }
            ]
      }
    }
  }
}

1.4.7 锥形柱图

<div style="flex: 0 1 50%;">
          <dv-border-box-8 style="width: 100%;height: 200px;">
            <dv-conical-column-chart :config="config1" style="width:100%;height:200px;" />
          </dv-border-box-8>
 </div>
 #数据,注意图片的导入方式
 export default{
  name: 'HomeView',
  data(){
    return{
      config1:{
        data: [
              {
                name: '周口',
                value: 55
              },
              {
                name: '南阳',
                value: 120
              },
              {
                name: '西峡',
                value: 71
              },
              {
                name: '驻马店',
                value: 66
              },
              {
                name: '新乡',
                value: 80
              },
              {
                name: '信阳',
                value: 35
              },
              {
                name: '漯河',
                value: 15
              }
            ],
            img: [
              require('../assets/img/1st.png'),
              require('../assets/img/2st.png'),
              require('../assets/img/3st.png'),
              require('../assets/img/4st.png'),
              require('../assets/img/5st.png'),
              require('../assets/img/6st.png'),
              require('../assets/img/7st.png')
            ]
      }
    }
  }
}

1.4.8 标题

# 装饰
# 镜像transform:rotateY(180deg)
<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">
              <dv-decoration-8 style="height:50px;flex: 1;" />
              <div style="flex: 1;">
                <dv-decoration-11 style="height:60px;">智慧大屏</dv-decoration-11>
              </div>
              <dv-decoration-8 :reverse="true" style="height:50px;flex: 1;" />
          </div>
        </div>
        <div style="flex: 0 1 30%;">
          <dv-decoration-10 style="height:5px;transform: rotateY(180deg);" />
        </div>
      </div>

1.4.9 拆分

<template>
  <div class="content bg">
    <dv-full-screen-container>
        <ModuleTitle />
        <ModuleHeader />
        <ModuleMain />
        <ModuleFooter />
    </dv-full-screen-container>
  </div>
</template>

<script>
import ModuleTitle from "./ModuleTitle.vue"
import ModuleHeader from "./ModuleHeader.vue"
import ModuleMain from "./ModuleMain.vue"
import ModuleFooter from "./ModuleFooter.vue"

export default{
  name: 'HomeView',
  components:{
    ModuleTitle,
    ModuleHeader,
    ModuleMain,
    ModuleFooter
  }
}
</script>

1.4.10 组件变为公共

<template>
        <dv-capsule-chart :config="config" style="width:100%;height:200px" />
</template>
  
  <script>
  export default{
    data() {
        return {
            config: {
                data: [
                    {
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    },
                    {
                        name: '郑州',
                        value: 55
                    },
                    {
                        name: '西峡',
                        value: 98
                    }
                ]
            },

        };
    },
}
</script>

1.4.11 数据

<template>
    <!-- 一行二等分 -->
    <div class="module-box">
    <div style="flex: 0 1 50%;">
        <dv-border-box-8 style="width: 100%;height: 200px;">
        <CapsuleChart :data-chart="items"/>
        </dv-border-box-8>
    </div>
    <div style="flex: 0 1 50%;">
        <dv-border-box-8 style="width: 100%;height: 200px;">
        <dv-conical-column-chart :config="config1" style="width:100%;height:200px;" />
        </dv-border-box-8>
    </div>
    </div>
  </template>
  
  <script>
  import CapsuleChart from './CapsuleChart.vue';
  export default{
    components: {
        CapsuleChart
    },
    data() {
        return {
            items:[
              {
                  name: '一月',
                  value: 167
              },
              {
                  name: '二月',
                  value: 67
              },
              {
                  name: '三月',
                  value: 123
              },
              {
                  name: '四月',
                  value: 55
              },
              {
                  name: '五月',
                  value: 98
              }
            ],
            config1: {
                data: [
                    {
                        name: '周口',
                        value: 55
                    },
                    {
                        name: '南阳',
                        value: 120
                    },
                    {
                        name: '西峡',
                        value: 71
                    },
                    {
                        name: '驻马店',
                        value: 66
                    },
                    {
                        name: '新乡',
                        value: 80
                    },
                    {
                        name: '信阳',
                        value: 35
                    },
                    {
                        name: '漯河',
                        value: 15
                    }
                ],
                img: [
                    require('../assets/img/1st.png'),
                    require('../assets/img/2st.png'),
                    require('../assets/img/3st.png'),
                    require('../assets/img/4st.png'),
                    require('../assets/img/5st.png'),
                    require('../assets/img/6st.png'),
                    require('../assets/img/7st.png')
                ]
            },
        };
    },
}
  </script>

<template>
        <dv-capsule-chart :config="config" style="width:100%;height:200px" />
</template>
  
  <script>
  export default{
    props:{
        colorsChart:{
            type:Array,
            default:()=>['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']
        },
        dataChart:{
            type:Array,
            default:()=>[
                {
                    name: '南阳',
                    value: 167
                },
                {
                    name: '周口',
                    value: 67
                },
                {
                    name: '漯河',
                    value: 123
                },
                {
                    name: '郑州',
                    value: 55
                },
                {
                    name: '西峡',
                    value: 98
                }
            ]
        }
    },
    data() {
        return {
            config: {
                data: this.dataChart,
                colors:this.colorsChart,
                unit:"单位",
                showValue:true
            },

        };
    },
}
</script>

1.5 ECharts

1.5.1 安装

yarn add  echarts -S

1.5.2 准备容器

1. 准备容器

   # vue中需要修改 <template>
   </template>

2. 初始化

   <script> import * as echarts from "echarts"

   export default{
   data(){
   return{

        }
    },
    // 生命周期，钩子函数
    mounted(){
        this.initChart();
    },
    methods:{
        initChart(){
            // 基于准备好的dom，初始化echarts实例
            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>

1.6 实时渲染（WebSocket）

1. 服务端向客户端推送消息，http要由客户端（浏览器）主动发起；即时通信，实时数据，订阅推送