vue 使用高德api绘制渐变折线

要在Vue中使用高德API绘制渐变折线，可以将其封装成一个Vue组件。以下是一个简单的实现示例：

<template>
  <div ref="container" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  name: 'GradientPolyline',
  props: {
    path: {
      type: Array,
      required: true
    },
    strokeWeight: {
      type: Number,
      default: 6
    },
    colorStops: {
      type: Array,
      required: true
    },
    map: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.polyline = new AMap.Polyline({
      path: this.path,
      strokeWeight: this.strokeWeight,
      strokeStyle: 'solid',
      strokeColor: new AMap.CanvasGradient({
        type: 'linear',
        x0: 0,
        y0: 0,
        x1: 0,
        y1: 1,
        colorStops: this.colorStops
      }),
      map: this.map
    });
  },
  beforeDestroy() {
    if (this.polyline) {
      this.polyline.setMap(null);
      this.polyline = null;
    }
  }
};
</script>

在以上代码中，我们定义了一个名为`GradientPolyline`的Vue组件，并声明了三个props：`path`表示折线路径，`strokeWeight`表示折线宽度，`colorStops`表示颜色渐变信息。

在组件的`mounted`生命周期钩子函数中，我们使用高德API创建一个`Polyline`对象，并将其添加到地图上。其中，`strokeColor`属性的值为一个`CanvasGradient`对象，其`colorStops`属性的值为`colorStops` prop的值，这样就实现了折线颜色的渐变。

最后，在组件的`beforeDestroy`生命周期钩子函数中，我们将折线从地图上移除并销毁它，以释放内存。