jy2025-ui/src/views/index/widget/runTendency.vue

<template>
  <div class="content-chart-row">
    <div class="column-row-title">
      <span class="title-text"><img src="@/assets/images/title-icon.png" alt=""/>重点指标运行趋势
        <span class="s-span">(周)</span>
      </span>
      <span class="btn-span" @click="visible=true">指标配置</span>
    </div>
    <div class="column-content chart-content run-tendency">
      <div class="run-title">
        <div v-for="(item,index) in trendData" :class="[`r-t-row`,{'active':index===active}]" @click="clickTrend(index)">
          <div class="r-value">{{item.value.toFixed(1)}}%</div>
          <div>
            <div class="r-obj-name">{{item.objName}}</div>
            <div class="r-obj-metrics-name">{{item.metricsName}}</div>
          </div>
        </div>
      </div>
      <div class="chart-sort" v-if="trendData[active]">
        {{trendData[active].objName || "-"}}
        <div ref="chartSort" style="height: 218px;" />
      </div>
    </div>
  </div>

  <el-dialog title="指标配置" v-model="visible" width="600">
    <index-config @update="getMsTrend"/>
  </el-dialog>

</template>
<script setup lang="ts">
import {msTrend,msTrendDetail} from "@/api/index/hl"
import {formatDate} from "@/utils/index.js"
import indexConfig from "./indexConfig.vue"
import * as echarts from "echarts";
const trendData = ref([])
const active = ref(0)
const chartSort = ref(null)
const visible = ref(false)
onMounted(() => {
  getMsTrend()
})

async function getMsTrend(){
  const res = await msTrend()
  trendData.value = res.data
  await clickTrend(0)
}

async function clickTrend(index){
  active.value = index
  const res = await msTrendDetail(trendData.value[index].objMetricsId)
  initChart(res.data)
}

function initChart(res) {
  const myChart = echarts.init(chartSort.value);
  const option = {
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '5%',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: res.map(p=>formatDate(p.time)),

    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: "#6B8AC080",
          type: 'dashed',
        }
      }
    },
    series: [
      {
        data: res.map(p=>p.value),
        type: 'line',
        symbolSize: 0,
        lineStyle:{
          color:'#61d1fc'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(13,27,154,0.8)'
            },
            {
              offset: 1,
              color: 'rgb(5,11,72)'
            }
          ])
        },
      }
    ]
  }
  myChart.setOption(option)
}

</script>