echarts绘制词云方法

echarts官网

• 第一步安装echarts依赖，通过npm获取echarts,npm install echarts --save,具体操作可以看echarts官网;
• 第二步安装echarts词云插件，npm install echarts-wordcloud --save;
• 第三步下载好依赖之后在main.js引入文件，我这里最后将echarts写在原型prototype上

import echarts from \'echarts\'
require(\'echarts-wordcloud\')
Vue.prototype.$echarts = echarts

• 第四步绘制词云

<template>
<div id=\"echartsWordcloud\" style=\"width:400px;height:400px;\"></div>
</template>
<script>
export default{
mounted(){
this.initEcharts()
},
methods:{
initEcharts(data){
let echartsWordcloud=this.$echarts.init(document.getElementById(\"echartsWordcloud\"));
let option = {
title: {
text: \"\",
x: \"center\"
},
series: [
{
type: \"wordCloud\",
//用来调整词之间的距离
gridSize: 10,
//用来调整字的大小范围
sizeRange: [14, 26],
rotationRange: [0, 0],
//随机生成字体颜色
textStyle: {
normal: {
color: function() {
return (
\"rgb(\" +
Math.round(Math.random() * 255) +
\", \" +
Math.round(Math.random() * 255) +
\", \" +
Math.round(Math.random() * 255) +
\")\"
);
}
}
},
//位置相关设置
left: \"center\",
top: \"center\",
right: null,
bottom: null,
width: \"300%\",
height: \"300%\",
//数据
data: data
}
]
};
echartsWordcloud.setOption(option);
//点击事件
echartsWordcloud.on(\"click\",function(e){})
}
}
}
</script>

效果图

Highcharts绘制词云方法

Highcharts官网
第一步下载highcharts，可以选择文件下载方式和npm安装方式（npm install highcharts --save），官网都有教程，我选择是文件下载方式。
第二步引入highcharts文件

<script src=\"./lib/highcharts/highcharts.js\"></script>
<script src=\"./lib/highcharts/wordcloud.js\"></script>

第三步绘制词云

<template>
<div id=\"highchartsWordcloud\" style=\"width:400px;height:400px;\"></div>
</template>
<script>
export default{
mounted(){
this.initEcharts()
},
methods:{
initEcharts(data){
Highcharts.chart(\"highchartsWordcloud\", {
colors: [\"#6A7AFE\", \"#9DBBEC\", \"#FFDB35\", \"#FFFFFF\"],
tooltip: {
enabled: false
},
chart: {
plotBackgroundColor: null,
backgroundColor: null
},
title: {
text: null
// fontWeight: \"400\"
},
credits: {
enabled: false // 禁用版权信息
},
exporting:{enabled:false},
series: [
{
type: \"wordcloud\",
data: data,
cursor: \"pointer\",
rotation: {
from: 0,
to: 0,
orientations: 5
},
//点击事件
events: {
click: function(e) {}
}
}
]
});
}
}
}
</script>

效果图

渲染数据格式举例

data = [{name: \"小区\",value: \"283\"},{name: \"留言板\",value: \"101\"},...,{name: \"业主\",value: \"148\"}]

来源：https://www.cnblogs.com/hero-see1321251054/p/14467609.html
图文来源于网络，如有侵权请联系删除。