vue 绘制气泡随机标签效果

最近遇到一种比较炫酷的效果，效果图如下：

研究了一段时间，选择使用Konva ：一个 基于 Canvas 开发的 2d js 框架库，来绘制上面的效果图。
Konva具体的API地址：https://konvajs.org/
以下是我具体使用的方法：
（1）安装

npm install vue-konva konva --save

（2）引用

import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)

（3）绘制效果
html：

js：

// 绘制舞台
initCanvas () {
  let centX = width / 2 - 10
  let centY = height / 2 - 10
  let innerRadius = 50
  let outerRadius = 150
  console.log(outerRadius)
  let inner = {
    x: centX,
    y: centY,
    radius: innerRadius,
    stroke: 'rgba(255,255,255,.5)',
    strokeWidth: 1
  }
  const image = new window.Image()
  image.src = '../../static/images/photo.png'
  let imageList = {
    x: centX - innerRadius,
    y: centY - innerRadius,
    width: innerRadius * 2,
    height: innerRadius * 2,
    image: image,
    opacity: 0.8
  }
  image.onload = () => {
    this.image = imageList
  }
  let center = {
    x: centX,
    y: centY,
    radius: 80,
    opacity: 0.2,
    fillLinearGradientStartPoint: { x: -50, y: -50 },
    fillLinearGradientEndPoint: { x: 50, y: 50 },
    fillLinearGradientColorStops: [0, 'rgba(255,255,255,0.3)', 1, 'rgba(0,0,0,.1)']
  }
  let center2 = {
    x: centX,
    y: centY,
    radius: 120,
    opacity: 0.2,
    fillLinearGradientStartPoint: { x: -50, y: -50 },
    fillLinearGradientEndPoint: { x: 50, y: 50 },
    fillLinearGradientColorStops: [0, 'rgba(255,255,255,0.3)', 1, 'rgba(0,0,0,.1)']
  }
  let outer = {
    x: centX,
    y: centY,
    radius: outerRadius,
    opacity: 0.2,
    fillLinearGradientStartPoint: { x: -50, y: -50 },
    fillLinearGradientEndPoint: { x: 50, y: 50 },
    fillLinearGradientColorStops: [0, 'rgba(255,255,255,0.3)', 1, 'rgba(0,0,0,.1)']
  }
  this.list.push(center2)
  this.list.push(inner)
  this.list.push(center)
  this.list.push(outer)
},
//绘制最外部的圆
initOuter (data) {
  let centX = width / 2
  let centY = height / 2
  let outerRadius = 150
  let arrColor = [['#FF8298', '#FFA073'], ['#46D2FD', '#5351F0'], ['#2DC9EB', '#14D2B8'], ['#46D2FD', '#5351F0'], ['#2DC9EB', '#14D2B8']]
  let arrText = data
  let radius = [30, 35, 30, 35, 30]
  let outList = []
  let textList = []
  for (var i = 0; i < arrText.length; i++) {
    console.log(arrColor[i][0])
    console.log(arrColor[i][1])
    outList.push({
      x: centX + outerRadius * Math.cos(72 * i * Math.PI / 180) - 10,
      y: centY + outerRadius * Math.sin(72 * i * Math.PI / 180) - 10,
      radius: radius[i],
      fillLinearGradientStartPoint: { x: -50, y: -50 },
      fillLinearGradientEndPoint: { x: 50, y: 50 },
      fillLinearGradientColorStops: [0, arrColor[i][0], 1, arrColor[i][1]],
      shadowColor: '#D5E0F0',
      shadowBlur: 5,
      shadowOffset: {x: 1, y: 0}
    })
    textList.push({
      x: centX + outerRadius * Math.cos(72 * i * Math.PI / 180) - radius[i] - 10,
      y: centY + outerRadius * Math.sin(72 * i * Math.PI / 180) - 20,
      text: arrText[i],
      fill: '#fff',
      fontSize: 12,
      align: 'center',
      width: radius[i] * 2,
      padding: 5,
      opacity: 1
    })
  }
  this.outer.list = outList
  this.outer.textList = textList
  console.log(this.outer)
},
// 绘制内部圆
initInner (data) {
  let centX = width / 2
  let centY = height / 2
  let innerRadius = 120
  let arrColor = [['#FF8298', '#FFA073']]
  let arrText = data
  let outList = []
  let textList = []
  for (var i = 0; i < 1; i++) {
    outList.push({
      x: centX - innerRadius * Math.cos(40 * Math.PI / 180),
      y: centY - innerRadius * Math.sin(40 * i * Math.PI / 180),
      radius: 25,
      fillLinearGradientStartPoint: { x: -50, y: -50 },
      fillLinearGradientEndPoint: { x: 50, y: 50 },
      fillLinearGradientColorStops: [0, arrColor[i][0], 1, arrColor[i][1]],
      shadowColor: '#D5E0F0',
      shadowBlur: 5,
      shadowOffset: {x: 1, y: 0}
    })
    textList.push({
      x: centX - innerRadius * Math.cos(40 * Math.PI / 180) - 25,
      y: centY - innerRadius * Math.sin(40 * i * Math.PI / 180) - 15,
      text: arrText[i],
      fill: '#fff',
      fontSize: 12,
      align: 'center',
      width: 25 * 2,
      padding: 5,
      opacity: 1
    })
  }
  this.inner.list = outList
  this.inner.textList = textList
  console.log(this.inner)
}

可以参考Vue Konva（英文）API

欢迎大神指导！