vue大屏监控

vue 实现大屏监控样式如下所示：vue大屏监控主要包括以下一些内容：本次大屏监控页面包括三张图：两张柱状图、一张折线图页面美化：引入DataV组件，用于大屏监控页面增加边框、装饰等注意父子组件之间的彼此通信方法以下代码顺序为：./components/下两个柱状图和一张折线图的代码；最后是screenMonitor父组件应用前述子组件代码<template><div ref="

石页的橙橙

2851人浏览 · 2021-10-25 11:28:45

石页的橙橙 · 2021-10-25 11:28:45 发布

vue 实现大屏监控

DataV介绍：DataV

样式如下所示：
在这里插入图片描述
vue大屏监控主要包括以下一些内容：

本次大屏监控页面包括三张图：两张柱状图、一张折线图
页面美化：引入DataV组件，用于大屏监控页面增加边框、装饰等
注意父子组件之间的彼此通信方法

以下代码顺序为：./components/下两个柱状图和一张折线图的代码；最后是screenMonitor父组件应用前述子组件代码

<template>
  <div ref="BarChart" style="height: 250%; width: 100%"/>
</template>

<script>
import echarts from 'echarts';

export default {
  props: { //父组件向子组件的传参
    params: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null,
      data: [], //数据
      xData: [], //x轴
      yBarData: [], //y轴
      yLable: [],
      colorStops: [],
      chartLegend: [], //图例
      colorOptions: [ //图例以及柱形图颜色选择
        '#5ba2e4',
        '#f58510',
        '#afa5a5',
        '#facb3d',
        '#0854cf',
        '#48c611',
        '#73fcff'
      ],
      days: this.params.days,
    }
  },
  watch: {
    params(old, newparams) { //监听入参的变化
      this.fetchData()
    }
  },
  mounted() {
    this.fetchData()
    //图的大小自适应
    window.addEventListener('resize',()=>{
      if (this.chart){
        this.chart.resize()
      }
    })
  },
  beforeDestroy() { //实例销毁之前调用
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    fetchData() { //调接口，获取数据, 并初始化柱形图
      this.xData = this.params.dateArray
      this.yLable = ['80','90','10','30','20','50','60']
      this.initData()
      this.initChart()
    },
    initData() {
      this.yBarData = this.yLable
    },
    initChart() {
      this.chart = echarts.init(this.$refs.BarChart)
      this.chart.clear() // 清空当前实例
      let colors = []
      const dom = 200
      const barWidth = dom / 20
      for (let i = 0; i < 4; i++) {
        colors.push({
          // type: 'linear',
          // x: 0,
          // x2: 1,
          // y: 0,
          // y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#73fcff' // 最左边
            }, {
              offset: 0.5,
              color: '#86eef1' // 左边的右边 颜色
            }, {
              offset: 0.5,
              color: '#5ad6d9' // 右边的左边 颜色
            }, {
              offset: 1,
              color: '#3dc8ca'
            }]
        })
      }
      this.chart.setOption({
        backgroundColor: '#010d3a',
        //提示框
        tooltip: {
          trigger: 'axis',
          formatter: "{b} : {c}",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        /**区域位置*/
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '10%',
        },
        //X轴
        xAxis: [{
          data: this.xData,
          type: 'category',
          show: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)',
              shadowColor: 'rgba(255,255,255,1)',
              // shadowOffsetX: '20'
            },
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 25]
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            fontSize: 10
          }
        }],
        yAxis: {
          show: true,
          splitNumber: 3,
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#075858'
            },
          },
          axisLabel: {
            show: true,
            color: '#FFFFFF',
            margin: 5,
            fontSize: 10
          }
        },
        series: [
          {//数据颜色
            name: '日付费用户数',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#86eef1"
                },
                  {
                    offset: 1,
                    color: "#034881"
                  }
                ])
              }
            },
            label: {
              // show: true,
              position: [barWidth / 2, -(barWidth + 20)],
              color: '#ffffff',
              fontSize: 14,
              fontStyle: 'bold',
              align: 'center'
            },
            data: this.yBarData
          },
        ]
      }, true)
    }
  }
}
</script>

<style scoped>

</style>

<template>
  <div ref="BarChart1" style="height: 250%; width: 100%"/>
</template>

<script>
import echarts from 'echarts';

