郑州营销型网站制作策划厦门网站建设平台

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

先从秋云 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>