1、子组件
<template>
<view class="charts-box">
<qiun-data-charts
type="line"
:opts="computedOpts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
props: {
chartData: {
type: Object,
required: true
},
color: {
type: Array,
default: () => ["#1890FF", "#91CB74"]
},
yAxisMax: {
type: Number,
default: 5
},
yAxisMin: {
type: Number,
default: 0
}
},
computed: {
computedOpts() {
// 在这里封装 opts,并根据父组件传入的 props 动态修改
return {
color: this.color, // 使用父组件传入的颜色
padding: [15, 10, 0, 15],
enableScroll: false,
xAxis: {
disableGrid: true,
rotateLabel: true
},
yAxis: {
data: [
{
type: "value",
position: "left",
},
{
type: "value",
position: "right",
min: this.yAxisMin, // 父组件传入的最小值
max: this.yAxisMax // 父组件传入的最大值
}
]
},
extra: {
line: {
type: "straight",
width: 2,
activeType: "hollow"
},
tooltip: {
legendShape: "circle"
}
}
};
}
}
};
</script>
<style scoped>
.charts-box {
width: 715rpx;
height: 300px;
margin-left: -51rpx;
}
</style>
2、父组件
<lineecharts :chartData="chartData" :color="['#1890FF', '#91CB74']" :yAxisMax="10" :yAxisMin="0">
getChartData() {
const startTime = new Date();
let timePoints = [];
for (let i = 0; i < 6; i++) {
const time = new Date(startTime.getTime() + i * 5000);
const formattedTime = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
timePoints.push(formattedTime);
}
setTimeout(() => {
this.chartData = {
categories: timePoints,
series: [{
name: "心率",
data: [35, 8, 25, 37, 4, 20],
index: 0
},
{
name: "呼吸",
data: [2, 4, 3, 1, 4, 1],
index: 1
}
]
};
}, 100);
},
双轴series: [{
name: "心率",
data: [35, 8, 25, 37, 4, 20],
index: 0
},
{
name: "呼吸",
data: [2, 4, 3, 1, 4, 1],
index: 1
}
]数据区分使用index