highcharts-wordcloud 词云图

一、前言

网上查了下文档，在highcharts中文文档没有，最新的英文文档可以看到。下面就我使用到的功能写的比较简单的实用demo

二、使用技术以及版本

使用技术vue+highcharts，并没有用vue定制的版本，所以可以直接按照官网配置来（需要vue定制的版本点我）。要注意词云图使用的highcharts版本，我看到官网使用的是7.2.1，所以最好用这个及以上

三、实例demo

1)我是vue框架使用import引入的（当然你也可以使用script引入）

   a）安装

npm install highcharts@7.2.1

   b）引入

import Highcharts from "highcharts/highcharts";
import wordcloud from "highcharts/modules/wordcloud";

wordcloud(Highcharts);

2）html

<div id="container" style="width: 100%;height: 100%;"></div>

3）js

export default {
        name: "wordCloud",
        data(){
            return{
                wordCloudData : [
                    {
                        id: "1",
                        content: "老铁稳!"
                    },
                    {
                        id: "2",
                        content: "AWSL"
                    },
                    {
                        id: "3",
                        content: "阿伟死了"
                    },
                    {
                        id: "4",
                        content: "完结散花"
                    },
                    {
                        id: "5",
                        content: "穷人解禁"
                    },
                    {
                        id: "6",
                        content: "奥利给"
                    },
                    {
                        id: "7",
                        content: "前方十条弹幕,请做好战斗准备"
                    },
                    {
                        id: "8",
                        content: "空降失败"
                    },
                    {
                        id: "9",
                        content: "指挥部:空降地点1\'20"
                    },
                    {
                        id: "10",
                        content: "上海机场"
                    }
                ],
            }
        },
        mounted(){
            this.$nextTick(() => {
                this.dealData()
            }, 1000);
        },
        methods: {
            dealData(){
                let data = this.wordCloudData.reduce(function (arr, word){
                    let obj = {
                        name: word.content,
                        itemData: word,
                        weight: Math.floor(Math.random()*3+1)//控制加粗,随机数取1~3
                    };
                    arr.push(obj);
                    return arr;
                }, []);
                this.drawPic(data)
            },
            drawPic(data){
                Highcharts.chart('container', {
                    //highcharts logo
                    credits: { enabled: false },
                    //导出
                    exporting: { enabled: false },
                    //提示关闭
                    tooltip: { enabled: false },
                    //颜色配置
                    colors:[
                        '#ffffff','#00c0d7','#2594ce','#de4c85',
                        '#ff7f46','#ffb310','#e25c52'
                    ],
                    //图形配置
                    chart: {
                        spacingBottom: 15,
                        spacingTop: 12,
                        // spacingLeft: 5,
                        // spacingRight: 5,
                        backgroundColor: "rgba(0, 0, 0,0.5)",
                    },

                    series: [{
                        type: "wordcloud",// 类型
                        data: data,
                        rotation: 0,//字体不旋转
                        maxFontSize: 30,//最大字体
                        minFontSize: 16,//最小字体
                        style: {
                            fontFamily: "微软雅黑",
                            fontWeight: '500'
                        }
                    }
                    ],
                    //点击事件方法
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            events: {
                                click: function (e){
                                    // 单条数据
                                    console.log(e.point.options.itemData)
                                }
                            }
                        }
                    },

                    //标题配置
                    title: {
                        text: 'REC ●',
                        // x: 5,
                        // y: 15,
                        align: 'left',
                        style: {
                            color: 'red',
                            fontSize: '16px',
                            fontWeight: 'bold',
                            lineHeight: '1.2',
                        }
                    }
                });
            }
        }
    }

三、总结

网上搜的echart词云图比较多，但是对于项目来说，既然已经选用的highchart，那就好好看下。

预览图如下

整体写下来感觉有个缺点：如果加粗也随机的话，感觉位置就跟着随机了，不是居中一团显示，没找到配置属性，望有兴趣的同学找找告知下，谢谢了！官网的demo传送门>>    代码示例传送门>>