vue的简单学习_大屏

Posted on by hackdl

一、 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用户名AppDataLocalYarnDataglobalnode_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 一行二等分


  

    
      
      

        

          dv-border-box-1
        

        

          dv-border-box-1

1.4.4 二行二等分

 
      

        

          dv-border-box-1
          dv-border-box-1
        

        

          dv-border-box-1
          dv-border-box-1

1.4.5 三行三分


        

          dv-border-box-1
          dv-border-box-1
        

        

          dv-border-box-1
        

        

          dv-border-box-1
          dv-border-box-1

1.4.6 柱图


		          
		            
		          
 

 # 数据
 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 锥形柱图


          
            
          
 

 #数据,注意图片的导入方式
 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)


        

          
        

        

          

              
              

                智慧大屏

1.4.9 拆分


  

    
        
        
        
        
    
  




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
  }
}

1.4.10 组件变为公共


        

  
  
  export default{
    data() {
        return {
            config: {
                data: [
                    {
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    },
                    {
                        name: '郑州',
                        value: 55
                    },
                    {
                        name: '西峡',
                        value: 98
                    }
                ]
            },

        };
    },
}

1.4.11 数据


    
    

    

        
        
        
    

    

        
        
        
    

    

  
  
  
  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')
                ]
            },
        };
    },
}
  


        

  
  
  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
            },

        };
    },
}

1.5 ECharts

1.5.1 安装

yarn add  echarts -S

1.5.2 准备容器

  1. 准备容器

# vue中需要修改
  1. 初始化

import * as echarts from "e服务器托管网charts"

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);
        }
    }
}

1.6 实时渲染（WebSocket）

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: ♫ 绝境中盛开，一位独立开发者的故事

武汉源创会回归，4月20聊聊大模型” 熬过黑暗的 3 年​ 又是一个阳光明媚的春天来到了，河边的柳树已经发出嫩绿的新芽，万物都在争相复苏。 仔细算来，我这次在北京创业已经整整 3 年了，实在是不敢相信，已经熬过了这么久。 在这漆黑漫长的 3 年里，面对不确定性…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: