更新记录

1.0.0（2025-06-14） 下载此版本

迷你趋势图发布

平台兼容性

uni-app(4.02)

MgSparkline 组件文档

简介

MgSparkline 是一个轻量级、高性能的迷你趋势图组件，专为 Uniapp 和微信小程序设计。它可以在有限空间内（如列表项）展示数据趋势，支持曲线/折线切换、渐变填充、均线显示等功能。

特性

• 🎨 多种显示模式：支持曲线和折线两种显示方式
• 📊 均线显示：可显示数据平均值虚线
• 🌈 渐变填充：从上到下渐变的填充效果
• 📱 响应式设计：自动适应容器尺寸
• ⚡ 高性能：使用 Canvas2D 渲染，优化移动端性能
• 🛠️ 高度可定制：支持多种自定义参数

使用指南

1、使用组件

<mg-sparkline 
  :data="[30, 40, 35, 60, 50, 70, 65]"
  color="#4dffb8"
  width="80"
  height="40"
  :is-curve="true"
  :show-average-line="true"
  average-line-color="#ffffff"
  :average-line-width="1"
/>

属性参数

使用示例

1. 曲线模式（默认）

<mg-sparkline 
  :data="[30, 40, 35, 60, 50, 70, 65]"
  color="#4dffb8"
  width="80"
  height="40"
  :is-curve="true"
/>

2. 折线模式

<mg-sparkline 
  :data="[50, 45, 40, 35, 30, 25, 20]"
  color="#ff6b6b"
  :is-curve="false"
/>

3. 显示均线

<mg-sparkline 
  :data="[20, 25, 30, 35, 40, 45, 50]"
  color="#4a90e2"
  :show-average-line="true"
  average-line-color="#000000"
  :average-line-width="1.5"
/>

4. 自定义渐变效果

<mg-sparkline 
  :data="[35, 40, 30, 45, 50, 40, 55]"
  color="#ffc107"
  :start-opacity="0.5"
  :end-opacity="0.1"
/>

5. 禁用填充

<mg-sparkline 
  :data="[45, 50, 55, 48, 60, 65, 70]"
  color="#9c27b0"
  :fill="false"
/>

技术说明

曲线/折线实现原理

• 曲线模式：使用二次贝塞尔曲线平滑连接数据点

  ctx.quadraticCurveTo(cpX, y0, cpX, (y0+y1)/2);
  ctx.quadraticCurveTo(cpX, y1, x1, y1);

• 折线模式：使用直线直接连接数据点

  ctx.lineTo(x, y);

均线计算与绘制

// 计算平均值
const sum = data.reduce((acc, val) => acc + val, 0);
const average = sum / data.length;

// 计算均线Y坐标
const avgY = range === 0 
  ? height / 2 
  : height - 5 - ((average - minValue) / range * (height - 10));

// 绘制虚线均线
ctx.setLineDash([3, 2]); // 虚线样式
ctx.moveTo(2, avgY);
ctx.lineTo(width - 2, avgY);
ctx.stroke();

渐变填充实现

// 创建线性渐变
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0, this.hexToRgba(color, startOpacity));
gradient.addColorStop(1, this.hexToRgba(color, endOpacity));

// 应用渐变填充
ctx.fillStyle = gradient;
ctx.fill();

注意事项

1. 微信小程序兼容性
   • 确保微信小程序基础库版本 >= 2.9.0
   • 在微信开发者工具中，开启"ES6 转 ES5"和"增强编译"
2. 数据量建议
   • 建议数据点数量在 5-15 个之间
   • 过多数据点在小尺寸画布上可能显示不清
3. 性能优化
   • 避免频繁更新数据
   • 在列表中使用时，确保组件尺寸不过大
4. 颜色格式
   • 支持十六进制（如 #4dffb8）
   • 支持 RGB（如 rgb(77,255,184)）
   • 支持 RGBA（如 rgba(77,255,184,0.5)）
5. 渲染时机
   • 组件会在 mounted 和 data 变化时自动重绘
   • 手动调用 drawChart() 方法可强制重绘