pms-app/pages/realTimeData/chart/index.vue

<template>
  <view class="page">
    <uni-card>
      <view class="charts-box">
        <qiun-data-charts
            type="area"
            :ontouch="true"
            :opts="opts"
            :chartData="chartData"
        />
      </view>
      <uni-section :title="name" />
    </uni-card>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance, reactive, ref } from "vue";
import { getDeviceRealTimeChartData } from "@/api/realTimeData"
import dayjs from "dayjs"

const { appContext } = getCurrentInstance()
const t = appContext.config.globalProperties.$t

const opts = reactive({
  color: ['#0876C3'],
  padding: [15, 10, 0, 25],
  legend: {
    show: false,
  },
  rotate: true,
  rotateLock: true,
  enableScroll: true,
  xAxis: {
    disableGrid: true,
    rotateLabel: true, // 旋转x轴文字
    rotateAngle: 45, // x轴文字旋转角度
    enableScroll: true,
    itemCount: 20,
    marginTop: 5,
    fontColor: '#666666',
    fontSize: 10,
  },
  yAxis: {
    gridColor: '#BABABA',
    gridType: "dash",
    dashLength: 10,
    data: [{
      fontSize: 12,
      fontColor: '#666666',
    }]
  },
  extra: {
    area: {
      type: "curve",
      opacity: 0.8, // 区域图透明度
      addLine: true,
      width: 2,
      gradient: true,
      activeType: "hollow"
    }
  }
})
const chartData = reactive({
  categories: [],
  series: [],
})

const name = ref('')

// 加载图表数据，并转换格式
const loadChartData = async (params) => {
  const source = (await getDeviceRealTimeChartData(params.deviceCode, params.type, {
    beginTime: dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'),
    endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  })).data

  // 1. 提取x轴时间
  const categories = source
      .map(item =>  dayjs(item.timestamp).format('YYYY-MM-DD HH:mm:ss'))
      // .sort((a, b) => new Date(a) - new Date(b)); // 按时间升序排列
  // console.log("🚀 ~ loadChartData ~ categories:", categories)

  // 2. 提取y轴数据
  const seriesData = source.map(item => item?.value ? item.value.toFixed(2) : 0);  // 确保数值为数字，避免 NaN
  // console.log("🚀 ~ loadChartData ~ seriesData:", seriesData)
  chartData.categories = categories
  chartData.series = [{
    name: params.name,
    data: seriesData,
    textColor: '#333333',
    textSize: 10,
  }]
  // console.log(chartData)
}

onLoad((params) => {
  const title = params.name + t('realTimeData.detail.chartTitle')
  name.value = title.split('').join('\n')
  loadChartData(params)
})
</script>

<style scoped lang="scss">
:deep(.uni-card) {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;

  .uni-card__content {
    height: calc(100% - 10px);
    display: flex;
    flex-direction: row;
  }

  .uni-section {
    position: absolute;
    right: -120px;
    top: 100px;
    background-color: transparent;
  }

  .uni-section-header {
    padding-right: 30px;
  }

  .uni-section__content-title {
    font-size: 16px !important;
    color: #333333 !important;
    font-weight: 600;
    writing-mode: vertical-lr;
    transform: rotate(90deg);
    text-align: start;
    line-height: 1.5em;
    padding: 20px 0 !important;
  }
}

.charts-box {
  width: calc(100% - 30px);
  height: 100%;
}
</style>