タグクラウド、ワードクラウド laravel と vue.js を添えて

タグクラウド作りてぇ。
ということでライブラリと作り方を紹介

海外では タグクラウド ではなく、 ワードクラウドというのだろうか。

インストール

npm install vue-wordcloud

コピペで動く

<style>

    div.tooltip {
        position: absolute;
        width: 210px !important;
        height: 70px !important;
        padding: 16px;
        font: 18px Arial;
        line-height: 24px;
        color: white;
        background: black;
        border: 0px;
        border-radius: 2px;
        pointer-events: none;
    }

</style>

<template>
    <div>

        <div class="cloud">

            <wordcloud
                    :data="defaultWords"
                    nameKey="name"
                    valueKey="value"
                    :showTooltip="true"
                    :wordClick="wordClickHandler">
            </wordcloud>

        </div>


    </div>
</template>

<script>



    import wordcloud from 'vue-wordcloud'

    export default {
        components: {
            wordcloud
        },

        data () {

            return {

                myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
                defaultWords: [
                    {
                    "name": "りんご",
                    "value": 26
                },
                    {
                        "name": "みかん",
                        "value": 19
                    },
                    {
                        "name": "おれんじ",
                        "value": 18
                    },
                    {
                        "name": "look",
                        "value": 16
                    },
                    {
                        "name": "two",
                        "value": 15
                    },
                    {
                        "name": "fun",
                        "value": 9
                    },
                    {
                        "name": "know",
                        "value": 9
                    },
                    {
                        "name": "good",
                        "value": 9
                    },
                    {
                        "name": "play",
                        "value": 6
                    }
                ],
            };
        },

        methods: {
            wordClickHandler(name, value, vm) {
                console.log('クリックされたよ', name, value, vm);
            },
        }




    }
</script>

以上