好看的echart的词云效果（wordCloud）

基础的设置：

series: [{

name: '',

          type: 'wordCloud',

          shape: 'circle',

          rotationRange: [0,0],//字体旋转的角度

          sizeRange: [12, 50],//字体大小的范围

          gridSize: 10,//字体分布的密集程度

          maskImage: maskImage,//字体以图片形状分布，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串

          textStyle: {

normal: {

              fontFamily: 'sans-serif',

                  //fontWeight: 'bold',

                  // Color can be a callback function or a color string

                  color: function () {

                      // Random color

                      return 'rgb(' + [

                          Math.round(Math.random() * 160),

                          Math.round(Math.random() * 160),

                          Math.round(Math.random() * 160)

                      ].join(',') + ')';//字体的随机颜色

                  }

              },

              emphasis: {//鼠标移入的特效样式

                  shadowBlur: 10,

                  shadowColor: '#333'

              }

          },

          data:[

          ],

}]

　　vue项目使用的　，引入的一个圆形图片　　　

　　　　var maskImage = new Image();
        //重点：图片的base64码，我用的png图片
        maskImage.src = require('../../../assets/img/yuan_icon.png');
　　　　

给图表加个涟漪似的动画效果的背景
把.circle-ripple元素固定到图表后面即可，下面是样式表

$color:#bdd2f6;
.circle-ripple {
  background-color:$color;
   72%;
    height: 400px;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
  animation: ripple 0.7s linear infinite;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba($color, 0.3),
                0 0 0 1em rgba($color, 0.3),
                0 0 0 3em rgba($color, 0.3),
                // 0 0 0 5em rgba($color, 0.3);
  }
  100% {
    box-shadow: 0 0 0 1em rgba($color, 0.3),
                0 0 0 3em rgba($color, 0.3),
                0 0 0 5em rgba($color, 0),
                // 0 0 0 8em rgba($color, 0);
  }
}