基于uPlot绘制趋势线的图表

本文由ScriptEcho平台提供技术支持

项目地址：传送门

## 基于uPlot绘制趋势线的图表

应用场景

uPlot是一个轻量级、高性能的图表库，可用于创建交互式、可缩放的图表。本代码演示了如何使用uPlot绘制带趋势线的图表，可用于可视化时间序列数据中的趋势和模式。

基本功能

该代码使用uPlot库创建了一个图表，其中包含三个数据集：

• 数据1：红色曲线，显示随时间变化的随机数据。
• 数据2：蓝色曲线，显示随时间变化的另一个随机数据集。
• 趋势线：黑色虚线，连接数据1和数据2的第一个和最后一个数据点，表示数据的整体趋势。

功能实现步骤

1. 导入依赖项：导入uPlot库和Vue的onMounted钩子。
2. 定义数据：定义三个数据集，其中包括x轴（时间）和y轴（数据）值。
3. 创建uPlot实例：使用uPlot类创建一个uPlot实例，并指定图表选项（如宽度、高度和标题）。
4. 配置x轴：配置x轴以禁用时间轴，并设置x轴缩放范围。
5. 添加趋势线：在hooks选项中添加一个drawSeries钩子，该钩子在绘制每个数据系列后调用。在钩子中，绘制一条连接数据1和数据2第一个和最后一个数据点的趋势线。
6. 定义数据系列：定义三个数据系列，每个系列对应一个数据集。设置数据系列的标签、颜色和填充颜色。
7. 渲染图表：在onMounted钩子中，将uPlot实例和数据传递给图表容器。

关键代码分析

// 导入依赖项
import uPlot from 'uplot'
import { onMounted } from 'vue'

// 定义数据
let data = [
  // x轴数据
  [
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
    21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
    39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74,
    75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92,
    93, 94, 95, 96, 97, 98, 99,
  ],
  // 数据1
  [
    309, 317, 322, 304, 305, 317, 319, 321, 317, 321, 322, 329, 319, 313, 313,
    321, 308, 308, 300, 303, 313, 310, 307, 305, 299, 293, 287, 283, 291, 285,
    281, 269, 276, 261, 263, 274, 276, 268, 255, 261, 248, 239, 254, 244, 237,
    230, 222, 233, 229, 221, 222, 243, 247, 233, 247, 228, 229, 231, 232, 235,
    237, 225, 195, 186, 193, 186, 193, 182, 182, 182, 184, 159, 178, 170, 173,
    170, 153, 151, 153, 158, 145, 166, 173, 178, 177, 166, 177, 168, 164, 153,
    167, 168, 182, 177, 179, 167, 161, 179, 182, 173,
  ],
  // 数据2
  [
    293, 291, 281, 258, 257, 265, 252, 258, 242, 246, 240, 242, 227, 221, 227,
    227, 258, 241, 260, 262, 254, 257, 261, 246, 238, 229, 233, 241, 243, 248,
    268, 274, 277, 285, 275, 280, 262, 258, 263, 252, 265, 270, 249, 233, 242,
    233, 223, 215, 209, 200, 210, 213, 216, 224, 222, 223, 230, 237, 229, 241,
    255, 260, 259, 264, 259, 246, 253, 240, 240, 233, 228, 237, 247, 235, 238,
    243, 236, 240, 254, 269, 259, 272, 266, 258, 281, 282, 280, 280, 277, 277,
    297, 301, 310, 313, 305, 306, 298, 308, 317, 290,
  ],
]

// 创建uPlot实例
const opts = {
  width: 800,
  height: 600,
  title: 'Trendlines',
  scales: {
    x: {
      time: false,
      // 限制x轴缩放范围
      range: (u, min, max) => [
        data[0][u.valToIdx(min)],
        data[0][u.valToIdx(max)],
      ],
    },
  },
  hooks: {
    drawSeries: [
      // 添加趋势线
      (u, si) => {
        let ctx = u.ctx

        ctx.save()

        let s = u.series[si]
        let xd = u.data[0]
        let yd = u.
  

更多组件：

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址：传送门

扫码加入AI生成前端微信讨论群：