Uniapp , Canvas折线柱状图实例代码

好的，下面给您提供一个基于 Uniapp 和 Canvas 实现折线柱状图的代码示例：

<template>
  <canvas class="canvas" canvas-id="myCanvas"></canvas>
</template>

<script>
export default {
  onReady() {
    // 获取 Canvas 上下文对象
    const ctx = uni.createCanvasContext('myCanvas', this);

    // 绘制折线图
    drawLineChart(ctx);

    // 绘制柱状图
    drawBarChart(ctx);
  }
}

// 绘制折线图
function drawLineChart(ctx) {
  // 坐标轴起点和终点的坐标
  const xStart = 50, yStart = 200, xEnd = 350, yEnd = 50;

  // 绘制坐标轴
  ctx.beginPath();
  ctx.moveTo(xStart, yStart);
  ctx.lineTo(xStart, yEnd);
  ctx.lineTo(xEnd, yEnd);
  ctx.stroke();

  // 绘制坐标轴上的文本
  ctx.fillText('x轴', xEnd + 10, yEnd + 10);
  ctx.fillText('y轴', xStart - 10, yStart - 10);

  // 绘制数据点
  const data = [50, 70, 90, 60, 80];
  const interval = (xEnd - xStart) / (data.length - 1);
  for (let i = 0; i < data.length; i++) {
    const x = xStart + interval * i;
    const y = yStart - (data[i] - yEnd) * (yStart - yEnd) / (yStart - yEnd + 10);
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.fill();
  }

  // 绘制数据点之间的连线
  ctx.beginPath();
  for (let i = 0; i < data.length; i++) {
    const x = xStart + interval * i;
    const y = yStart - (data[i] - yEnd) * (yStart - yEnd) / (yStart - yEnd + 10);
    if (i === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  }
  ctx.stroke();
}

// 绘制柱状图
function drawBarChart(ctx) {
  // 坐标轴起点和终点的坐标
  const xStart = 400, yStart = 200, xEnd = 700, yEnd = 50;

  // 绘制坐标轴
  ctx.beginPath();
  ctx.moveTo(xStart, yStart);
  ctx.lineTo(xStart, yEnd);
  ctx.lineTo(xEnd, yEnd);
  ctx.stroke();

  // 绘制坐标轴上的文本
  ctx.fillText('x轴', xEnd + 10, yEnd + 10);
  ctx.fillText('y轴', xStart - 10, yStart - 10);

  // 绘制数据柱
  const data = [50, 70, 90, 60, 80];
  const interval = (xEnd - xStart) / (data.length + 1);
  for (let i = 0; i < data.length; i++) {
    const x = xStart + interval * (i + 1);
    const y = yEnd + (yStart - yEnd) * data[i] / (yStart - yEnd + 10);
    const width = interval / 2;
    const height = yStart - y;
    ctx.fillRect(x - width / 2, y, width, height);
  }
}
</script>

<style>
.canvas {
  width: 100%;
  height: 300px;
}
</style>

上述代码中，我们先在模板中定义了一个 Canvas 元素，并指定了其 id 为 `myCanvas`。在 `onReady` 生命周期回调函数中，我们获取了该元素的 Canvas 上下文对象，然后分别调用了 `drawLineChart` 和 `drawBarChart` 两个函数来绘制折线图和柱状图。

在 `drawLineChart` 函数中，我们先绘制了坐标轴，并在坐标轴的两端分别绘制了文字，然后根据传入的数据，在坐标轴上绘制了对应的数据点，并且绘制了相邻数据点之间的连线。

在 `drawBarChart` 函数中，我们也先绘制了坐标轴和对应的文字，然后根据传入的数据，绘制了对应的数据柱。

最后，我们还定义了一个样式表，将 Canvas 的宽度设置为 100%。