Echarts—词云库（echarts-wordcloud）使用

本文主要是介绍Echarts—词云库（echarts-wordcloud）使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

echarts-wordcloud是基于echarts的一个插件，所以我们要首先安装echarts包，然后再安装echarts-wordcloud的包，这里我的练习项目安装的版本；当然，你可以随意安装你需要的版本；

“echarts”: “^5.3.3”,
“echarts-wordcloud”: “^2.0.0”,

npm install echarts@5.3.3
npm install echarts-wordcloud@2.0.0

基本配置详解

词库云的使用方式其实跟echart组件是一样的，也是首先需要一个容器，然后对其进行配置，我们先来看一下他的一下配置项，最后我们再把详细的使用方法以及代码展示出来；

var chart = echarts.init(document.getElementById('main'));chart.setOption({...series: [{type: 'wordCloud',/*要绘制的“云”的形状。可以是为回调函数，或一个关键字。可用的形状有(circle)圆形(默认)、(cardioid)心形，(diamond)菱形，(triangle-forward)三角形向前，(triangle)三角形，(pentagon)五边形和(star)星形。*/shape: 'circle',//保持maskImage的宽高比或1:1的形状，他的选项是支持从echarts-wordcloud@2.1.0keepAspect: false,//一个轮廓图像，其白色区域将被排除在绘制文本之外//意思就是可以通过图片，来自定义词云的形状maskImage: maskImage,//设置显示区域的位置以及大小left: 'center',top: 'center',right: null,bottom: null,width: '70%',height: '80%',//数据中的值将映射到的文本大小范围。默认大小为最小12px，最大60px。sizeRange: [12, 60],//文本旋转范围和步进度。文本将通过rotationStep:45在[- 90,90]范围内随机旋转rotationRange: [-90, 90],rotationStep: 45,//以像素为单位的网格大小，用于标记画布的可用性//网格尺寸越大，单词之间的间距越大。gridSize: 8,//设置为true，允许文字部分在画布外绘制。//允许绘制大于画布大小的单词//从echarts-wordcloud@2.1.0开始支持此选项drawOutOfBound: false,//如果字体太大而无法显示文本，//是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。//从echarts-wordcloud@2.1.0开始支持此选项shrinkToFit: false,// 执行布局动画。当有大量的单词时，关闭它会导致UI阻塞。layoutAnimation: true,//全局文本样式textStyle: {fontFamily: 'sans-serif',fontWeight: 'bold',// Color可以是一个回调函数或一个颜色字符串color: function () {// Random colorreturn 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {focus: 'self',textStyle: {textShadowBlur: 10,textShadowColor: '#333'}},//数据是一个数组。每个数组项必须具有名称和值属性。data: [{name: 'Farrah Abraham',value: 366,//单个文本的样式textStyle: {}}]}]
});

具体使用步骤（Vue为例）

1.首先在项目中引入

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

2.在需要使用词库云的组件写一个div容器

<div id="myEchart"></div>

3.设置配置项

export default {mounted(){this. initEchart()},methods:{initEchart(){const echartDom = document.getElementById('myEchart')const myChart = echarts.init(echartDom)const option  = {series: [{type: 'wordCloud',shape: 'circle',keepAspect: false,// maskImage: maskImage,left: 'center',top: 'center',width: '100%',height: '90%',right: null,bottom: null,sizeRange: [12, 60],rotationRange: [-90, 90],rotationStep: 45,gridSize: 8,drawOutOfBound: false,layoutAnimation: true,textStyle: {fontFamily: 'sans-serif',fontWeight: 'bold',color: function () {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {// focus: 'self',textStyle: {textShadowBlur: 3,textShadowColor: '#333'}},//data属性中的value值却大，权重就却大，展示字体就却大data: [{name: 'Farrah',value: 366},{name: "汽车",value: 900},{name: "视频",value: 606},...]}]}option && myChart.setOption(option)//随着屏幕大小调节图表window.addEventListener("resize", () => {myChart.resize();});}}
}

4.效果图展示