Echarts 實現詞雲/圖譜/關係圖,隨機顏色與大小

Echarts可以實現以下所示的詞雲效果,
Echarts實現的詞雲

實現代碼如下:
把以下代碼複製粘貼到 echart gallery可以看到效果圖:

let colorList = [
    '#CF4645','#B580B2','#29008A','#146A90','#8956FF','#70C9A8',
    '#bfbfbf','#595959',
    '#40a9ff','#1890ff',
    '#ffd666','#ffc53d','#ffc53d','#ffc069','#ffa940','#fa8c16',
    '#eccbd9','#ffadad','#ff6392','#ffc09f','#ffcb77','#ffe066','#ffd53e','#ffda3d','#adf7b6','#a0e8af','#80ed99','#07beb8','#17c3b2','#48cae4','#97d2fb','#83bcff','#91e5f6','#9381ff']
let colorListLen = colorList.length
let fontSizeList = [
    12,12.5,13,13.5,14,14.5,
    15,15.5,16,16.5,17,17.5,
    18,18.5,19,19.5,20,20.5,
    21,22,23,
    24]
let fontSizeListLen = fontSizeList.length
let customLabel = {
    color: colorList[Math.floor(Math.random()*colorListLen)],
    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
}
let bgColor = '#fffcf9'
let canDraggable = false
option = {
                backgroundColor: '#fffcf9',
                color: ['#37A2DA', '#32C5E9', '#67E0E3'],
                title: {
                    show: false,
                    text: '一天的時間流逝',
                    x: 'center',
                    y: 'bottom',
                    // 文字的顏色,默認 #333。
                    color: '#666',
                    fontSize: 24
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataView: {readOnly: false},
                        // magicType: {type: ['line', 'bar']},
                        restore: {},
                        // saveAsImage: {}
                    }
                },
                itemStyle: {
                    color: bgColor
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            repulsion: 80,
                            edgeLength: 10
                        },
                        roam: 'scale',
                        // symbol: '',
                        // symbolSize: 0,
                        label: {
                            show: true,
                            color: 'auto',
                            fontSize: 14
                        },
                        data: [
                            {
                                name: '聽音樂',
                                value: 2,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '看電影',
                                value: 12,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '跑步',
                                value: 22,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '瑜伽',
                                value: 42,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '發呆',
                                value: 52,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '閱讀',
                                value: 62,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '唱歌',
                                value: 72,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '跳舞',
                                value: 72,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '追星',
                                value: 72,
                                draggable: canDraggable,
                                itemStyle: {
                                    color: bgColor
                                },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '看星星',
                                value: 72,
                                draggable: canDraggable,
                                // itemStyle: {
                                //     color: bgColor
                                // },
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '看月亮',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '喫漢堡',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '做早餐',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '爬山',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '旅行',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '喝奶茶',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '買衣服',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '理財',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '洗衣服',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '收納',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '早起',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '熬夜',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '追劇',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '逛街',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '敲代碼',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '創作',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '做夢',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '悲傷',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            },
                            {
                                name: '開心',
                                value: 72,
                                draggable: canDraggable,
                                label: {
                                    color: colorList[Math.floor(Math.random()*colorListLen)],
                                    fontSize: fontSizeList[Math.floor(Math.random()*fontSizeListLen)]
                                }
                            }
                        ]
                    }
                ]
            }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章