vue集成Highcharts 云词图

最新推荐文章于 2025-01-25 21:02:18 发布

Caius_Lee

最新推荐文章于 2025-01-25 21:02:18 发布

阅读量1.1k

点赞数 1

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45057665/article/details/107099543

版权

学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Highcharts实现云词图，通过npm安装Highcharts并引入wordcloud模块，展示了初始化图表的方法及随机权重的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue集成Highcharts 云词图

最近接手一个需求,需要服务端统计词语,前端出一个云图.
记得很早之前在echarts看到过一个云词图,去翻一下echarts官网没翻到索性去Highcharts看了一眼.

发现更新了很多新的图表,正好有我想要的nice,直接开干.
使用npm在vue中安装

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: "",
      },
    });
  },
}