vue集成Highcharts 云词图

npm install highcharts --save

在需要使用的页面中

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

wordcloud(Highcharts);

Dom

<div id="highCharts" class="chartsConter"></div>

data列点假数据 weight随便给的

chartsData: [
        {
          name: "生化危机3:重置版",
          weight: 30,
        },
        {
          name: "地狱把妹王",
          weight: 22,
        },
        {
          name: "骑马与砍杀2",
          weight: 35,
        },
        {
          name: "甜心选择",
          weight: 40,
        },
        {
          name: "怪物猎人世界冰原",
          weight: 20,
        },
        {
          name: "兰斯10:决战",
          weight: 20,
        },
        {
          name: "女神异闻录4:黄金版",
          weight: 20,
        },
        {
          name: "圣剑传说3:重置版",
          weight: 20,
        },
        {
          name: "火炬之光3",
          weight: 20,
        },
        {
          name: "美少女万华镜5",
          weight: 20,
        },
        {
          name: "使命召唤6:现代战争",
          weight: 20,
        },
        {
          name: "三国志14",
          weight: 20,
        },
        {
          name: "赏金骑兵3",
          weight: 20,
        },
        {
          name: "夏日狂想曲:乡间的难忘回忆",
          weight: 20,
        },
        {
          name: "命令与征服:重置版",
          weight: 20,
        },
        {
          name: "腐烂国度2:主宰版",
          weight: 20,
        },
        {
          name: "亦春秋",
          weight: 20,
        },
        {
          name: "我的世界:地下城",
          weight: 20,
        },
        {
          name: "龙珠Z:卡卡罗特",
          weight: 20,
        },
        {
          name: "奥日与鬼火意志",
          weight: 20,
        },
        {
          name: "DOTA2",
          weight: 20,
        },
        {
          name: "魔兽世界",
          weight: 20,
        },
        {
          name: "塞尔达:奥德赛",
          weight: 20,
        },
        {
          name: "超级玛丽",
          weight: 20,
        },
        {
          name: "暗黑破坏神",
          weight: 20,
        },
        {
          name: "英雄联盟",
          weight: 20,
        },
        {
          name: "只狼",
          weight: 20,
        },
        {
          name: "死亡搁浅",
          weight: 20,
        },
        {
          name: "盗贼之海",
          weight: 20,
        },
        {
          name: "暗黑破坏神",
          weight: 20,
        },
        {
          name: "炉石传说",
          weight: 20,
        },
        {
          name: "守望先锋",
          weight: 20,
        },
        {
          name: "星际争霸",
          weight: 20,
        },
      ],

初始化顺便给个随机数

mounted() {
    this.randomWeight();
},
methods: {
// 随机方法
  getRandom(start, end, fixed = 0) {
    let differ = end - start;
    let random = Math.random();
    return Number((start + differ * random).toFixed(fixed));
  },
  // 处理一下weight的大小
  randomWeight() {
    let data = [];
    for (let i = 0; i < this.chartsData.length; i++) {
      const el = this.chartsData[i];
      el.weight = this.getRandom(20, 80);
      data.push(el);
    }
    this.initClassHighCharts(data);
  },
  // 初始化HighCharts
  initClassHighCharts(data) {
    Highcharts.chart("highCharts", {
      // 关闭Highcharts右下方logo
      credits: { enabled: false },
      series: [
        {
        // 把字摆正
          rotation: {
            from: 0,
            to: 0,
            orientations: 5,
          },
          type: "wordcloud",
          data: data,
        },
      ],
      title: {
        text: "",
      },
    });
  },
}

看看效果

nice~ 完美~
贴上官方链接 官方演示dome 官方在线调试地址