jy2024-ui/src/views/index/widget/healthTendency.vue

<template>
  <div class="content-chart-row health-t">
    <div class="column-row-title">
      <span class="title-text">
        <img src="@/assets/images/title-icon.png" alt=""/>应用健康趋势
      </span>
      <div>
        <el-select v-model="dateType" size="small" style="width: 60px" @change="changeDate">
          <el-option v-for="item in monthDay"  :label="item" :value="item" />
        </el-select>
        <el-date-picker v-model="dateValue" :type="pickerType"  size="small" style="width: 120px;margin-left:10px;" @change="changeDate"/>
      </div>
    </div>
    <div class="column-content chart-content">
      <div ref="chartSort" style="height: 238px" />
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import {parseTime} from "@/utils/ruoyi"
import {hlMonthDay} from "@/api/index/hl"
import {onMounted,onUnmounted} from "vue";
const props = defineProps(["refreshTime"])
const today = new Date();
const yesterday = new Date(today);
const interval = ref(null)
yesterday.setDate(today.getDate());
const monthDay = ["按年","按月","按日"]
const dateType = ref("按日")
const dateValue = ref(yesterday)
const chartSort = ref(null)
const pickerType = ref("data")
onMounted(()=>{
  changeDate()
  interval.value = setInterval(() => {
    changeDate()
  }, props.refreshTime)
})

onUnmounted(() => {
  clearInterval(interval.value)
})
async function changeDate(){
  if(dateType.value=="按月"){
    const d=parseTime(dateValue.value,"{y}-{m}")
    const res = await hlMonthDay("month",d)
    pickerType.value = "month"
    initChart(res.data)
  }else if(dateType.value=="按日"){
    const d=parseTime(dateValue.value,"{y}-{m}-{d}")
    const res = await hlMonthDay("day",d)
    pickerType.value = "date"
    initChart(res.data)
  }else{
    const d=parseTime(dateValue.value,"{y}")
    pickerType.value = "year"
    const res = await hlMonthDay("year",d)
    initChart(res.data)
  }
}

function initChart(res) {
  const myChart = echarts.init(chartSort.value);
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: res.map(p=>p.name),
      textStyle: {
        color: "#9FB9E7"
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: res[0].time,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#9FB9E7",
          width: 0,
        }
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: "#9FB9E7",
          width: 0,
        }
      },
      splitLine: {
        lineStyle: {
          color: "#6B8AC080",
          type: 'dashed',
        }
      },
    },
    series:res.map(p=>{
      return {
        name: p.name,
        type: 'line',
        // stack: 'Total',
        smooth: true,
        symbolSize: 0,
        data: p.score
      }
    })
  };
  myChart.setOption(option)
}
</script>