echart詞雲配置

chart.setOption({
    ...
    series: [{
        type: 'wordCloud',
         /*
        繪制詞雲的形狀, 值為回調函數 或 關鍵字, 默認 circle
        關鍵字:
        circle  圓形
        cardioid 心形
        diamond  菱形 正方形
        triangle-forward, triangle  三角形  
        pentagon 五邊形
        star 星形
        */
        shape: 'circle',
        
        // The shape option will continue to apply as the shape of the cloud to grow.
        //詞雲輪廓圖，支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串, 不包含白色區域; 可選選項
        // shape選項將隨着雲的形狀增長而繼續應用。
        //maskImage: maskImage,

        // 詞雲整個圖表放置的位置 和 尺寸大小
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,

        //詞雲文本大小范圍,  默認為最小12像素，最大60像素。
        sizeRange: [12, 60],

        // 詞雲文字旋轉范圍和步長。 文本將通過旋轉在[-90，90]范圍內隨機旋轉步驟45
        // 如果都設置為 0 , 則是水平顯示
        rotationRange: [-90, 90],
        rotationStep: 45,

        // 詞雲文本之間的距離, 距離越大，單詞之間的間距越大, 單位像素
        gridSize: 8,

        //設置為true可以使單詞部分在畫布之外繪制, 允許繪制大於畫布大小的單詞
        drawOutOfBound: false,

        // 文本樣式
        textStyle: {
            normal: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 回調函數 或 顏色值
                color: function () {
                    // 默認 隨機顏色
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            // 鼠標hover的特效樣式
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },

        // data 數組格式, 必須有name和value屬性, 
        data: [{
            name: 'Farrah Abraham',
            value: 366,
            // 單獨設置文本顏色

　　　　　　　　textStyle: {
    　　　　　　　　//color:this.createRandomItemStyle()
　　　　　　　　},

　　　　}] 
　　}] 
});

隨機色

        methods: {
            createRandomItemStyle(){
              return 'rgb(' + [
                            Math.round(Math.random()*180),
                            Math.round(Math.random()*360),
                            Math.round(Math.random()*360)
                        ].join(',')+')'
            },
        }

注意：

如果是echarts4版本，文本隨機色使用會發生變化，需要normal

textStyle: {
                    normal:{
                        color:this.createRandomItemStyle()
                    }
                },

echarts4版本對應詞雲圖wordcloud1

npm install echarts-wordcloud@1

echarts5版本對應詞雲圖wordcloud2

npm install echarts-wordcloud@2

 

 

原文鏈接：(8條消息) Echart 之 詞雲 setOption配置說明_前端看世界-CSDN博客_echarts詞雲配置