当前位置：首页 > news >正文

uniapp__微信小程序使用秋云ucharts折线图双轴

news 2025/8/28 15:33:31

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

查看全文

http://www.lryc.cn/news/459104.html