echarts-wordcloud是基于echarts的一个插件，所以我们要首先安装echarts包，然后再安装echarts-wordcloud的包，这里我的练习项目安装的版本；当然，你可以随意安装你需要的版本；
“echarts”: “^5.3.3”,
“echarts-wordcloud”: “^2.0.0”,
npm install [email protected]
npm install [email protected]
基本配置详解
词库云的使用方式其实跟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的形状，他的选项是支持从[email protected]
keepAspect: 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，允许文字部分在画布外绘制。
//允许绘制大于画布大小的单词
//从[email protected]开始支持此选项
drawOutOfBound: false,
//如果字体太大而无法显示文本，
//是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。
//从[email protected]开始支持此选项
shrinkToFit: false,
// 执行布局动画。当有大量的单词时，关闭它会导致UI阻塞。
layoutAnimation: true,
//全局文本样式
textStyle: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
// Color可以是一个回调函数或一个颜色字符串
color: function () {
// Random color
return '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: {
}
}
]
}]
});
具体使用步骤
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.效果图展示