export default {
  props: { //父组件向子组件的传参
    params: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null,
      data: [], //数据
      xData: [], //x轴
      yBarData: [], //y轴
      yLable: [],
      colorStops: [],
      chartLegend: [], //图例
      colorOptions: [ //图例以及柱形图颜色选择
        '#5ba2e4',
        '#f58510',
        '#afa5a5',
        '#facb3d',
        '#0854cf',
        '#48c611',
        '#73fcff'
      ],
      days: this.params.days,
      // dateArray: []
    }
  },
  watch: {
    params(old, newparams) { //监听入参的变化
      this.fetchData()
    }
  },
  mounted() {
    // this.getTimeSeries()
    this.fetchData()
    //图的大小自适应
    window.addEventListener('resize',()=>{
      if (this.chart){
        this.chart.resize()
      }
    })
  },
  beforeDestroy() { //实例销毁之前调用
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    fetchData() { //调接口，获取数据, 并初始化柱形图
      this.xData = this.params.monthArray
      this.yLable = ['10','20','30','40','50','60','70','80','90','100','110','120','130','140']
      this.initData()
      this.initChart()
    },
    initData() {
      this.yBarData = this.yLable
    },
    initChart() {
      this.chart = echarts.init(this.$refs.BarChart1)
      this.chart.clear() // 清空当前实例
      let colors = []
      const dom = 200
      const barWidth = dom / 20
      for (let i = 0; i < 4; i++) {
        colors.push({
          // type: 'linear',
          // x: 0,
          // x2: 1,
          // y: 0,
          // y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#73fcff' // 最左边
            }, {
              offset: 0.5,
              color: '#86eef1' // 左边的右边 颜色
            }, {
              offset: 0.5,
              color: '#5ad6d9' // 右边的左边 颜色
            }, {
              offset: 1,
              color: '#3dc8ca'
            }]
        })
      }
      this.chart.setOption({
        backgroundColor: '#010d3a',
        //提示框
        tooltip: {
          trigger: 'axis',
          formatter: "{b} : {c}",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        /**区域位置*/
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '10%',
        },
        //X轴
        xAxis: [{
          data: this.xData,
          type: 'category',
          show: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)',
              shadowColor: 'rgba(255,255,255,1)',
              // shadowOffsetX: '20'
            },
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 25]
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            fontSize: 10
          }
        }],
        yAxis: {
          show: true,
          splitNumber: 3,
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#075858'
            },
          },
          axisLabel: {
            show: true,
            color: '#FFFFFF',
            margin: -8,
            fontSize: 10
          }
        },
        series: [
          {//数据颜色
            name: '日付费用户数',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#86eef1"
                },
                  {
                    offset: 1,
                    color: "#034881"
                  }
                ])
              }
            },
            label: {
              // show: true,
              position: [barWidth / 2, -(barWidth + 20)],
              color: '#ffffff',
              fontSize: 14,
              fontStyle: 'bold',
              align: 'center'
            },
            data: this.yBarData
          }
        ]
      }, true)
    }
  }
}
</script>

<template>
  <div ref="LineChart" style="height: 300%; width: 90%; margin-left: 30px"/>
</template>

<script>
import echarts from 'echarts'

export default {
  props: { //父组件向子组件的传参
    params: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null,
      data: [], //数据
      xData: [], //x轴
      yBarData: [], //y轴
      yBarData1: [], //y轴
      yLable1: [],
      yLable: [],
      yBarData1: [],
      colorStops: [],
      chartLegend: [], //图例
      colorOptions: [ //图例以及柱形图颜色选择
        '#5ba2e4',
        '#f58510',
        '#afa5a5',
        '#facb3d',
        '#0854cf',
        '#48c611',
        '#73fcff'
      ]
    }
  },
  watch: {
    params(old, newparams) { //监听入参的变化
      // this.getChartLegend()
      this.fetchData()
    }
  },
  mounted() { //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子,一般用于子组件
    this.fetchData()
    //图的大小自适应
    window.addEventListener('resize',()=>{
      if (this.chart){
        this.chart.resize()
      }
    })
  },
  beforeDestroy() { //实例销毁之前调用
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    fetchData() { //调接口，获取数据, 并初始化柱形图
      this.yLable = ['1.25','0.97','0.76','0.86','0.86','0.45','0.6','0.3','0.1','0.6','0.4','0.9']
      this.yLable1 = ['1.15','0.93','0.75','0.80','0.89','0.42','0.8','0.67','0.9','0.8','0.65','0.4']
      this.xData = this.params.monthArray
      this.initData()
      this.initChart()
      // 方法2 根据返回的数据获取日期 从而设置图例
      this.chartLegend = []
      const dateArr = []
      this.yLable.forEach((item, index) => {
        if (item !== null && item !== undefined) {
          dateArr.push(this.yLable[index])
        }
      })
      this.chartLegend = dateArr
      this.initData()
      this.initChart()
    },

    initData() {

      this.yBarData = this.yLable
      this.yBarData1 = this.yLable1
    },
    initChart() {
      this.chart = echarts.init(this.$refs.LineChart)
      this.chart.clear() // 清空当前实例

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 13,
          // top: '40',
          data: [ 'ARPPU', 'ARPU'],
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: '#ACCFFF'
          }
        },
        grid: {
          left: '15%',
          right: '10%',
          bottom: '10%',
          top: '40',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#344B83'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#ACCFFF'
            }
          },
          data:this.xData
        }],
        yAxis: [{
          type: 'value',
          splitNumber: 4,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#ACCFFF'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#344B83'
            }
          }
        }],
        series: [{
          name: 'ARPPU',
          type: 'line',
          // smooth: true,
          itemStyle: {
            normal: {
              color: '#3769F4',
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(65,225,255,0)'
                }, {
                  offset: 1,
                  color: 'rgba(65,225,255,0.6)'
                }]),
              }
            }
          },
          data: this.yBarData1
        }, {
          name: 'ARPU',
          type: 'line',
          // smooth: true,
          itemStyle: {
            normal: {
              color: '#55D5B5',
              areaStyle: {
                //color: '#94C9EC'
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(85,213,181,0)'
                }, {
                  offset: 1,
                  color: 'rgba(85,213,181,0.6)'
                }]),
              }
            }
          },
          data: this.yBarData
        }]
      }, true)
    }
  }
}
</script>

