好看的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;
  width: 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);
  }
}