秋云 ucharts echarts 高性能跨全端图表组件导入

 上边的图表内容为随意填写

先从秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场中安装插件

导入要用的文件中

父组件代码

<template>
  <view class="container">
    <view class="change">
      <view class="header">
        <text class="title">体重趋势</text>
      </view>
      <view class="tabs">
        <button @click="updateInterval(7)" :class="{ active: interval === 7 }">7天</button>
        <button @click="updateInterval(30)" :class="{ active: interval === 30 }">30天</button>
        <button @click="updateInterval(60)" :class="{ active: interval === 60 }">60天</button>
      </view>
      <view class="content">
        <!-- 通过 :chart-data 将数据传递给子组件 -->
        <weight-chart :chart-data="chartData" />
      </view>
    </view>
   </view>
</template>

<script setup>
import { ref } from 'vue';
import WeightChart from '../../components/WeightChart.vue'; // 确保路径正确

const interval = ref(7);
const chartData = ref({});

const updateInterval = (days) => {
  interval.value = days;
  fetchChartData(days);
};

const fetchChartData = (days) => {
  setTimeout(() => {
    const categories = [];
    const series = [];
    for (let i = 0; i < days; i++) {
      categories.push(`第${i + 1}天`);
      series.push(Math.random() * 10 + 35); // 随机生成体温数据
    }
    chartData.value = {
      categories,
      series: [
        {
          name: '体温',
          data: series
        }
      ]
    };
  }, 500);
};

// 初始化图表数据
fetchChartData(interval.value);
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #f8f8f8;
}
.change {
  margin-top: 20px;
  border: none; /* 边框 */
  border-radius: 10px; /* 圆角 */
  background-color: white;
  padding: 10px;
}
.header {
  margin-bottom: 20px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.tabs {
  display: flex;
  margin-bottom: 20px;
  width: 80%;
  font-size: 15px;
  height: 40px;
}
button {
  flex: 1;
  padding: 2px;
  margin-right: 5px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button.active {
  background-color: #007aff;
  color: white;
}
.content {
  width: 100%;
  height: 300px;
  background-color: whitesmoke;
  border-radius: 10px;
  overflow: hidden;
}
</style>

子组件WeightChart.vue静态折线图代码

<template>
  <view class="charts-box">
    <qiun-data-charts type="line" :chart-data="chartData" />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';

const chartData = ref({});

const getServerData = () => {
  setTimeout(() => {
    const res = {
      categories: ['2016', '2017', '2018', '2019', '2020'],
      series: [
        {
          name: '目标值',
          data: [35, 36, 31, 33, 13]
        },
        {
          name: '完成量',
          data: [18, 27, 21, 24, 6]
        }
      ]
    };
    chartData.value = res;
  }, 500);
};

onMounted(() => {
  getServerData();
});
</script>

<style scoped>
.charts-box {
  width: 100%;
  height: 300px;
}
</style>