<template>
  <div class="all">
    <div align="center" style="margin-top: 20px">
      <el-button align="center" type="text" v-model="carrierName"
                 v-for="item in carrierSelect" :key="item" :label="item" :value="item"
                 :style="{'color': carrierName === item ? '#73fcff': 'grey'}"
                 @click="handleCarrier(item)">
        {{item}}
      </el-button>
      <dv-decoration-10 style="width:600px;height:5px;" />
    </div>
    <div  style="margin-bottom: 20px">
      <div class="numberOfDailyFees" >
        <div >
          <dv-border-box-1 backgroundColor="#010d3a">
            <dv-decoration-7 style="width:100%;height:30px;">
              <span class="datashow" style="color: #73fcff;font-size: 20px;font-weight: bold">日付费用户数</span>
              <el-button class="datashow"  type="text" @click="handleWeek" :style="{'color':days === 7 ? '#73fcff':'grey' }" >近7天</el-button>
              <el-button class="datashow" type="text" @click="handleMonth" :style="{'color':days === 30 ? '#73fcff':'grey' }">近30天</el-button>
            </dv-decoration-7>
            <div>
              <bar-chart :params="paramsProps" style="margin-top: 10px" @trans-data-sum="dataSumTransform"/>
            </div>
          </dv-border-box-1>
        </div>
      </div>
      <div class="numberOfDailyFees"  >
        <div class="monthDv">
          <dv-border-box-1  backgroundColor="#010d3a" >
            <dv-decoration-7 style="width:100%;height:30px;">
              <span class="datashow" style="color: #73fcff;font-size: 20px;font-weight: bold">月用户付费次数</span>
              <el-button class="datashow" type="text"  :style="{'color':'#73fcff' }">{{carrierName}}</el-button>
            </dv-decoration-7>
            <div>
              <bar-chart1 :params="paramsPropsMonth" style="margin-top: 10px" @trans-data-sum1="dataSumTransform1"/>
            </div>
          </dv-border-box-1>
        </div>
      </div>
    </div>
    <div  >
      <dv-border-box-8   backgroundColor="#010d3a" style="width: 95%;margin-left: 25px">
        <div style="margin-top: 400px">
          <span class="dataShowBottom" style="color: #73fcff;font-size: 20px;font-weight: bold"></span>
          <br>
          <span class="dataShowBottom" style="color: #73fcff;font-size: 20px;font-weight: bold">ARPPU & ARPU</span>
        </div>
        <line-chart :params="paramsPropsArppu" />
      </dv-border-box-8>
    </div>
  </div>
</template>

<script>
import barChart from "./components/screenMonitorBarChart"
import barChart1 from './components/screenMonitorBarChart1'
import lineChart from "./components/screenMonitorLineChart"

const params = {
  'days': '','carriers': '',
  'dateArray': []
}

const monthParams = {
  'carriers': '',
  'monthArray': []
}

const arppuParams = {
  'carriers': '',
  'monthArray': []
}

