src/components/weekAndDay/uDay.vue

<template>
    <div class="app-uDayBox">
        <div class="theme-card2">
            <div class="title"><span>今日车流量</span></div>
            <div class="content" style="padding: 10px;box-sizing:border-box;padding-left: 0px;">
                <div class="contentBox">
                    <div class="lineChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
import {dayAddress, dayAddressDY} from '../../api/api'
export default {
  name: "uDay",
  data() {
    return {
      name: '进出场折线图',
      lineChart: {},
    }
  },
  /*
   * 进出场折线图
   * */
  mounted() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      // dayAddress({
      //   orgIds: this.GLOBAL.paramsvariables
      // }).then((response)=>{
      //   let  data = response.data.data
      //   let  xData=[],inNum=[],outNum=[]
      //   for(let i=0;i<data.length;i++){
      //     xData.push(data[i].queryDate)
      //     inNum.push(data[i].inNum)
      //     outNum.push(data[i].outNum)
      //   }
      //
      //   this.lineChart=this.createLine(xData,inNum,outNum);
      //   window.addEventListener('resize', function() {
      //     this.lineChart.resize()
      //   }.bind(this));
      // }).catch((response)=>{
      //   console.log(response);
      // })
      this.$axios.all(
        [
          dayAddress({ orgIds: this.GLOBAL.paramsvariables }),
          dayAddressDY({ orgIds: this.GLOBAL.variables })
        ]
      )
      .then(this.$axios.spread((acctWX, acctDY) => {
        let WXdata = acctWX.data.data
        let DYdata = acctDY.data.data
        let xData = [], inNum = [], outNum = []
        // for (let i = 0; i < WXdata.length; i++) {
        //   xData.push(WXdata[i].queryDate)
        //   inNum.push(WXdata[i].inNum + DYdata[i].inNum)
        //   outNum.push(WXdata[i].outNum + DYdata[i].outNum)
        //   //lastInNum = WXdata[WXdata.length-1].inNum+DYdata[WXdata.length-1].inNum
        // }
        for (let i = 0; i < WXdata.length; i++) {
          xData.push(WXdata[i].queryDate)
          inNum.push(WXdata[i].inNum )
          outNum.push(WXdata[i].outNum )
          //lastInNum = WXdata[WXdata.length-1].inNum+DYdata[WXdata.length-1].inNum
        }
        this.weekChart = this.createLine(xData, inNum, outNum);
        window.addEventListener('resize', function () {
          this.weekChart.resize()
        }.bind(this));
      }))
    },
    createLine(xAxis_data, series_in, series_out) {
      // 基于准备好的dom，初始化echarts实例
      let lineChart = echarts.init(document.querySelector('.lineChart'));
      let axisLineColor = "#10377c";
      let axisLabelColor = "#7c8799";
      let legend_data = ['进场', '出场'];
      // let xAxis_data=['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'];
      // let series_in=[220, 182, 191, 134, 150, 120,100];
      // let series_out=[120, 82, 125, 145, 122, 191,150];
      const option = {
        grid: {
          top: 13, left: 10,
          right: 10, bottom: 20,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#072d6e',
              fontSize: 12,
            }
          },
          formatter: this._formatTooltip
        },
        legend: {
          itemWidth: 15, itemHeight: 8,
          itemGap: 13,
          data: legend_data, bottom: 0,
          textStyle: { fontSize: 12, color: '#59AAF7' }
        },
        xAxis: [{
          type: "category",
          boundaryGap: true,
          axisTick: { show: false },
          axisLine: {
            lineStyle: { color: axisLineColor }
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: axisLabelColor, fontSize: 12
            }
          },
          splitLine: {
            lineStyle: { color: '#57617B' }
          },
          data: xAxis_data
        }],
        yAxis: [{
          type: 'value',
          //name: '单位（%）',
          axisTick: { show: false },
          axisLine: { lineStyle: { color: axisLineColor } },
          axisLabel: {
            margin: 5,
            textStyle: { color: axisLabelColor, fontSize: 12 }
          },
          splitLine: { lineStyle: { color: '#10377c' } }
        }],
        series: [
          {
            name: '进场', type: 'line', symbol: 'circle', symbolSize: 5,
            // smooth: true,// showSymbol: false,
            lineStyle: { normal: { width: 0.8 } },
            itemStyle: {
              normal: {
                color: 'rgb(255,177,48)',
                borderColor: 'rgba(216,152,57,0.17)',
                borderWidth: 8
              }
            },
            data: series_in//[220, 182, 191, 134, 150, 120]
          },
          {
            name: '出场', type: 'line', symbol: 'circle', symbolSize: 5,
            // showSymbol: false, // smooth: true,
            lineStyle: { normal: { width: 0.8 } },
            itemStyle: {
              normal: {
                color: 'rgb(8,185,252)',
                borderColor: 'rgba(8,185,252,0.2)',
                borderWidth: 8
              }
            },
            data: series_out
          }
        ]
      };
      lineChart.setOption(option);
      return lineChart;
    },
    _formatTooltip: function (ticket, html) {
      //debugger;
      let tmpHtml = ticket[0].name;
      for (let i = 0; i < ticket.length; i++) {
        let tmpObj = ticket[i];
        tmpHtml += "<br />" + tmpObj.seriesName + " : " + tmpObj.data + " (辆)";
      }
      return tmpHtml;
    }
  },
}
</script>
<style scoped lang="scss">
    .app-uDayBox {
        width: 100%;
        .theme-card2 {
            height: 100%;
        }
        .lineChart {
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .contentBox {
            background: url(../../images/com/border.svg) no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
            position: relative;
        }
    }
</style>