好看的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)

].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);
  }
}

公告