wvp-gb28181-project/web_src/src/components/test2.vue

<template>
<div id="test2">
  <div class="timeQuery" style="width: 100%; height: 300px" id="timeQuery">
  </div>
</div>
</template>

<script>

import * as echarts from 'echarts';

export default {
  name: "test2",
  data() {
    return {
    };
  },
  mounted() {
    var base = +new Date("2021-02-02 00:00:00");
    var oneDay = 24 * 3600 * 1000;

    var data = [[base, 10]];

    for (var i = 1; i < 24; i++) {
      var now = new Date(base += oneDay);
      data.push([
        new Date("2021-02-02 " + i+":00:00"), 10
      ]);
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('timeQuery'));
    let option = {

      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'time',
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        show: false,
        splitLine:{show: false},   //去除网格线
        boundaryGap: [0, '100%']
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: 20
      }, {
        start: 0,
        end: 20
      }],
      series: [
        {
          name: '模拟数据',
          type: 'line',
          smooth: false,
          symbol: 'none',
          areaStyle: {},
          data: data
        }
      ]
    };
    // 绘制图表
      myChart.setOption(option);
  },
  methods:{
    getTimeNode(){
      let mine = 20
      let width = document.getElementById("timeQuery").offsetWidth
      if (width/20 > 24){
        return 24
      }else if (width/20 > 12) {
        return 12
      }else if (width/20 > 6) {
        return 6
      }
    },
    hoveEvent(event){
      console.log(2222222)
      console.log(event)
    },
    timeChoose(event){
      console.log(event)
    },
    getDataWidth(item){
      let startTime = new Date(item.startTime);
      let endTime = new Date(item.endTime);
      let result = parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10))
      // console.log(result)
      return parseFloat((endTime.getTime() - startTime.getTime())/(24*60*60*10))
    },
    getDataLeft(item){
      let startTime = new Date(item.startTime);
      let differenceTime = startTime.getTime() - new Date(item.startTime.substr(0,10) + " 00:00:00").getTime()
      let result = differenceTime/(24*60*60*10)
      console.log(differenceTime)
      console.log(result)
      return parseFloat(differenceTime/(24*60*60*10));
    }
  }
}
</script>

<style scoped>
  .timeQuery{
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 20%;
    position: absolute;
  }
  .timeQuery-background{
    height: 16px;
    width: 100%;
    background-color: #ececec;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    box-shadow: #9d9d9d 0px 0px 10px inset;
  }
  .timeQuery-data{
    height: 16px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
  }
  .timeQuery-data-cell{
    height: 10px;
    background-color: #888787;
    position: absolute;
    z-index: 11;
    -webkit-box-shadow: #9d9d9d 0px 0px 10px inset;
    margin-top: 3px;
  }
  .timeQuery-label{
    height: 16px;
    width: 100%;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 0;
    z-index: 11;
  }
  .timeQuery-label-cell{
    height: 16px;
    position: absolute;
    z-index: 12;
    width: 0px;
    border-right: 1px solid #b7b7b7;
  }
  .timeQuery-label-cell-label {
    width: 23px;
    text-align: center;
    height: 18px;
    margin-left: -10px;
    margin-top: -30px;
    color: #444;
  }
  .timeQuery-pointer{
    width: 0px;
    height: 18px;
    position: absolute;
    left: 0;
  }
  .timeQuery-pointer-content{
    width: 0px;
    height: 16px;
    position: absolute;
    border-right: 3px solid #f60303;
    z-index: 14;
  }
  /*.timeQuery-cell:after{*/
  /*  content: "";*/
  /*  height: 14px;*/
  /*  border: 1px solid #e70303;*/
  /*  position: absolute;*/
  /*}*/
</style>