vue3使用heatmap.js绘制热力图报错？

Question

<div class="heatmapjs-container" ref="heat"></div>

import { ref, reactive, onMounted } from "vue"
import h337 from "heatmapjs"

onMounted(() => {
  console.log("onMounted")
  heatMapInit()
  console.log(heat.value)
})

const heat = ref(null)
const heatmap = ref()
// 初始化 heat map
const heatMapInit = () => {
  let heatmapInstance = h337.create({ container: heat.value })
  var points = []
  var max = 0
  var width = 840
  var height = 400
  var len = 200
  while (len--) {
    var val = Math.floor(Math.random() * 100)
    max = Math.max(max, val)
    var point = {
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height),
      value: val
    }
    points.push(point)
  }
  // heatmap data format
  var data = {
    max: max,
    data: points
  }
  // if you have a set of datapoints always use setData instead of addData
  // for data initialization
  heatmapInstance.addData(data)
}

使用报错：

heatmap.min.js:9  Uncaught (in promise) TypeError: Cannot assign to read only property 'data' of object '#<ImageData>'
    at d2._colorize (heatmap.min.js:9:6235)
    at d2.renderPartial (heatmap.min.js:9:4158)
    at heatmap.min.js:9:6929
    at a2.emit (heatmap.min.js:9:7041)
    at d2.addData (heatmap.min.js:9:1681)
    at g2.addData (heatmap.min.js:9:7804)
    at heatMapInit (heatmap.vue:44:1)
    at heatmap.vue:13:1
    at runtime-core.esm-bundler.js:2675:88
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)

Answer 1

看报错，在heatmap.min.js的某个函数里想修改一个只读属性'data'。这个错误可能是因为heatmap.js库的某个版本与Vue 3不兼容。
试试用：

heatmapInstance.setData(data)