可视化大屏插件使用笔记

一、数字滚动插件

1、vue-count-to

//1、安装
cnpm install vue-count-to --save
//2、使用
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2021
      }
    }
  }
</script>

2、@huoyu/vue-digitroll（https://github.com/yingtian666/vue-digitroll）

//1、安装
cnpm i -S @huoyu/vue-digitroll  
//2、使用
<DigitRoll :rollDigits="digits" />
<script>
  import DigitRoll from '@huoyu/vue-digitroll';
  export default {
    components: { DigitRoll },
    data () {
      return {
        digits: 123456,
      }
    }
  }
</script>

二、滚屏插件

1、vue-seamless-scroll（https://github.com/chenxuan0000/vue-seamless-scroll） 

//1、安装
cnpm install vue-seamless-scroll --save
//2、使用
<vue-seamless-scroll
                :data="selectMarker.buildAdminList"
                class="seamless-warp"
                :class-option="classOption"
              >
                <div class="list_item" v-for="(item,index) in selectMarker.buildAdminList" :key="index">
                  <div class="item_left">
                    <div class="item_img">
                      <img v-if="item.userImage" :src="item.userImage" alt="">
                    </div>
                  </div>
                  <div class="item_right">
                    <div class="item_info"><i class="iconfont iconuser_selector_post"></i> ：{{item.buildAdminName}}</div>
                    <div class="item_info"><i class="iconfont iconshouji1"></i> ：{{item.buildAdminTel}}</div>
                    <div class="item_info info_des"><i class="iconfont iconquyu"></i> ：{{item.buildAdminAddress}}</div>
                  </div>
                </div>
              </vue-seamless-scroll>
 
import vueSeamlessScroll from 'vue-seamless-scroll'
 components: {
    vueSeamlessScroll,
  },
data(){
    return {
        classOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
  }
}
.seamless-warp{
  width: 100%;
  height: 69.7rem;
  overflow: hidden;
}

四、获取当前时间及天气

<div class="home_little_title">
   <div class="little_title_item">{{ title.time }}</div>
   <div class="little_title_item">周{{ title.week }}</div>
   <div class="little_title_item">{{ title.date }}</div>
   <div class="little_title_item">{{ title.weather }}</div>
   <div class="little_title_item">{{ title.temperature }}</div>
   <div class="little_title_item">{{ title.wind }}</div>
</div>
data(){
    return {
        weekMap: {
        0: "日",
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
      },//星期
      title: {
        time: "",
        week: "",
        date: "",
        temperature: "", //温度
        weather: "", //天气
        wind: "", //风向
      },//天气对象
    }
}

//获取天气
    async getWeather() {
      const res = await this.$http.get(
        "https://tianqiapi.com/api?version=v6&appid=58192418&appsecret=K8vdzO7t"
      );
      if (res.status == 200) {
        this.title.weather = res.data.wea;
        this.title.temperature = `${res.data.tem2}-${res.data.tem1}℃`;
        this.title.wind = res.data.win;
      }
    },
//获取时间
    setTimeLoop() {
      if (this.timeInterval) {
        clearInterval(this.timeInterval);
      }
      const nowDate = new Date();
      this.title.time = dayjs(nowDate).format("hh:mm:ss");
      this.title.week = this.weekMap[nowDate.getDay()];
      this.title.date = dayjs(nowDate).format("YYYY/MM/DD");
      this.timeInterval = setInterval(() => {
        const nowDate = new Date();
        this.title.time = dayjs(nowDate).format("hh:mm:ss");
        this.title.week = this.weekMap[nowDate.getDay()];
        this.title.date = dayjs(nowDate).format("YYYY/MM/DD");
      }, 1000);
    },

五、DataV安装使用（DataV）

//1、安装
npm install @jiaminghi/data-view
//2、使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
//按需加载
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

状态更新

避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里

组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。

六、echarts(Apache ECharts) 

//1、安装
cnpm install echarts -S
//2、使用
在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

7、禁止鼠标选择呈现蓝色样式

 -webkit-user-select: none;  /* 禁止 DIV 中的文本被鼠标选中 */

  -moz-user-select: none;     /* 禁止 DIV 中的文本被鼠标选中 */

  -ms-user-select: none;      /* 禁止 DIV 中的文本被鼠标选中 */

  user-select: none;             /* 禁止 DIV 中的文本被鼠标选中 */

8、数字液晶字体DS-DIGIT

新建font文件夹

将DS-DIGIT.TTF放入，新建dsfont.css

@font-face {
    font-family: 'electronicFont';
    src: url('./DS-DIGIT.TTF');
    font-weight: normal;
    font-style: normal;
  }
  .font_number{
    font-family: "electronicFont"!important;
  }

在main.js中引入

import './assets/font/dsfont.css'

使用

 <countTo
                  class="font_number"
                  :startVal="0"
                  :endVal="chartData.good"
                  :duration="3000"
                ></countTo>