vue工作记录

大屏适配器

原理scale，使用时直接引用下面的组件，把内容放中间就可以啦，代码如下：

<template>
<div
  :class="ScreenAdapter"
  :style="style"
>
  <slot/>
</div>
</template>
<script>
export default {
 name: '',
 props: {
   width: {
     type: String,
     default: '1920'
   },
   height: {
     type: String,
     default: '1080'
   }
 },
 data() {
   return {
     style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
     }
   }
 },
 mounted() {
    this.setScale();
    window.onresize = this.Debounce(this.setScale, 1000);
 },
 methods() {
    Debounce: (fn, t) => {
      const delay = t || 500;
      let timer;
      return function() {
        const args = arguments
        if(timer) {
          clearTimeout(timer);
        }
        const context = this;
        timer = setTimeout(() => {
          timer = null;
          fn.apply(context, args);
        }, delay)
      }
    },
    //获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width;
      const h = window.innerHeight / this.height;
      return w < h ? w : h;
    },
    //设置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)';
    }
 },
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  right: 50%;
  transition: 0.3s;
  background: rgba(0, 5, 68, 1);
}
</style>

ehcart的渐变圆柱图

代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ['疑似流入', '正常流出', '其他']
  },
  yAxis: {
    type: 'value'  
  },
  series: [
    {
      name: '上椭圆片',
      type: 'pictorialBar',
      symbolSize: [ 40, 6], //40是圆柱的宽度，与下面的宽度要统一
      symbolOffset: [0, -3], //圆片与顶部的距离
      z: 12,
      itemStyle: {
        color: function(params) {
          if (params.name === '疑似流入') {
            //疑似流入就是红色圆柱
            return '#FF1A8A';
          }
          return '#43FBFF'; //蓝色圆柱
        }
      },
      symbolPosition: 'end', //圆片位置
      data: [0, 1, 2],
    },
    {
      name: '下椭圆片',
      type: 'pictorialBar',
      symbolSize: [ 40, 6], //40是圆柱的宽度，与上、下面的宽度要统一
      symbolOffset: [0, 3], //圆片与底部的距离
      z: 12,
      itemStyle: {
        color: function(params) {
          if (params.name === '疑似流入') {
            //疑似流入就是红色圆柱
            return '#CE0237';
          }
          return '#026ACD'; //蓝色圆柱
        }
      },
      symbolPosition: 'end', //圆片位置
      data: [0, 1, 2],
    },
    {
      name: '圆柱',
      type: 'bar',
      barWidth: 40, //40是圆柱的宽度，与上面的宽度要统一
      barCategoryGap: 12,
      data: [0,1,2],
      itemStyle: {
        color: function(params) {
          if (params.name === '疑似流入') {
            //疑似流入就是红色圆柱
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FF013D'
              },
              {
                offset: 1,
                color: '#FE1071'
              }
            ]);
          }
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#0562FF'
              },
              {
                offset: 1,
                color: '#0FAAFF'
              }
            ]); //蓝色圆柱
        }
      },
      label: {
        show: true, //开启显示
        position: 'top', //在圆柱上方显示数字
        textStyle: { //数字样式
          color: '#899DBF',
          fontSize: 12
        }
      }
    }
  ]
}

echart的环形进度条

代码如下：

option = {
  color: ['#339900', '#c9c9c9'], //#339900进度条填充颜色 #c9c9c9剩余环形置灰颜色
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['60%', '75%'], //这里是控制环形的内半径和外半径
    avoidLabelOverlap: false,
    hoverAnimation: false, //控制鼠标放在环上时候的交互
    label: {
      normal: {
        show: true,
        position: 'center',
        textStyle: {
          fontSize: '16',
          fontWeight: 'bold'
        }
      }
    },
    data: [
      {
        value: 20, //显示20%的环
        name: 20,
      }, {
        value: 80, //剩余80%置灰的环
        name: ''
      }
    ]
  }]
};