echarts3.x，echarts5.x 的wordCloud兼容

echarts5.x 使用echarts-wordcloud2版本，参考官方Github https://github.com/ecomfe/echarts-wordcloud
且要注意写法，textStyle 设置随机色时，不用加normal，否则会出不了颜色

var chart = echarts.init(document.getElementById('main'));

chart.setOption({
     
    ...
    series: [{
     
        type: 'wordCloud',

        // The shape of the "cloud" to draw. Can be any polar equation represented as a
        // callback function, or a keyword present. Available presents are circle (default),
        // cardioid (apple or heart shape curve, the most known polar equation), diamond (
        // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

        shape: 'circle',

        // A silhouette image which the white area will be excluded from drawing texts.
        // The shape option will continue to apply as the shape of the cloud to grow.

        maskImage: maskImage,

        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
        // Default to be put in the center and has 75% x 80% size.

        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,

        // Text size range which the value in data will be mapped to.
        // Default to have minimum 12px and maximum 60px size.

        sizeRange: [12, 60],

        // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

        rotationRange: [-90, 90],
        rotationStep: 45,

        // size of the grid in pixels for marking the availability of the canvas
        // the larger the grid size, the bigger the gap between words.

        gridSize: 8,

        // set to true to allow word being draw partly outside of the canvas.
        // Allow word bigger than the size of the canvas to be drawn
        drawOutOfBound: false,

        // If perform layout animation.
        // NOTE disable it will lead to UI blocking when there is lots of words.
        layoutAnimation: true,

        // Global text style
        textStyle: {
     
            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: {
     
            focus: 'self',

            textStyle: {
     
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },

        // Data is an array. Each array item must have name and value property.
        data: [{
     
            name: 'Farrah Abraham',
            value: 366,
            // Style of single text
            textStyle: {
     
            }
        }]
    }]
});

因为项目使用echarts3.x版本，那么echarts-wordcloud2版本的就没法使用了，在网上找到一个博主分享的
echarts4.0使用wordCloud的方法（支持彩色字体）
采用他分享的echarts-wordcloud版本就可以兼容了echart3.x版本

下载地址：点我下载
下载密码：fabw

注意：里面案例的写法，textStyle是有加normal的，且是有动态效果的

 var option = {
     
    series: [ {
     
          type: 'wordCloud',
          sizeRange: [10, 100],
          rotationRange: [-90, 90],
          rotationStep: 45,
          gridSize: 2,
          shape: 'pentagon',
          maskImage: maskImage,
          drawOutOfBound: false,
          textStyle: {
     
              normal: {
     
                  color: function () {
     
                      return 'rgb(' + [
                          Math.round(Math.random() * 160),
                          Math.round(Math.random() * 160),
                          Math.round(Math.random() * 160)
                      ].join(',') + ')';
                  }
              },
              emphasis: {
     
                  color: 'red'
              }
          },
          data: data.sort(function (a, b) {
     
              return b.value  - a.value;
          })
      } ]
  };