文章目录
前言
本文介绍一个基于 Vue 框架的小程序图表组件开发方案。该组件通过 uCharts
库实现折线图的绘制,并支持滚动、缩放、触摸提示等交互功能。文章将从代码结构、核心方法、交互实现和样式设计等方面进行详细解析。
一、组件功能概述
该组件实现了以下核心功能:
- 动态折线图绘制
- 图表滚动交互
- 双指缩放功能
- 数据点提示框
- 响应式布局适配
二、代码结构分析
2.1 模板结构
vue
<template>
<canvas
canvas-id="chart"
id="chart"
@touchstart="touchstart"
@touchmove="touchmove"
class="charts"
@touchend="touchend"
/>
</template>
<script>
import uCharts from '@/js_sdk/u-charts.js'
var uChartsInstance = {}
export default {
data() {
return {
cWidth: 750,
cHeight: 900,
options: {}
}
},
onReady() {
this.cWidth = uni.upx2px(750)
this.cHeight = uni.upx2px(900)
},
methods: {
generateData(data) {
if (!data) {
console.error('数据未提供,请传入有效的数据对象。');
return;
}
this.drawCharts('chart', data);
},
drawCharts(id, data) {
try {
const min = this.getMin(data.series);
const ctx = uni.createCanvasContext(id, this);
const chartOptions = {
type: 'line',
context: ctx,
width: this.cWidth,
height: this.cHeight,
categories: data.categories,
series: data.series,
animation: true,
touchMoveLimit: 24,
background: '#FFFFFF',
enableScroll: true,
scrollPosition: 'current',
padding: [15, 15, 0, 5],
legend: {},
dataLabel: false,
xAxis: {
disableGrid: true,
scrollShow: true,
itemCount: 4,
labelCount: 2,
formatter: (value) => {
const [a, b] = value.split(' ');
return b.split(':').slice(0, 2).join(':');
}
},
yAxis: {
data: [{ min }]
},
extra: {
line: {
type: 'straight',
width: 2,
activeType: 'hollow'
},
tooltip: {
showCategory: true
}
}
};
uChartsInstance[id] = new uCharts(chartOptions);
} catch (error) {
console.error('绘制图表时发生错误:', error);
}
},
getMin(series) {
let min = Infinity;
series.forEach(item => {
item.data.forEach(value => {
if (value < min) {
min = value;
}
});
});
return min;
},
touchstart(e) {
if (uChartsInstance[e.target.id]) {
uChartsInstance[e.target.id].scrollStart(e);
}
},
touchmove(e) {
if (uChartsInstance[e.target.id]) {
uChartsInstance[e.target.id].scroll(e);
uChartsInstance[e.target.id].dobuleZoom(e);
}
},
touchend(e) {
if (uChartsInstance[e.target.id]) {
uChartsInstance[e.target.id].scrollEnd(e);
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
}
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
background: #fff;
}
</style>
<style lang="scss" scoped>
.charts {
width: 750rpx;
height: 900rpx;
}
</style>
总结
本文仅仅简单介绍了ucharts在uniapp微信小程序中的使用。