如何用vue和konva绘制离散型热力图

要使用Vue和Konva绘制离散型热力图，可以按照以下步骤进行：

1. 安装Konva和Vue

npm install konva vue-konva

2. 在Vue组件中引入Konva和Vue-Konva：

import VueKonva from 'vue-konva';
import Konva from 'konva';

3. 在Vue组件中创建Konva.Stage和Konva.Layer组件，并在Layer组件中绘制热力图：

<template>
  <v-stage ref="stage" :config="stageConfig">
    <v-layer ref="layer">
      <v-rect v-for="(point, index) in points" :key="index" :x="point.x" :y="point.y" :width="point.width" :height="point.height" :fill="point.color" />
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  components: {
    VueKonva,
  },
  data() {
    return {
      stageConfig: {
        width: 500,
        height: 500,
      },
      points: [
        { x: 50, y: 50, width: 50, height: 50, color: 'red' },
        { x: 150, y: 50, width: 50, height: 50, color: 'yellow' },
        { x: 250, y: 50, width: 50, height: 50, color: 'green' },
        { x: 350, y: 50, width: 50, height: 50, color: 'blue' },
        { x: 50, y: 150, width: 50, height: 50, color: 'purple' },
        { x: 150, y: 150, width: 50, height: 50, color: 'orange' },
        { x: 250, y: 150, width: 50, height: 50, color: 'pink' },
        { x: 350, y: 150, width: 50, height: 50, color: 'brown' },
      ],
    };
  },
};
</script>

4. 使用Vue组件即可绘制离散型热力图。

上述代码中，我们首先在模板中创建了一个Konva.Stage组件，并将其绑定到`ref="stage"`。然后在这个Stage组件内部创建了一个Konva.Layer组件，并将其绑定到`ref="layer"`。在这个Layer组件中，我们使用了`v-for`指令遍历points数组，为每个数组元素创建了一个Konva.Rect组件，并设置了它的位置、大小和颜色。

需要注意的是，Konva组件的属性名称和Vue组件的属性名称有些不一样。比如，Konva组件中的`x`属性对应Vue组件中的`left`属性，Konva组件中的`width`属性对应Vue组件中的`rectWidth`属性等等。具体的属性名称可以参考Konva文档。