export default {
  name: 'barchart',
  components: { barChart , barChart1, lineChart },
  data() {
    return {
      days: 7,
      dataSum: 0,
      dataSum1: 0,
      carrierName: '天津',
      carrierCode: '',
      optionsDays: ['近7天','近30天'],
      carrierSelect: ["黑龙江",'辽宁','贵州','福建','湖北','河南','河北','山西','山东','天津','吉林','北京','内蒙古','云南'],
      dateArray: [],
      monthArray: [],
      paramsProps: Object.assign({},params),
      paramsPropsMonth: Object.assign({},monthParams),
      paramsPropsArppu: Object.assign({},arppuParams)
    }
  },
  mounted(){
    this.getTimeSeries()
    this.getMonthSeries()
    //子组件向父组件的传递
    this.paramsProps = {
      'days': this.days,
      'carriers': carriersAll[this.carrierName],
      'dateArray': this.dateArray
    }
    this.paramsPropsMonth = {
      'carriers': carriersAll[this.carrierName],
      'monthArray': this.monthArray
    }
    this.paramsPropsArppu = {
      'carriers': carriersAll[this.carrierName],
      'monthArray': this.monthArray
    }
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%;  background:#010d3a; height: 100%;');
  },
  beforeDestroy() {
    document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%;  background:white; height: 100%;');
  },
  methods: {
    getTimeSeries() {
      var myDate = new Date() // 获取今天日期
      myDate.setDate(myDate.getDate() - (this.days))
      console.log(this.days)
      var dateTemp
      var flag = 1
      this.dateArray = []
      for (var i = 0; i < this.days; i++) {
        dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate()
        this.dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
      }
    },
    getMonthSeries() {
      var dataArr = [];
      var data = new Date();
      var year = data.getFullYear();
      data.setMonth(data.getMonth()+1, 1)//获取到当前月份,设置月份
      for (var i = 0; i < 12; i++) {
        data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
        var m = data.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        dataArr.unshift(year + m.toString())
      }
      console.log('月')
      console.log(dataArr)
      this.monthArray = dataArr
      console.log(this.monthArray)
    },
    handleWeek() {
      this.days = 7
      this.getTimeSeries()
      this.paramsProps = {
        'days': this.days,
        'carriers': carriersAll[this.carrierName],
        'dateArray': this.dateArray
      }
    },
    handleMonth() {
      this.days = 30
      this.getTimeSeries()
      this.paramsProps = {
        'days': this.days,
        'carriers': carriersAll[this.carrierName],
        'dateArray': this.dateArray
      }
    },
    handleCarrier(item){
      this.carrierName = item
      console.log(this.carrierName)
      this.paramsProps = {
        'days': this.days,
        'carriers': carriersAll[this.carrierName],
        'dateArray': this.dateArray
      }
      this.paramsPropsMonth = {
        'carriers': carriersAll[this.carrierName],
        'monthArray': this.monthArray
      }
      this.paramsPropsArppu = {
        'carriers': carriersAll[this.carrierName],
        'monthArray': this.monthArray
      }
    },
    dataSumTransform(data){
      this.dataSum = data
    },
    dataSumTransform1(data){
      this.dataSum1 = data
    }
  }
}
</script>
<style>
.all{
  /*position: fixed;*/
  /*background-color: #010d3a !important;*/
  /*background: -webkit-linear-gradient(bottom,#010d3a,#409EFF,white) no-repeat;*/
  height: 100%;
  /*width: 100%;*/
  padding-left: 0px;
}
.buttonSelect{
  margin-left: 20px;
  margin-top: 15px;
  font-size: large;
  margin: 0;
}
.buttonSelectCarrier{
  margin-left: 55px;
  /*margin-top: 15px;*/
  font-size: large;
  /*margin: 0;*/
}
.datashow{
  margin-left:20px;
  margin-right: 20px;
}
.dataShowBottom{
  margin:10%;
  margin-left: 30px;
  margin-top: 15px;
  font-size: small;
  /*margin: 0;*/
}
.numberOfDailyFees{
  background-color: #010d3a;
  float: left;
  margin-top: 30px;
  padding-left: 10px;
  width: 50%;
}
.dv-border-box-1 .left-bottom{
  bottom: 0px;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  top: 200px;
}
.dv-border-box-1 .right-bottom {
  right: 20px;
  bottom: 0px;
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  transform: rotateX(180deg) rotateY(180deg);
  top: 200px;
}
.dv-border-box-1 .right-top {
  right: 20px;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.monthDv .dv-border-box-1 .left-bottom {
  bottom: 0px;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  top: 200px;
  /*right: 41%;*/
}
.monthDv .dv-border-box-1 .left-top {
  /*right: 41%;*/
  /*position: absolute;*/
  display: block;
}
</style>

以上需要注意的是：

父子组件通信：父组件向子组件进行通信，按照props进行传递；子组件向父组件通信使用this.$emit进行传递
DataV组件的style布局：可在前端页面element中进行调整，将调整结果复制至代码即可
数据条颜色渐变：可使用new echarts.graphic.LinearGradient

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...