zoukankan      html  css  js  c++  java
  • 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)]
                                    }
                                }
                            ]
                        }
                    ]
                }
    
  • 相关阅读:
    php DOC类型注释的用法
    Mysql 数据库更新错误
    Smarty初体验二 获取配置信息
    Smarty 模板初体验
    去网络视频广告方法——虽过时,但效果依然很好(亲测)
    织梦模板修改方法大全
    dede织梦:文章内容页调用
    织梦系统学习:文章页当前位置的写法(自认对SEO有用)
    ZOJ 3229 Shoot the Bullet
    URAL 1277 Cops and Thieves
  • 原文地址:https://www.cnblogs.com/knuzy/p/14285729.html
Copyright © 2011-2022 走看看