使用echarts生成各种形状的词云图
目前我是使用vue.js组件进行开发的，最近在做项目的时候，遇到了一个瓶颈。需要做一个词云图，并且词云只能是在一个人物里展现的。百度了很多画这种东西的方式，最终发现还是使用echarts的echarts-wordcloud插件进行绘制是最简洁方便的了，对于前端来说。
例如做这个词云图~
使用如下~~~~
一、引入词云插件
因为词云插件是基于echarts的，所以需要先引入echarts再引入词云插件。
1、使用npm命令引入
npm install echarts
npm install echarts-wordcloud
2、在页面中进行引入
import * as echarts from 'echarts';
import 'echarts-wordcloud';
二、前提准备
- 让词云按一定形状展示，这里实际上就是使用的一张背景图，使得它会按照图片除白色地方进行展示。一般就是使用黑白图片，黑色是展示词云的地方，其它地方白色即可。
例如这种图片
- 有时候会出现词云展示很少的情况，则需要词云上再放一层图，防止数据只展示太少的一部分。只要把轮廓内弄成透明，加一条轮廓边即可。
例如下面图片
三、使用示例
<template>
<div id="wordColund" style="height:280px;width:280px" v-if="keywordsList.length>0" ></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud';
import cy from "@/assets/cy.png"
import wordColundBG from "@/assets/wordColundBG.png"
const maskImage = new Image();
const keywordsList = [];
const option = {
backgroundColor: '#fff',
// xAxis、yAxis这个配置主要是针对 pictorialBar 这个类型使用的
xAxis: {
axisLine: {show: false},
axisLabel: {show: false},
axisTick: {show: false},
splitLine: {show: false},
},
yAxis: {
data: [0 , 900],
show: false
},
grid: { //调整位置结合透明图
top: '-50',
left:'-70',
height: 780
},
series: [
{
name: '',
type: 'wordCloud',
sizeRange: [8, 60],//字体尺寸范围
rotationRange: [-30,30], //旋转角度 0, 0
// shape: 'circle',
maskImage: maskImage, //是否使用背景图进行勾勒
textPadding: 0,
gridSize: 0, //词间距 7
width: '100%' ,
height: 280 ,
left: 'center',
top: 'center',
drawOutOfBound: false,//溢出是否显示
// 布局的时候是否有动画
layoutAnimation: true,
autoSize: {
enable: true,
minSize: 4
},
textStyle: {
fontFamily: 'Arial',
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
},
},
data: keywordsList
},
// 词云上再放一层透明层，防止数据只展示太少的一部分。
{
name: '',
type: 'pictorialBar',//象形图，可用背景图代替
// symbol: 'image://' + wordColundBG,
symbolSize: ['80%', 280], // 图片的宽、高
symbolRepeat: false, // 复制
data: [{value: 1 , symbolOffset: ['32%' , '-140%'] }],//调整位置
animation:false,
},
]
}
export default {
name: 'EchartsWordCloud',
data() {
return {
cy,
wordColundBG,
option:option,
maskImage,
keywordsList,
};
},
mounted(){
this.init();
// this.init2();
},
methods: {
async init () {
// let {data} = await myPortait();
this.keywordsList = [
{
name:"输出",
value:34156
},
{
name:"测评",
value:22199
},
{
name:"微控制器",
value:10288
},
{
name:"线网络",
value:1206
},
{
name:"机台",
value:274470
},
{
name:"无线",
value:12311
},
{
name:"输",
value:2062
},
{
name:"开端",
value:4885
},
{
name:"端",
value:32294
},
{
name:"换机器",
value:18574
},
{
name:"测评1",
value:38929
},
{
name:"模块",
value:969
},
{
name:"机",
value:37517
},
{
name:"接",
value:12053
},
{
name:"机器",
value:57299
},
{
name:"牛逼",
value:15418
},
{
name:"你好",
value:22905
},
{
name:"世界",
value:5146
},
{
name:"我",
value:49487
},
{
name:"是",
value:33837
},
{
name:"小世界",
value:4500
},
{
name:"大世界",
value:5744
},
{
name:"前端",
value:4840
},
{
name:"后端",
value:2322
},
];
this.option.series[0].data = this.keywordsList;
this.maskImage.src = this.cy;//第一张图片
this.option.series[0].maskImage = this.maskImage;
this.option.series[1].symbol = 'image://' + this.wordColundBG;//第二张图片
this.$nextTick(() => {
setTimeout(()=>{
const myChart = echarts.init(document.getElementById('wordColund'));
myChart.setOption(this.option);
this.maskImage.onload = ()=> {
myChart.setOption(this.option);
};
window.onresize = function() {
myChart.resize();
};
})
})
},
}
}
</script>
展示结果：
