前端如何实现词云效果？

今天来分享 6 个超实用的词云库，以快速实现词云效果！

wordcloud2.js 是一个基于 HTML5 Canvas 的词云库，主要用于生成词云效果。它的特点包括：

使用方式如下：

(相关资料图)

npm install wordcloud

import WordCloud from "wordcloud";

WordCloud(document.getElementById("myCanvas"), {  list: [    ["foo", 12],    ["bar", 6],    // ...  ],  // 其他自定义选项});

Github：https://github.com/timdream/wordcloud2.js

echarts-wordcloud 是基于 echarts.js 和 wordcloud2.js 的插件，用于在 echarts 可视化图表中创建词云。它的特点包括：

使用方式如下：

npm i echarts echarts-wordcloud --save

import * as echarts from "echarts";import "echarts-wordcloud";

const chartDom = document.getElementById("chart");const myChart = echarts.init(chartDom);const option = {  series: [{    type: "wordCloud",    shape: "circle",    gridSize: 10,    // ...  }]};myChart.setOption(option);

Github：https://github.com/ecomfe/echarts-wordcloud

d3-cloud是一个基于 D3.js 和 HTML5 Canvas绘制输出的开源词云实现。它的特点包括：

使用方式如下：

npm install d3-cloud

import * as d3 from "d3";import * as cloud from "d3-cloud";

const data = [  {text: "apple", size: 32},  {text: "orange", size: 24},  {text: "banana", size: 16},  {text: "watermelon", size: 8},  {text: "grape", size: 4},];const layout = d3.layout.cloud()  .size([800, 600])  .words(data)  .padding(5)  .rotate(function() { return ~~(Math.random() * 2) * 90; })  .font("Impact")  .fontSize(function(d) { return d.size; })  .on("end", draw);layout.start();function draw(words) {  d3.select("#wordcloud")    .append("svg")      .attr("width", layout.size()[0])      .attr("height", layout.size()[1])    .append("g")      .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")    .selectAll("text")      .data(words)    .enter().append("text")      .style("font-size", function(d) { return d.size + "px"; })      .style("font-family", "Impact")      .style("fill", function(d, i) { return d3.schemeCategory10[i % 10]; })      .attr("text-anchor", "middle")      .attr("transform", function(d) {        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";      })      .text(function(d) { return d.text; });};

Github：https://github.com/jasondavies/d3-cloud

react-tagcloud 是一个基于 React 框架的标签云组件，用于在应用中呈现具有不同字体大小和颜色的标签。它的特点包括：

使用方式如下：

npm install react-tagcloud

import ReactTagCloud from "react-tagcloud";const data = [  { value: "React", count: 25 },  { value: "JavaScript", count: 18 },  { value: "Nodejs", count: 30 },  ...];const options = {  //其他 options 设置};//渲染标签云

Github：https://github.com/madox2/react-tagcloud

VueWordCloud 是一个基于 Vue.js 的词云组件库。它的特点包括：

使用方式如下：

npm install vuewordcloud

import Vue from "vue";import VueWordCloud from "vuewordcloud";Vue.component("VueWordCloud", VueWordCloud); 5 ? "RoyalBlue" : "Indigo""  font-family="Roboto"/>

在上面的代码中，"options" 是传递给 VueWordCloud 组件的词云选项，可以根据需要自定义这些选项。

Github：https://github.com/SeregPie/VueWordCloud

react-d3-cloud 是一个使用 d3-cloud 构建的词云 React 组件。

使用方式如下：

npm install react-d3-cloud

import React from "react";import { render } from "react-dom";import WordCloud from "react-d3-cloud";import { scaleOrdinal } from "d3-scale";import { schemeCategory10 } from "d3-scale-chromatic";const data = [  { text: "Hey", value: 1000 },  { text: "lol", value: 200 },  { text: "first impression", value: 800 },  { text: "very cool", value: 1000000 },  { text: "duck", value: 10 },];const schemeCategory10ScaleOrdinal = scaleOrdinal(schemeCategory10);render(   Math.log2(word.value) * 5}    spiral="rectangular"    rotate={(word) => word.value % 360}    padding={5}    random={Math.random}    fill={(d, i) => schemeCategory10ScaleOrdinal(i)}    notallow={(event, d) => {      console.log(`onWordClick: ${d.text}`);    }}    notallow={(event, d) => {      console.log(`onWordMouseOver: ${d.text}`);    }}    notallow={(event, d) => {      console.log(`onWordMouseOut: ${d.text}`);    }}  />,  document.getElementById("root"));

Github：https://github.com/Yoctol/react-d3-cloud