ahyd_DIB/pages/nationalPage/testPage.vue

<template>
  <div class="main">
    <div class="img" :style="{left:allScreen?'100%':'0%'}" @click="handleShowAllScreen">
      <qiunDataCharts
          type="area"
          :opts="opts"
          :chartData="res"
          :animation="false"
          :canvas2d="true"
          :inScrollView="true"
          tooltipFormat="entryCarNumber"
          :ontouch="true"
      />
    </div>

    <div class="allScreen" :style="{left:allScreen?'0%':'100%'}"  @click="handleShowAllScreen">
      <qiunDataCharts
          type="area"
          :opts="opts2"
          :chartData="res"
          :animation="false"
          tooltipFormat="entryCarNumber"
          :ontouch="true"
      />
    </div>
  </div>
</template>
<script>
import qiunDataCharts from "./components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import request from '@/util/index.js'
export default {
  components: {qiunDataCharts},
  data() {
    return {
      opts:{},
      opts2:{},
      res:{},
      allScreen:false
    }
  },
  onLoad(){




    this.handleGetData()
  },
  methods:{
    async handleGetData(){
      uni.showLoading({
        title: '正在加载...'
      })
      const req = {
        pushProvinceCode:'340000',
        StatisticsDate:'2024-02-01',
        holidayType: 2,
        curYear:2024,
        compareYear:2023,
      }
      const data = await request.$webGet('CommercialApi/Revenue/GetHolidayCompare',req)
      console.log('data',data)
      let dateList = []
      let dataObj = data.Result_Data
      let allDateList = ''
      dataObj.compareList.forEach(item=>{
        const date = new Date(item.name)
        let m = date.getMonth() + 1
        let d = date.getDate()
        let dateText = `${m}.${d}`
        item.easyDate = dateText
        if (allDateList.indexOf(dateText)===-1){
          if (allDateList){
            allDateList+=`,${dateText}`
          }else{
            allDateList = dateText
          }
        }
      })
      dataObj.curList.forEach(item=>{
        const date = new Date(item.name)
        let m = date.getMonth() + 1
        let d = date.getDate()
        let dateText = `${m}.${d}`
        item.easyDate = dateText
        if (allDateList.indexOf(dateText)===-1){
          if (allDateList){
            allDateList+=`,${dateText}`
          }else{
            allDateList = dateText
          }
        }
      })

      allDateList = allDateList.split(',')
      dateList = allDateList
      console.log('dateList',dateList)
      console.log('dataObj.compareList',dataObj.compareList)
      console.log('dataObj.curList',dataObj.curList)
      let max = 0
      let compareList = []
      let realCompareList = []

      let curListList = []
      let realCurList = []

      dataObj.compareList.forEach(item=>{
        const date = new Date(item.name)
        let m = date.getMonth() + 1
        let d = date.getDate()
        let dateText = `${m}.${d}`
        item.easyDate = dateText
        if (allDateList.indexOf(dateText)===-1){
          if (allDateList){
            allDateList+=`,${dateText}`
          }else{
            allDateList = dateText
          }
        }
      })
      dataObj.curList.forEach(item=>{
        const date = new Date(item.name)
        let m = date.getMonth() + 1
        let d = date.getDate()
        let dateText = `${m}.${d}`
        item.easyDate = dateText
        if (allDateList.indexOf(dateText)===-1){
          if (allDateList){
            allDateList+=`,${dateText}`
          }else{
            allDateList = dateText
          }
        }
      })


      allDateList.forEach(item=>{
        let beforeValue = dataObj.compareList.filter(filter=> filter.easyDate === item)[0]
        beforeValue = beforeValue?beforeValue.value:null
        if (beforeValue){
          if (Number(beforeValue) / 10000 > max){
            max = Number(beforeValue) / 10000
          }
          compareList.push(Number(beforeValue) / 10000)
          realCompareList.push(Number(beforeValue))
        }
        else{
          compareList.push(0)
          realCompareList.push(0)
        }

        let compareValue = dataObj.curList.filter(filter=> filter.easyDate === item)[0]
        compareValue = compareValue?compareValue.value:null
        if (compareValue){
          if (Number(compareValue) / 10000 > max){
            max = Number(compareValue) / 10000
          }
          curListList.push(Number(compareValue) / 10000)
          realCurList.push(Number(compareValue))
        }else{
          curListList.push(0)
          realCurList.push(0)
        }
      })

      let res = {
        categories: dateList,
        series:[
          {
            name:`24年`,
            data:curListList,
            real:realCurList,
          },
          {
            name:`23年`,
            data:compareList,
            real:realCompareList,
          },
        ],
        max:Number(max.toFixed(2)),
      }
      console.log('res',res)
      this.res = res

      this.opts = {
        categories: res.categories,
        series: res.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        enableScroll: true,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 15, 5, 5],
        dataLabel: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'

        },
        xAxis: {
          disableGrid: true,
          itemCount: 7
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:4,
          data: [
            {
              min: 0,
              max:res.max
            }
          ]
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      }


      let phoneInfo = uni.getStorageSync('phoneInfo')
      console.log('phoneInfo',phoneInfo)
      this.opts2 = {
        // width:phoneInfo.screenHeight+'px',
        // height:(2*phoneInfo.screenWidth)+'px',
        categories: res.categories,
        series: res.series,
        animation: false,
        rotate: true,
        rotateLock: false,
        enableScroll: true,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 15, 5, 5],
        dataLabel: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'

        },
        xAxis: {
          disableGrid: true,
          itemCount: 10
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:4,
          data: [
            {
              min: 0,
              max:res.max
            }
          ]
        },
        extra: {
          area: {
            type: "curve",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: true,
            activeType: "hollow"
          }
        }
      }
      uni.hideLoading()
    },
    handleShowAllScreen(){
      this.allScreen = !this.allScreen
    }
  }
}
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  .img{
    position: fixed;
    top: 0;
  }
  .allScreen{
    position: fixed;
    top: 0;
    width: 100vh;
    height: 100vh;
  }
}
</style>