G2绘制词云效果

根据官网https://antv.alipay.com/zh-cn/g2/3.x/demo/other/word-cloud-mask.html代码，完善在vue中的使用过程

aaaaaaaaaaaaaaaaaaaa,我看了一整天才弄出来~但是词云有重叠的部分，不知道是不是因为我的父元素很小 ，大小给的是100*200

 

上图：

首先需要引入官方中插入的lodash

npm i lodash -d

import _ from 'lodash'

下面的函数是我简单封装的

export const initWordCloud = (opts) => {
  let options = {
    imageurl: opts.imageurl,
    ele: opts.ele,
    width: opts.width || 500,
    height: opts.height || 500,
    text: opts.text
  }
  function getTextAttrs (cfg) {
    return _.assign({}, cfg.style, {
      fillOpacity: cfg.opacity,
      fontSize: cfg.origin._origin.size,
      rotate: cfg.origin._origin.rotate,
      text: cfg.o