svg曲线图vue怎么写

要在 Vue 中绘制 SVG 曲线图，通常需要使用 SVG 标签和 Vue 组件。以下是一个简单的示例，绘制了一个简单的曲线图：

<template>
  <svg :width="width" :height="height">
    <path :d="path" :stroke="color" fill="none" />
  </svg>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
    width: {
      type: Number,
      default: 300,
    },
    height: {
      type: Number,
      default: 150,
    },
    color: {
      type: String,
      default: "black",
    },
  },
  computed: {
    path() {
      const d = this.data
        .map((value, index) => `${index},${this.height - value}`)
        .join(" ");
      return `M 0 ${this.height} L ${d} L ${this.width} ${this.height}`;
    },
  },
};
</script>

在这个组件中，我们首先定义了三个属性：`data`、`width` 和 `height`，它们分别表示要绘制的数据、SVG 图形的宽度和高度。我们还定义了一个 `color` 属性，用于指定曲线的颜色。

在组件的模板中，我们使用了 SVG 标签来绘制图形，并使用 `path` 元素来绘制曲线。`path` 元素的 `d` 属性指定了曲线的形状，我们使用 `computed` 属性来计算这个值。具体来说，我们将数据中的每个值映射到一个坐标点，然后通过 `join` 方法将这些点连接起来，得到一个字符串表示曲线的形状。

最后，我们将这个字符串作为 `path` 元素的 `d` 属性值，并将 `fill` 属性设置为 `none`，以便在渲染时不填充曲线。

以上代码只是一个简单的示例，实际上绘制 SVG 曲线图还需要考虑很多细节，例如如何处理数据为空、如何响应窗口大小变化等。但是，这个示例可以作为一个基础，让你了解如何在 Vue 中绘制 SVG 曲线图。